medium bookmark / Raindrop.io |

The design process starts with messy brainstorms and infinite possibility, and somehow ends with finished products (when all goes well).

Each stage of the workflow — from wireframing to pixel pushing — requires a different approach and mindset. So it’s not surprising that designers prefer to put each step’s sketches in separate documents, versus having them all jumbled together. That way, they can go creatively buck wild in the beginning, but leave all the chaos behind when it’s time to polish the ultimate product.

To meet this need, we’re introducing Figma Pages — an extra layer of organizational control. Now you can divide your brainstorms, iterations, and final assets into separate, accessible documents without ever leaving the file. We hope this will make it easier for you to categorize and navigate elements of your design.

In the left hand panel of your design file you’ll see the option to add, switch or delete Pages. This Pages menu will collapse as soon as the designer is done manipulating Pages — although you’ll have the option to lock it open if you control click the panel. When you use our Sketch import feature, your pages and symbols will import into Figma the same way you organized them in Sketch.

Here are some examples of how you could use Pages:

• If you like to keep your work stages separate, you can do messy brainstorming on one Page, wireframing on another, and put the finished product on a third
• If you’re designing a mobile app, you can put the iOS frames on one Page and the Android frames on another
• If you’re building a complex interface, you can categorize certain elements, like shared components or icons, on separate Pages
• If you like to curate your file thumbnails in your browser for easy skimming, you can change which Page is used by placing it first in the left hand panel of the file
• If you need to create multiple prototypes per file, you can put each prototype on an individual Page

Privacy note: If you share a Page with someone, they’ll be able to see the rest of the file the Page is located in. However, if you share a prototype from a Page, they’ll only be able to see the prototype.

Tip: To move a component between Pages, right click it and select ‘Move to Page’

There’s no limit to the number of Pages you can create, so riff to your heart’s content. The only thing we’d caution you against: Don’t create extra Pages as a form of version control. Figma has a robust version control system already (see how to access it here). If you’re duplicating giant design files again and again on many Pages, it could impact your performance.

Look for the small and subtle changes throughout the app and please let us know what you think! We’ll continue to develop it with guidance from our users.