Figma variables block

The existing Figma content block allows you to document anything from individual Figma components to entire design systems. However, this standard block doesn't support the documentation of Figma variables.

To fill this gap, Smartive, using our Brand SDK, has created the Figma Variables Block. This block lets you seamlessly document color, string, number, and other variable types directly from Figma into Frontify. Let's explore how it works.

First, install the block by navigating to your Frontify marketplace and following the installation procedure outlined here. Please note that only editors have permission to install blocks from the marketplace.

After installation, simply add the Figma variables block to your guidelines to document your variables.

Next, you need to export your variables from Figma. Open your Figma file, click on the Actions icon, search for the plugin "variables2json," and run your plugin.

Download the generated JSON file that contains your Figma variables to your device.

Let’s upload the file to the block back in our Frontify instance.

And there you have it, your Figma variables are now successfully documented and available in Frontify.

The block includes several valuable features. You can expand or collapse the sidebar to browse and select any specific collections, variable groups, or subgroups.

Additionally, you can select multiple filters of displayed variables using the filter dropdown on the right side of the table.

If you are an editor, you can also tailor what gets shown in View mode by hiding anything from an entire group down to single variables.

In view mode, viewers can easily copy and paste individual variable values directly from the block.

You can also set how the block will appear in your guidelines, curating the layout and the styles.

And that’s it. Thanks for reading this help article. If you have any questions, please contact our partner, Smartive.