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

Variable aliases do not take into account token prefix settings

Open distolma opened this issue 2 years ago • 1 comments
trafficstars

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.

distolma avatar Sep 25 '23 11:09 distolma

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.

lukasoppermann avatar Oct 07 '23 20:10 lukasoppermann