We take a look at the main features of Figma Pages. How to organize your pages, create new ones, delete them, etc. to structure your Figma web models and projects. Here is an overview of the pages in Figma.
To create your web layout on Figma you will use pages. A Figma page is the design space where you can integrate your Frames, Groups and Layers.
The pages are not infinite, and have a size limit of -65,000 to +65,000 on the x- and y-axis.
In this article we will take a look at the different page features in Figma, to help you better organise your future web projects.
How to organize your pages in Figma?
From an organisational point of view, Figma allows you to create several pages within the same file, to better structure your web design projects. You will also be able to rename your pages, to identify them according to the stages of the project, or the elements they contain.
For example, you could create separate pages for :
- Separate different phases of your web design project : brainstorming, UX model, UI model, etc.
- Identify the different components and styles of your project. This will allow you to create your guide style on a separate page to group your icons, colours, typography, images, components, etc.
- Test your user flows, the UX of your web template. You will be able to create different UX web mockups and test them in separate pages. This will allow you to use the "preview" mode for each of your web mock-ups.
- Keep a history of your mock-ups. Your mock-up project will often evolve, depending on customer feedback, A/B testing, etc. When you challenge your interface, rather than deleting your work or calling it in a corner of the page, integrate it into a "History" / "Data" / "Old" page (whatever name speaks to you the most) so that you can retrieve elements if necessary.
How to display your pages in Figma?
The pages are accessible when you are in a Figma file. You will be able to see all the pages in your file from the slidebar on the left of your screen.
- Open the list of your pages by clicking on the drop-down arrow at the top of the slidebar
- Click on the page you wish to view.
How to create a new page?
Once you have accessed your Figma pages from the left slidebar, you can easily add new ones:
- Click on the "+" icon in the top right-hand corner.
- Once you have added the new page, remember to rename it.
Your number of pages will be limited to 3 with the Starter version of Figma, but you can add as many as you want with the Professional, Student and Corporate versions.
How to duplicate a page?
Duplicating a Figma page can be very useful, for example, to offer several versions of your web model, both in terms of UX and UI. From the left slidebar of your Figma file :
- Right click on the page you wish to duplicate
- Click on "Duplicate". Figma creates a copy of your page by adding a number to the name of the copied page. For example if you copy "Mockup", the copy will be "Mockup 2", then "Mockup 3", etc.
- Rename your new page
How to rename a page?
Renaming your pages is a way to structure your Figma file. Whether you are a single designer or several, you can easily find the elements of your file by identifying each page. The web developer will also be able to find his way around better.
Method 1
- Right click on the page you wish to rename
- Rename your Figma page
- Click anywhere on the page
Method 2
- Double click on the name of the page you wish to rename
- Rename your Figma page
- Click anywhere on the page
How do I delete a page?
To delete a Figma page, go to your page in the left slidebar:
- Right click on the page to be deleted
- Click on"Delete".
How to organise your pages?
It is possible that the order in which you have created your Figma pages is not the logical order of the file. You can reorganise your pages by simply dragging and dropping them from the slide bar on the left:
- Choose the page to move
- Left-click on the page
- Move the page up and down to rearrange the file
- Release the click
How to move a design from one page to another?
In Figma it is possible to move certain elements like your frames from one page to another without having to copy/paste or cut/paste. You will be sure to take all the elements of the frame and preserve its structure.
- Select the frame to be moved
- Right click and click on "Move to page".
- Select the page where you want to move the frame
