Using the Relume Figma Plugin

In this doc, you’ll learn how to:

1. Install and open the Relume Figma plugin
2. Import your Relume sitemap and wireframes
3. Import individual pages and sections

Install and open the Relume Figma plugin

The Relume Figma Plugin helps streamline the process from Site Builder to Figma by syncing existing variables if starting from the Relume Figma Kit or creating variables if importing into a Figma file that does not have these variables. It also will bring in any AI generated copy from Site Builder into Figma.

There are a couple of different ways to install the Relume Figma Plugin.

Install directly

You’ll find the Relume Figma Plugin on the Figma Library page.

Install from Export menu in Site Builder

Within site builder, we have several export options at the top right. Clicking on Export to Figma will present the following modal. This modal is simply saying to install the plugin. If you already have it installed, navigate to Figma and open the plugin from the Plugins menu.

How to know if you have it installed already

If you already have the plugin installed, navigate to the plugin inside of Figma and the Plugins menu.

Opening the Relume Figma Plugin

Once you have it installed, you can find it in your Plugins menu in Figma.

Clicking on the plugin will open the plugin and initiate the login sequence. Once you are logged in, you should see a screen similar to the one below - with a list of your projects.

{{note-figma-kit="/resources/assets/rtc"}}

Import your sitemap and wireframes

Select the Relume project you wish to import and hover over the sitemap of choice to select the import buttons. You can choose either the sitemap or wireframe.

Import individual pages and sections

You can also navigate within the sitemap to import individual pages or individual sections.