Sync Design Tokens

Automatically create and update Figma Styles from a design tokens url.

Import Style Dictionary (json) design tokens into your Figma so you don't have to manually create or update styles.

How it works

• Enter the URL for your json design tokens file
• Choose the variable formatting style (optional)
• Click 'Import Tokens' button

What's supported

Creates & updates color design tokens from a URL. In the future, I hope to expand support to other token types like font, grids, spacing, etc.

---

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

• Node.js – v16
• 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 Open Console via the Quick Actions search bar.