本文探讨了在Figma中使用Pages功能来优化设计工作流程的五种方法。通过将设计文件细分为不同的页面，设计师可以根据项目需求灵活地组织工作，提高效率。文章介绍了根据平台或屏幕尺寸、应用功能、设计流程阶段、原子设计方法以及“大杂烩”方法来组织Figma页面的具体实践，并鼓励设计师分享自己的独特见解，从而帮助设计师们更好地管理和呈现设计作品。

📱 **按平台或屏幕尺寸组织**：对于跨平台或响应式设计项目，使用页面分隔设计，例如Android、iOS和桌面应用。每个页面可以包含自己的原型，方便进行不同平台或屏幕尺寸的用户测试。

⚙️ **按应用功能组织**：在团队合作开发具有多个功能的应用时，按功能对页面进行组织。这样可以使设计师独立地处理特定功能，同时参考整个项目。例如，一个设计师可以专注于构建应用的个人资料视图，并轻松查看主屏幕的设计以保持一致性。

🪜 **按设计流程阶段组织**：根据设计流程阶段组织页面，方便利益相关者了解工作进展。将已完成的设计放在标有“完成”的页面上，方便开发人员了解需要构建的内容；将早期的构思和头脑风暴放在不同的页面上，保持已完成工作的整洁。

⚛️ **原子设计方法**：如果使用原子设计方法进行设计系统，将设计的每个构建块放在其自己的页面上，例如，将原子（排版或图标）放在一个页面上，分子（按钮）放在另一个页面上，有机体（完整页面）放在第三个页面上。

💡 **“大杂烩”方法**：根据项目需求混合使用不同的页面组织方法。例如，设计系统可以使用原子设计方法在一个文件中捕获，而特定应用的页面可以按操作系统组织。根据需要灵活组合，以满足不同的项目需求。

Designers are constantly on the search for the perfect workflow, so they can spend less time organizing and more time designing. Alas, there’s no one path to design-lightenment. Every company, team and individual has unique needs, which is why we made Figma as flexible as possible.

We introduced Pages last year to add to that adaptability. With Pages, you can subdivide your design file into separate tabs on the left hand side, to organize your work in the way that makes most sense for you, whether you’re building a design system, making an app or freelancing for others.

There’s a lot of different ways to set up your files, so we asked people to share their own approach. Take a look for some process inspiration.

1. Platform or screen size

When you’re working on a product that’s cross-platform or responsive — i.e. it’s an Android, iOS and Desktop app — use Pages to separate your designs. That way, you can build your designs responsively using Figma’s frame presets and constraints. Each Page holds its own prototype, which makes it easy to run user tests for different platforms or screen sizes.

Ben Decker on Twitter

@carmeldea @figmadesign I organize my Figma Pages by platform. I also keep a page to hold Master Components, and a "Scraps" page so other page canvases are clean when presenting and sharing the file, but I can keep old ideas around. Finally a cover page for a custom file thumbnail.

2. By feature in the app

If you’re working on a team with multiple designers and building an app with a lot of features, organize the sections of the product by Pages. That will allow you to work independently on a feature while still referencing the project as a whole. For example, one designer building the profile view of an app can easily check on what’s happening with the home screen design to stay consistent. You can test the flow for unique parts of the app by making a different prototype on each Page.

Marcel Wichmann on Twitter

I organize my @figmadesign documents based on the structure of the app I'm working on. Every area in @MoodpathApp gets a page in Figma. "Ideas" contains random things I tried that might never become a part of the actual product. ✏️

3. Stage of the design process

If you organize your Pages based on stage of the design process, other stakeholders can see how the work is progressing. Put finished designs on a Page labelled “Done,” and developers will know what they should be building (versus what you’re still tweaking). Stick early ideations and brainstorms on a different Page, so your polished work stays clean.

Some possible Page structures:

Thumbnail, wireframes, designs, archive — from Cameron McNabDocs (reference materials, journey maps, other research), staging (where the messy work is done) and ready for review — from Nick McVeySitemap, wireframes, mockups, QA, screenshots for marketing — from Michael Robson

Or, go for pure simplicity:

Seif Sallam on Twitter

@figmadesign Our pages setup

4. Atomic design method

Already using the atomic design method for your design system? Put each building block of your design onto its own Page — atoms (typography or icons) in one, molecules (buttons) in another and organisms (full pages) in a third.

When you name the Pages that way, you can find any “button” you need when searching your Team Library, because they’ll all show up under the Page labelled button. That simplifies your layer panel. For example, you won’t need to name each individual component or instance “button-selected” or “button-hovered,” you can just name it “selected” or “hovered.”

Reed Ellard on Twitter

@figmadesign

5. The kitchen sink approach

Want the best of all worlds? You can change your approach to organizing Pages depending on the project you’re working on. Perhaps your overall design system can be captured in one file via the atomic method, and a particular app you’re designing could have its own file organized by OS Pages. Why not mix ‘n match to suit your needs?

Ari R on Twitter

@figmadesign For webapps it's Sprint#/feature# Sandbox For native apps it's OS based For library Overall Atoms Basic components Advance components Typo and colors

And that’s a wrap for our Pages roundup! Did we miss any major use cases? Do you have a unique spin on how you organize your Figma files? Give us a peek into your process over on Spectrum.

---

5 ways to structure your workflow with Pages in Figma was originally published in Figma Design on Medium, where people are continuing the conversation by highlighting and responding to this story.