lukasoppermann / design-tokens

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
https://www.figma.com/community/plugin/888356646278934516/Design-Tokens
MIT License
953 stars 131 forks source link

Variable aliases do not take into account token prefix settings #277

Open distolma opened 1 year ago

distolma commented 1 year ago

Hi, thanks for the great plugin. While working with it, I noticed that when exporting JSON, it does not take into account the "Include token prefix in token names" setting when generating aliases. That's why when converting JSON to CSS, I get an error that "Reference doesn't exist".

Here is an example of a generated file with one token and an alias:

{
  "color": {
    "gray": {
      "200": {
        "type": "color",
        "value": "#d3d3d3ff",
        "blendMode": "normal",
        "extensions": {
          "org.lukasoppermann.figmaDesignTokens": {
            "collection": "Primitives",
            "scopes": [
              "ALL_SCOPES"
            ],
            "variableId": "VariableID:1:4",
            "exportKey": "variables"
          }
        }
      }
    },
    "text": {
      "secondary": {
        "type": "color",
        "value": "{primitives.color.gray.200}",
        "extensions": {
          "org.lukasoppermann.figmaDesignTokens": {
            "collection": "Tokens",
            "scopes": [
              "ALL_SCOPES"
            ],
            "variableId": "VariableID:1:10",
            "exportKey": "variables"
          }
        }
      }
    },
  }
}

Plugin settings:

CleanShot 2023-09-25 at 13 11 06@2x CleanShot 2023-09-25 at 13 11 46@2x

I managed to fix it, so I'm ready to create a PR.

lukasoppermann commented 11 months ago

Hey, so you are saying you would want to have e.g. colors in the name of the token as well? Feel free to add a PR for this.