How Do I Make a Site Map in Figma?

Making a site map in Figma is an efficient way to plan and organize your website’s structure. It allows you to quickly create a visual representation of your website’s pages and how they fit together, which can help you design the navigation of your site. With Figma, you can easily create a site map for any website and even use it as the basis for creating a prototype of the site.

Step 1: Create Your Figma Document

The first step in creating your site map in Figma is to set up the document. You can do this by clicking ‘Create New’ in the top left corner of the homepage or by opening an existing file.

Once you have created or opened your file, you will need to set up the page size and frame size. This will depend on the size of your website and how much information you want to include on each page.

Step 2: Add Pages

Once you have set up your document, it’s time to start adding pages. To do this, click on the ‘Pages’ tab in the bottom right corner of the screen.

Here, you can add new pages or duplicate existing ones. You can also rename them so they are easier to identify later.

Step 3: Design Your Site Map

Now that your document is set up with all of your pages, it’s time to start designing your site map. Start by adding elements such as labels and text boxes to each page so that they are easy to identify when looking at them from an overview perspective. Next, draw lines connecting each page so that they fit together like pieces of a puzzle.

Step 4: Test Your Site Map

To make sure that everything fits together correctly, test out different scenarios such as clicking through from one page to another or opening a new window from within one of the pages. If something does not look right or does not work properly, go back and make adjustments until everything looks good.


Creating a site map in Figma is an effective way to plan out and organize your website before starting development work. It allows you to quickly create a visual representation of how all of your pages fit together and helps ensure that everything works correctly before any coding begins. With just four simple steps – creating a document, adding pages, designing the layout, and testing – anyone can easily make a site map in Figma with ease!