design-tokens icon indicating copy to clipboard operation
design-tokens copied to clipboard

Mapping styles to decisions

Open frankbolviken opened this issue 3 years ago • 1 comments

In the figma file you can create color styles like Neutrals/grey-dark-800 etc. Question I have is what if you for instance want to map a decision to have background color to be Neutrals/grey-dark-800 and exported as a token.

Like

{
  colors: {
    "neutrals": {
      "grey-dark-800": {
         ----
      }, {
        ..... more colors
      },
   "background": {
     "dark": {
       value: {colors.neutrals.grey-dark-800}
     }

Is this possible? I was thinking of alias etc, but I'm struggling a bit with understanding how to set this up in the figma file?

So basically what I want is not having to create a separate background/dark style but instead referencing an already existing style and export this as a token.

frankbolviken avatar Feb 07 '22 11:02 frankbolviken

Yes, this is possible when using the standard export format: https://github.com/lukasoppermann/design-tokens#aliases-standard-format-only

Within your background figma style you have to add the following line to the description field:

ref: neutrals.grey-dark-800

This is assuming the main color is neutrals.grey-dark-800 and the top level colors is added by the plugin.

This should generate the desired output. NOTE: The plugin will not sync the colors in figma for you. This would be really neat, but requires quite a bit of work.

lukasoppermann avatar Feb 11 '22 15:02 lukasoppermann