Style Dictionary To Figma

Brought to you by

A utility that transforms a style-dictionary object into something Figma Tokens plugin understands.

Used by Design Systems in Backlight using design tokens in style-dictionary that can be synced into Figma via the Figma Tokens plugin.

Features

• Allows marking a category as a custom tokenset so that it will appear as a separate tokenset in Figma. This is useful if you want to combine many base tokens into a "global" set for example.
• Trims .value from reference values as Figma Tokens plugin does not use this suffix.
• Trims the name properties from tokens since Figma Tokens plugin uses this property to name its tokens, however, without a name property it creates its own naming/nesting by the object structure which is way nicer.
• Use the reference values rather than its resolved values

Usage

npm i @divriots/style-dictionary-to-figma

import styleDictionaryToFigma from '@divriots/style-dictionary-to-figma';

const sdObject = { ... };
const figmaObj = styleDictionaryToFigma(sdObject);

In case you want its separate counterparts, you can import them separately.

import {
  trimValue,
  trimName,
  useRefValue,
  markTokenset,
} from '@divriots/style-dictionary-to-figma';

Once you transformed the object to Figma, a recommendation is to push this to GitHub and use the Figma Tokens plugin to sync with it to use the tokens in Figma.

Use in Backlight / Style-dictionary

Simply import the styleDictionaryToFigma utility and create a style-dictionary formatter:

import styleDictionaryToFigma from '@divriots/style-dictionary-to-figma';

export default {
  source: ['**/*.tokens.json'],
  format: {
    figmaTokensPluginJson: opts => {
      const { dictionary } = opts;
      const parsedTokens = styleDictionaryToFigma(dictionary.tokens);
      return JSON.stringify(parsedTokens, null, 2);
    },
  },
  platforms: {
    json: {
      transformGroup: 'js',
      buildPath: '/tokens/',
      files: [
        {
          destination: 'tokens.json',
          format: 'figmaTokensPluginJson',
        },
      ],
    },
  },
};

This spits out a file /tokens/tokens.json which Figma Tokens plugin can import (e.g. through GitHub).

Since Backlight has GitHub and Style-Dictionary integration out of the box, this process is very simple.