Variables to Styles

The plugin will add any variables with matching names to your file's local styles. Things to be aware of:

• The plugin will scan for local and remote variable collections.
• Remote variable collections have to be added to the file before using the plugin - I'd recommend reloading the file after connecting them.
• Figma Plugin API isn't very stable - remote variables sometimes work and sometimes don't - try to close the plugin and open it again.
• The structure of the variables and styles has to be the same.

An example for matching style and variable:

• a style name "core/colours/black" will show as black inside a folder called colours inside a folder named core.
• A variant name "core/colours/black" will show as back inside a group called colours inside a group named core.

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

• Node.js – v20
• Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples