design-tokens
design-tokens copied to clipboard
Mapping styles to decisions
In the figma file you can create color styles like Neutrals/grey-dark-800 etc. Question I have is what if you for instance want to map a decision to have background color to be Neutrals/grey-dark-800 and exported as a token.
Like
{
colors: {
"neutrals": {
"grey-dark-800": {
----
}, {
..... more colors
},
"background": {
"dark": {
value: {colors.neutrals.grey-dark-800}
}
Is this possible? I was thinking of alias etc, but I'm struggling a bit with understanding how to set this up in the figma file?
So basically what I want is not having to create a separate background/dark style but instead referencing an already existing style and export this as a token.
Yes, this is possible when using the standard
export format: https://github.com/lukasoppermann/design-tokens#aliases-standard-format-only
Within your background figma style you have to add the following line to the description field:
ref: neutrals.grey-dark-800
This is assuming the main color is neutrals.grey-dark-800
and the top level colors is added by the plugin.
This should generate the desired output. NOTE: The plugin will not sync the colors in figma for you. This would be really neat, but requires quite a bit of work.