In the README, it says that:

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.

This is exactly what I want to do. However, it seems like Figma Tokens might not support this anymore? E,g, in Figma Tokens, it seems that every tokenset is a separate JSON, and markTokenset in the same JSON does not have any effect.

I might be doing something wrong, so looking for clarification whether this is supposed to work or not. Thanks!

I stumble on what seems to be a false positive warning. Let's say I have this style dictionary config:

const { transform } = require("@divriots/style-dictionary-to-figma");

module.exports = {
  source: ["tokens/**/*.js"],
  format: {
    figmaTokensPlugin: ({ dictionary }) => {
      const transformedTokens = transform(dictionary.tokens, {
        cleanMeta: true,
      });
      return JSON.stringify(transformedTokens, null, 2);
    },
  },
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "css/",
      files: [
        {
          destination: "variables.css",
          format: "css/variables",
        },
      ],
      prefix: "qa",
    },
    figma: {
      buildPath: "figma/",
      files: [
        {
          destination: "tokens.json",
          format: "figmaTokensPlugin",
        },
      ],
    },
  },
};

In my tokens folder, I have:

// radii.js
function radius(num) {
    return {
      value: `${num}px`,
      type: "borderRadius",
    };
  }
  
  module.exports = {
    radius: {
      xxsmall: radius(1),
      xsmall: radius(2),
      small: radius(4),
      medium: radius(8),
      large: radius(12),
      xlarge: radius(16),
      xxlarge: radius(32),
    },
  };

// spacings.js
function spacing(num) {
  return {
    value: `${num}px`,
    type: "spacing",
  };
}

module.exports = {
  spacing: {
    xxxsmall: spacing(4),
    xxsmall: spacing(8),
    xsmall: spacing(12),
    small: spacing(16),
    medium: spacing(24),
    large: spacing(32),
    xlarge: spacing(40),
    xxlarge: spacing(48),
    xxxlarge: spacing(64),
  },
};

Running style dictionary:

> style-dictionary build --config style-dict.config.js


css
✔︎ css/variables.css

figma
⚠️ figma/tokens.json
While building tokens.json, token collisions were found; output may be unexpected.
    Output name xxsmall was generated by:
        radius.xxsmall   1px
        spacing.xxsmall   8px
    Output name xsmall was generated by:
        radius.xsmall   2px
        spacing.xsmall   12px
    Output name small was generated by:
        radius.small   4px
        spacing.small   16px
    Output name medium was generated by:
        radius.medium   8px
        spacing.medium   24px
    Output name large was generated by:
        radius.large   12px
        spacing.large   32px
    Output name xlarge was generated by:
        radius.xlarge   16px
        spacing.xlarge   40px
    Output name xxlarge was generated by:
        radius.xxlarge   32px
        spacing.xxlarge   48px
This many-to-one issue is usually caused by some combination of:
    * conflicting or similar paths/names in property definitions
    * platform transforms/transformGroups affecting names, especially when removing specificity
    * overly inclusive file filters

My understanding is that there should not be name collisions, since the paths are different (e.g. radius.medium vs spacing.medium). Moreover, CSS transform don't generate these warnings. Did I miss something, or is it a bug?

[email protected] and @divriots/[email protected]

Thank you for this, @divriots. Seeing that green ✔ in the terminal feels good (as a designer) 🙇‍♂️

Intention So my setup was I wanted to pull tailwindcss default --full config into Design Tokens so for anything that is vanilla/default tailwind, I can apply them in my design. For example, I want to apply an equivalent of space-x-4 or gap-4 via Figma Tokens (which is 1rem) on my Figma, so it's consistent with tailwindcss when developers use that specific class.

However, after transforming from SD to JSON I noticed some tokens were not “categorized” in the format that Figma Tokens utilize. I am sure this isn‘t a bug of style-dictionary-to-figma but more a specific transformer code I need to figure out to fix this:

I would appreciate any pointers that can help me find progress in the right direction. I understand if this is out of scope, but I want to thank you again for making a designer like myself feel this is solvable. Here‘s what I got so far: https://github.com/ajmalafif/tailwind-to-style-dictionary/blob/sd-to-figma/style-dictionary.config.js

The previous object fix almost got my exporting code working, but not just yet. The description and tests are quite real, e.g. Figma Tokens accepts multiple shadows in a single boxShadow token, and stores them as arrays.

