Figma Visual Sitemap Integration

Instructions

Step 1: Create a Sitemap

You can create a site map using any method. If the website is already online, choose the Create from URL option, which allows you to utilize our crawler to create your site map. After you create a project, you can edit your Sitemap to make it look exactly how you want.

If it is a new website, use the Create from Scratch method. Use the sitemap editor to add, remove, and arrange the hierarchy.

More on creating, editing, customizing, and sharing sitemaps - View our Getting Started Videos 

Step 2: Connect Figma

Click the Edit icon in the top sitemap menu. Select any page in the sitemap editor and click ASSIGN THUMBNAIL.

Click the Figma logo and add the Figma account.

Click ADD FIGMA ACCOUNT. Sign In and click Allow access.

Then select the Figma Account that you just added.

Step 3: Load Designs

Enter a Figma Team ID, which you can find in the URL of your browser's address bar.

To Load Designs, enter the Figma Design URL, which you can copy from your browser's address bar when viewing a design.

In this example, I will load a website re-design courtesy of Worrad Designs.

Open the Figma file, copy the URL from Figma, paste it into the Figma Design URL field, and click LOAD DESIGNS.

Give Dyno Mapper a few seconds to load an image for each page.

Select the page in the dropdown and the specific design nodes. 

Select all needed designs and click Add DESIGNS.

Give Dyno Mapper a few seconds to process the images.

Deselect and select the correct images, then click IMPORT SELECTED DESIGNS.

Step 4: Assign Designs

Navigate to each page in the Sitemap Editor and add the corresponding images by selecting Assign a Thumbnail.

Step 5: View Visual Sitemap

Edit the Sitemap Style to Custom Thumbnail Style.

You also have the option to display a larger image in the sidebar.

To enable this, open the Settings and turn on Custom Thumbnails.