Skip to main content
Pages are used to design screens of your product using your design system.

​
Creating a page

A canvas heading in the Pages view with Open prototype, New page, and Open canvas buttons
In the Pages view, click New page next to the canvas you want to add it to. The blank page opens in the editor. To generate a page design from a prompt, use Agent chat.

​
Renaming a page

Double-click a page name in the pages sidebar or on the canvas to rename it. Press Enter to confirm or Esc to cancel. Page names can contain any characters, including spaces and symbols. When you export a page, Subframe normalizes the name into a valid component name in the generated code.

​
Duplicating a page

A page's menu with Duplicate highlighted between Move to canvas, Copy as PNG, and Delete
  1. Right-click a page or click
  2. Select Duplicate

​
Sorting pages

Use the sort control at the top of the Pages view to change how pages are ordered:
  • Group by canvas — Pages organized under their canvases (default)
  • Recently edited — Most recently edited first
  • Recently created — Most recently created first
  • A-Z — Alphabetical by name

​
FAQ

For page states like loading, empty, and error states, we recommend creating a separate page for each state. You can easily duplicate the page for this. Organize the screens together on a canvas and use annotations to describe how the screens are connected during handoff.
Last modified on October 8, 2026