In style-dictionary, values can be objects (see https://github.com/amzn/style-dictionary/pull/623 for the implementation there). The current trimValue implementation here expects them to always be strings, and throws when it encounters an object.

I'm trying to work around this Figma Tokens issue: https://github.com/six7/figma-tokens/issues/706

Our shadow tokens are defined as follows:

{
  "shadow": {
    "core": {
      "2": {
        "value": {
          "x": "0",
          "y": "1",
          "blur": "2",
          "spread": "0",
          "color": "{color.core.black.8}",
          "type": "dropShadow"
        }
      },
      "4": {
        "value": {
          "x": "0",
          "y": "2",
          "blur": "4",
          "spread": "0",
          "color": "{color.core.black.8}",
          "type": "dropShadow"
        }
      },
      "8": {
        "value": {
          "x": "0",
          "y": "4",
          "blur": "8",
          "spread": "0",
          "color": "{color.core.black.8}",
          "type": "dropShadow"
        }
      }
    },
    "elevation": {
      "small": {
        "value": ["{shadow.core.4}", "{shadow.core.2}"]
      },
      "medium": {
        "value": ["{shadow.core.8}", "{shadow.core.2}"]
      }
    }
  }
}

Our elevation shadows stack the different core shadows and we'd like to not have to duplicate those definitions. We would like to use useRefValue, so the token relationships would be visible in Figma Tokens as well. This is impossible currently due to how our tokens are defined and the FT issue I linked above.

Is there an easy way of adding some sort of filtering to useRefValue, so that the specific shadow.elevation.small.value would not use references, but everything else still would?

Hello!

I tried importing the code in this way:

const styleDictionaryToFigma = require('@divriots/style-dictionary-to-figma');

But, found that it doesn't work. Needed to add .default.

const styleDictionaryToFigma = require('@divriots/style-dictionary-to-figma').default;

Also may I suggest you change the README to use the registerTransform method on StyleDictionary:

StyleDictionaryPackage.registerFormat({
  name: 'figmaTokensPlugin',
  formatter({ dictionary }) {
    const parsedTokens = styleDictionaryToFigma(dictionary.tokens);
    return JSON.stringify(parsedTokens, null, 2);
  }
});

Thanks!

also fixes the high prio vulnerability, for the moderate one it seems quite new and no fix yet.

fixes https://github.com/divriots/style-dictionary-to-figma/issues/20

@mihkeleidast this should fix your issue I think

Any ideas on why this doesn't work? Sorry if I'm overlooking something simple or that is already documented.

/alias
-- color.alias.json5
/foundation
-- color.json5

color.alias.json5

{
  color: {
    brand: {
      blue: {
        '10': {
          value: '#DBF0FF',
          category: 'alias',
        },
      },
    },
  },
}

color.json5

{
  color: {
    blue: {
      '10': {
        value: '{color.brand.blue.10.value}',
        category: 'color',
        type: 'color',
        attributes: {
          category: 'color',
        },
      },
    },
  },
}

Output:

{
  color: {
    blue: {
      '10': {
        value: '{color.brand.blue.10}',
        category: 'color',
        type: 'color',
        attributes: {
          category: 'color',
          type: 'blue',
          item: '10',
        },
        filePath: '../brand/src/lib/foundation/color.json5',
        isSource: true,
        original: {
          value: '{color.brand.blue.10}',
          category: 'color',
          type: 'color',
          attributes: {
            category: 'color',
          },
        },
        path: {
          '0': 'color',
          '1': 'blue',
          '2': '10',
        },
      },
    },
  },
}

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@divriots/[email protected]

Minor Changes

• ab01a1e: BREAKING: if an upper token group does not have a tokenset property, it will get placed in a "global" tokenset by default. This means that no action is required by the user of the transformer to get a working JSON for Figma Tokens Plugin, but this change is potentially breaking because of how it changes the JSON output.

  Before

  {
    "core": {
      "color": {
        "primary": {
          "base": {
            "type": "color",
            "value": "#14b8a6"
          },
          "secondary": {
            "type": "color",
            "value": "#ff0000"
          }
        }
      }
    }
  }
  

  Nothing is changed in the output. However, if you have references, they might be broken because the plugin will interpret this as "color" being the upper property in a tokenset called "core".

  After

  {
    "core": {
      "color": {
        "primary": {
          "base": {
            "type": "color",
            "value": "#14b8a6"
          },
          "secondary": {
            "type": "color",
            "value": "#ff0000"
          }
        }
      }
    }
  }
  

  turns into

  {
    "global": {
      "core": {
        "color": {
          "primary": {
            "base": {
              "type": "color",
              "value": "#14b8a6"
            },
            "secondary": {
              "type": "color",
              "value": "#ff0000"
            }
          }
        }
      }
    }
  }
  

  Your reference, for example {core.color.primary.base} will now work properly because "core" is not interpreted as the tokenset, "global" is.

Patch Changes

• ab01a1e: Fix clean-meta utility by using a proper isObject check which excludes arrays (values can be arrays).

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@divriots/[email protected]

Patch Changes

• 2c9be59: Allow tokensets to be the same name as the upper most keys in the tokens object, e.g.:

  {
    "core": {
      "tokenset": "core",
      "color": {
        "value": "#ff0000",
        "type": "color"
      }
    }
  }
  

  will become

  {
    "core": {
      "core": {
        "color": {
          "value": "#ff0000",
          "type": "color"
        }
      }
    }
  }
  

  so that Figma Tokens plugin picks it up properly.

Hi! I have a problem, it used to work properly. Updated package configuration to 4 versions and in vain. These files are automtaically assigned to the global group that prevents me from working. There is no time to convert json files. So that’s how to turn off this automatic function of inserting the global group?

UPD: Solved the issue of setting in config file) Excuse me