lukasoppermann / design-token-transformer

Base repo to transform json design tokens from the figma design token plugin via amazon style dictionary.
MIT License
150 stars 220 forks source link

npm run transform-tokens cant find "global" form figma plugin export #39

Open TBrayner opened 1 year ago

TBrayner commented 1 year ago

"Reference doesn't exist: global.color.primary-base.value tries to reference brand.accenture.primary-base, which is not defined"

Once the figma Plugin creates this "Global" key, the token-transformer can't find it, I'm including it manually

image

to this:

image

{
  "global": {
    "brand": {
      "accenture": {
        "primary-base": {
          "value": "#A100FF",
          "type": "color",
          "description": "Base Accenture Color"
        },
        "secondary": {
          "value": "#0041F0",
          "type": "color"
        }
      }
    },
    "color": {
      "primary-base": {
        "value": "{brand.accenture.primary-base}",
        "type": "color"
      }
    },
    "black": {
      "12": {
        "value": "rgba(0,0,0,0.12)",
        "type": "color"
      },
      "25": {
        "value": "rgba(0,0,0,0.25)",
        "type": "color"
      },
      "50": {
        "value": "rgba(0,0,0,0.5)",
        "type": "color"
      },
      "85": {
        "value": "rgba(0,0,0,0.85)",
        "type": "color"
      },
      "100": {
        "value": "#000",
        "type": "color"
      }
    }
  },
  "font": {},
  "$themes": [],
  "$metadata": {
    "tokenSetOrder": [
      "global",
      "font"
    ]
  }
}
lukasoppermann commented 1 year ago

Hey @TBrayner,

the plugin does not by itself include a global key. This must be your to level in figma. Is that correct?

You need to write the entire path out in the references. I hope that helps, otherwise please clarify the question.