design-tokens
design-tokens copied to clipboard
lukasoppermann
The JSON is a bit off when exporting variables from Figma.
I am grateful for this plugin. The JSON exported with the settings below may not be as intended.
I tried running npm run transform-tokens following the flow below, but it didn't work:
https://github.com/lukasoppermann/design-tokens#transforming-tokens-using-amazon-style-dictionary
Error
Property Reference Errors:
Reference doesn't exist: desintokens.mode1.semanticcolor.primary.value tries to reference desintokens.primitivecolor.sea.sea900, which is not defined
The part with Elias is written as
"value": "{desintokens.primitivecolor.sea.sea900}"
But shouldn't it be in the following form?
"value": "{desintokens.mode1.primitivecolor.sea.sea900}"
Is there something wrong with the way I've set it up? I would appreciate it if you could help me.
Exported Json
{
"desintokens": {
"mode1": {
"primay": {
"type": "color",
"value": "#ffffffff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:8:3",
"exportKey": "variables"
}
}
},
"spacing": {
"xxl": {
"type": "dimension",
"value": 64,
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:8:4",
"exportKey": "variables"
}
}
},
"xl": {
"description": "test",
"type": "dimension",
"value": 40,
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:8:5",
"exportKey": "variables"
}
}
}
},
"sea900": {
"type": "color",
"value": "#ffffffff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:9:7",
"exportKey": "variables"
}
}
},
"primitivecolor": {
"sea": {
"sea900": {
"type": "color",
"value": "#000082ff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:10:8",
"exportKey": "variables"
}
}
},
"sea800": {
"type": "color",
"value": "#0017c1ff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:10:10",
"exportKey": "variables"
}
}
}
},
"white": {
"white1000": {
"type": "color",
"value": "#ffffffff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:10:11",
"exportKey": "variables"
}
}
}
}
},
"sea800": {
"type": "color",
"value": "#0017c1ff",
"blendMode": "normal",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:10:9",
"exportKey": "variables"
}
}
},
"semanticcolor": {
"primary": {
"type": "color",
"value": "{desintokens.primitivecolor.sea.sea900}",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:10:12",
"exportKey": "variables"
}
}
},
"text": {
"textreverse": {
"type": "color",
"value": "{desintokens.primitivecolor.white.white1000}",
"extensions": {
"org.lukasoppermann.figmaDesignTokens": {
"mode": "Mode 1",
"collection": "DesinTokens",
"scopes": [
"ALL_SCOPES"
],
"variableId": "VariableID:11:13",
"exportKey": "variables"
}
}
}
}
}
}
}
}
Plugin Setting
Hey, the problem is, that we export modes in the name at the moment but not in the reference.
Modes don't make sense in a reference but we need them in the names because otherwise we have name duplicates which are not allowed in Json.
I am thinking about adding a setting to enable modes in token references for when you only have one mode.
I think it is impossible to export multiple files, one for each mode.
At the moment you could just remove the mode in the exported Json file by hand.
I am on vacation and can't change it. You can also send a PR if you want. Than you can run the dev build of the plugin locally until I can merge and release it.
@lukasoppermann Thank you for your reply! I'd like to hear more details about the following.
I am thinking about adding a setting to enable modes in token references for when you only have one mode.
Does this mean that if there is only one mode, it would be possible to reference the mode as below? Also, would enabling or disabling this setting be done within the settings modal of the Figma plugin?
"value": "{desintokens.mode1.primitivecolor.sea.sea900}"
Yes in the settings of the Figma plugin.
Disabling would mean the mode is NOT present in the reference.
So your example without mode 1.
@lukasoppermann Thank you. I've been able to understand. I'd also like to try out this option's functionality within the limited time I have. I'll start by forking it and trying to launch it locally, but I would appreciate it if you could let me know if there is any information I should be aware of.plugin).
Not really. It only needs to work in the standard format, the original Format does not export tokens.
Feel free to send any questions I can try to answer from my phone.
@lukasoppermann I have sent you a PR for correction. If the implementation intention was different, I will make corrections. Please check it when you have time.
@lukasoppermann Does this mean when referencing a variable that has multiple modes in another variable, that will not be supported?
Yes. To support multiple modes you need to export them all and afterwards split them somehow.
In our world we are using the "primordial use case" of modes: light and dark. Our more detailed token references to color will resolve to one of the core colors that is also modal, so for example: download-button-color has a value of "primary" for both modes, light and dark. In turn, primary has a defined hex value for each mode, light and dark.
In our case it's obviously necessary to keep the modes in sync, so the designers need to ensure there is a light and dark in both places. So when the code comes across "color-schemes.light.download-button-color" and it points to "color-schemes.primary", in practice our file contains "color-schemes.primary" in a collection that has the same modes (light and dark).
Sounds like you are not considering supporting this by having "color-schemes.light.primary" as the alias value for "color-schemes.light.download-button-color" when you say:
I am thinking about adding a setting to enable modes in token references for when you only have one mode.
Is that correct?
