How to set up your Pages in Figma | Figma Blog

Figma Pages can organize design files in ways that match a team’s product, process, or design-system needs. The article emphasizes that there is no single ideal workflow; Pages provide flexible separation for responsive designs, app features, process stages, and atomic design components.

Platform or Screen Size

• Create separate Pages for Android, iOS, desktop, or other responsive breakpoints.
• Use frame presets and constraints to build platform-specific layouts.
• Each Page can contain its own prototype, making platform-specific user testing easier.

App Feature

• Organize Pages around major product areas such as profiles, home screens, or other features.
• Designers can work independently while still referencing the broader product.
• Separate prototypes allow teams to test individual feature flows.

Design Process Stage

• Use Pages to show progress and distinguish exploratory work from finalized designs.
• Possible structures include:
  • Thumbnail, wireframes, designs, and archive
  • Documentation, staging, and ready for review
  • Sitemap, wireframes, mockups, QA, and marketing screenshots
• A “Done” Page helps developers identify which designs are ready to build.
• Early ideation and brainstorming can remain separate from polished work.

Atomic Design Method

• Dedicate Pages to atomic design levels:
  • Atoms, such as typography and icons
  • Molecules, such as buttons
  • Organisms, such as complete pages
• Consistent Page naming improves Team Library search.
• Components can use simpler names like “selected” or “hovered,” since their Page already identifies them as buttons or other component types.

Ultimately, teams should choose a Page structure that reflects how they design and collaborate, rather than follow a universal template.