Style Dictionary to Figma Variables for the non-Enterprise 🏦

Figma brought Variables to the design tooling world, and it's a game changer for the design systems community.

For companies big enough, maintaining and keeping in sync variables can get messy. Thankfully, Figma provides an API to automate this process.

But there is a catch 🚫 The API is only available for Enterprise accounts 😢 (at the time of writing this post). So, what can we do?

There is a trick, we can utilise plugins to do the job for us. Let's see how.

Figma Plugin template

I created a Figma Plugin template which you can download and run locally. How it works is simple:

1. Load your Style Dictionary generated JavaScript file to src/tokens.js. This file will contain all the tokens you want to sync with Figma.
2. Modify the utils.ts file to add your own logic, like themes you provide etc.
3. Run the plugin locally and see the magic happen 🪄

How it works

Everything you need to modify and make this plugin work lives inside the utils.ts file. Here’s a breakdown of its key elements you need to be aware of:

1. Supported themes. You need to add your own themes here. For example, if you have a light and high-contrast theme, you can add them like this

// utils.ts
// This array contains the names of the themes you want to support
const SUPPORTED_MODES = ["light", "high-contrast"];

2. Transformations. A series of transformations are defined to convert design token formats into Figma-compatible values. For example, px-to-number and hex-to-rgba are two such transformations. You can add your own transformations to the DefaultValueTransforms object.

3. Transform Map. The next thing you need to be aware is the TransformMaps object. This is the place where you define the transformations you want to apply to your tokens, but also which tokens to match, as not everything is supported from Figma yet (example shadows).
   
   For example, if you want to apply the px-to-number transformation to your breakpoints tokens, you can do it like this:

{
    name: "breakpoints",
    type: "FLOAT",
    getName: (path) => path.join("/"),
    getValue: DefaultValueTransforms["px-to-number"]
}

4. Collection Name. Last thing you need to do is to add your targeted collection name to TARGET_COLLECTION variable. This is the collection where the plugin will create the styles.

Run the plugin

To run the plugin locally, you need to have Node.js installed. Then, you can run the following commands:

// yarn, pnpm, npm or any package manager you may use
yarn install
yarn bundle // to build once
yarn watch // to build in watch mode

Conclusion

That's a wrap! I hope you find this useful. If you have any questions, feel free to reach out to me on Twitter and if you have suggestions please go ahead and contribute to the template plugin.