tokens-bruecke / figma-plugin Goto Github PK

Hi! I've testing the plugin and it works perfect! but I've detected that when using references, in the exported JSON you are auto-referencing the current token instead of the correct reference token. Example with a Semantic Color collection with tokens referencing Primitive Color collection:

{
"Semantic: Color": {
  "Light": {
    "Brand": {
      "Red (TR-600)": {
         "$value": "{Semantic: Color.Light.Colors.Red.600}",
         "$type": "color",
       //...
},

"Primitive: Color": {
  "Colors": {
    "Red": {
      "600": {
        "$value": "hsla(4, 77%, 48%, 1)",
        "$type": "color",
        // ...
        "$extensions": {
          "variableId": "VariableID:8414:43621",
          "aliasPath": "{Primitive: Color.Colors.Red.600}"
         }
},

Thanks for checking it!

Hey Pavel, great plugin! :-) Just tried it out and I think it would be cool, to be able to toggle on/off the extensions in the generated JSON, so in case you don't need it the JSON would be a bit cleaner.

Is there a possibility in the future to have a multitenant version?
at the moment I have 4 design systems and every time I want to push tokens I have to log out of github and log back in looking for the access key and all the information I need
it would be fantastic to be able to stay logged in to all 4 at the same time and switch between one and the other only at the time of the push

Using the included styles toggle will output the name of the style included in uppercase? Is this the intended output? The rest of my keys are all lowercase

"Effects": {
      "shadow": {
        "0": {
          "type": "shadow",
          "value": {
            "inset": false,
            "color": "#1e1e1e00",
            "offsetX": "0px",
            "offsetY": "0px",
            "blur": "0px",
            "spread": "0px"
          }
        },

How shall we handle collection that references variables in another one that could use multiple modes ?

I would expect the tool to create multiple variables set but it embeds modes as token groups

I have two collections:
core:

component:

The current result is this :

{
  "core": {
    "light": { // <- light mode
      "color": {
        "base": {
            "$type": "color",
            "$value": "#ffffff",
            "$extensions": {
              "variableId": "VariableID:102:434"
            }
        }
      }
    },
    "dark": { // <- dark mode
      "color": {
        "base": {
            "$type": "color",
            "$value": "#000000",
            "$extensions": {
              "variableId": "VariableID:102:434"
            }
        }
      }
    }
  },
  "component": {
    "button": {
      "background": {
        "$type": "color",
        "$value": "{core.Value.color.base}", //<- invalid reference, expected "core.color.base"
        "$description": "",
        "scopes": ["ALL_SCOPES"],
        "$extensions": {
          "variableId": "VariableID:416:14"
        }
      }
    }
  }
}

I know cobalt expects mode to be an extension on variables https://cobalt-ui.pages.dev/docs/guides/modes/
This plugin choosed to export modes in different files : https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager

This is still a discussion topic on design-tokens/community-group#210

When i run the plugin the schema generates fine - but there is no "value" key for the color tokens

{
  "sonic": {
    "color": {
      "background": {
        "button": {
          "primary": {
            "default": {
              "type": "color",
              "description": "",
              "scopes": [
                "SHAPE_FILL",
                "FRAME_FILL"
              ],
              "extensions": {
                "variableId": "VariableID:1:3",
                "aliasPath": "{sonic.color.background.button.primary.default}"
              }
            },
            "hover": {
              "type": "color",
              "description": "",
              "scopes": [
                "SHAPE_FILL",
                "FRAME_FILL"
              ],
              "extensions": {
                "variableId": "VariableID:14:46",
                "aliasPath": "{sonic.color.background.button.primary.hover}"
              }
            }
        }
   }

Other tokens (e.g space) work fine

"space": {
      "element": {
        "large": {
          "value": "12px",
          "type": "dimension",
          "description": "",
          "scopes": [
            "GAP"
          ],
          "extensions": {
            "variableId": "VariableID:1:4",
            "aliasPath": "{sonic.space.element.large}"
          }
        },

At the moment the variables are sorted in the json according to the creation date: this means that if I create a variable at a later time, it is sorted at the bottom, although in the Figma variables interface I drag it and reposition it in an order different.
Is it possible to have a sorting that follows that of the Figma interface?

It seems like the plugin saves some sort of meta data which is not updated when going between different projects and teams in Figma. Working for an agency and going back and forth between multiple clients, the "Add styles to" plugin option and variableCollections in the JSON seems to refer to the very first project I tested it in.

This is a very handy plugin and I'm super happy with finding it after testing a bunch of different Figma export plugins. As a designer I can see a very smooth collaboration with the frontend developers using this plugin.

--

Update 18 hrs later: I'm not sure why but it seems to work fine now. Maybe some performance issues with FIgma itself? Anyways, great plugin. Thanks for making this available.

I've been using Tokens Brücke to export Figma variables as a DTCG file to then use with Cobalt UI. It works really well - especially since you've adopted the same modes extension that Cobalt UI supports. That's made my life a lot easier!

However, there is one minor snag: Tokens Brücke adds a top-level $meta property to the output with some info about the export settings and creation time. The trouble is that's not valid DTCG as the $ prefix is reserved for format properties and $meta is not something that exists in the current spec draft. Cobalt's parser is following that rule and therefore throws an error because of the $meta property.

While it's easy to work around - just remove that property - it would be nice if I didn't have to and things "just worked". I therefore propose moving that metadata into an extension (the spec allows $extensions on groups, so this would be fine). Perhaps something like this:

{
  // ... design token data

  "$extensions": {
    "tokens-bruecke.meta": {
      // your metadata goes here
    }
  }
}

Cobalt and (hopefully) other tools that can parse DTCG files won't have any issues then.

If you like, I can open a PR to implement this change (looks like it's just one line that would need changing).

Hey! I think it would be very handy to be able to select, if I want to generate one JSON for all collections or individual collections as individual JSONs. For example I am structuring component-level tokens per collection and export them for my developers individually (button.token.json, card.token.json, etc.), so that we have tidy JSONs. If I would be able to select which collections I want to export and if they should be in one or multiple JSONs, I would have much more control over the file structure and be able to fit it to my needs.

Hi! As I was working my way through processing tokens for text styles, I learned that some properties as provided by the Figma Plugin API TextStyle object are not yet supported. I am talking about the following:

• textDecoration (link)
• textCase (link)

There are other properties, of which I am unsure whether or not they would be useful:

• leadingTrim (link)
• paragraphIndent (link)
• paragraphSpacing (link)
• listSpacing (link)
• hangingPunctuation (link)
• hangingList (link)

I think I can safely implement support for textDecoration and textCase and create a PR. Is that okay?

As for the others, I would like to know what your stance is on this.

I see that Tokens Brücke wraps tokens in top-level groups based on the Figma variable collection name or type of style (e.g. "Typography").

In my case, I don't need those top-level names so an option to omit them and just place tokens from all collections into a single top-level group would be useful. References would of course need to be updated accordingly too.

I guess there may be cases where there's a clash - e.g. multiple variable collections contain variables with the exact same path. Perhaps Tokens Brücke just keep the last one it encounters and display a warning to let users know there was a clash. Or it could be treated as an error. I don't really have a strong preference either way.

As the title says: I am wondering how I could support multiple shadows in one drop shadow effect. I take cues from Material Design with supporting shadows: they have three shadows for one definition of elevation, which I derived my own set of drop shadow effects from:

Currently, only one of the drop shadows ends up in my tokens.json file.

Is it possible to support multiple drop shadows in my tokens.json?

I've noticed your plugin adds the alias for a token as

"$value": "{base.primary.yellow}"

When you try to resolve aliases in style dictionary i'm getting a blank output file

Should the plugin output an alias path the same as the style dictionary example?

"$value": "{base.primary.yellow.value}"