Style dictionary problem since update

[Diemietrie]

I'm having an issue creating aliases. Our aliases need a certain setup since we are using style dictionary.

Style dictionary wants the alias to look like this:
{color.azure.500.value}

But in figma tokens it needs to look like this:
$color.azure.500

Is there a way to fix this?

[six7]

Currently we're able to handle both alias styles in the plugin, $name notation and {name} notation. Right now the plugin doesn't automatically convert aliases to the {name} format for you on export (although that would be ideal). You'd have to manually change aliases to be written in SD notation, sorry :-/

I think you could do that by running find and replace with a regex

[Diemietrie]

Alright thanks.

Before the update, our code worked when we placed .value after an alias. But since the last update the code looks a little different (I believe the value is now placed at the end) and now we can't seem to get the json to work anymore.

Here's is our json, what are we doing wrong?

Again, we're using style dictionary

{ "type": { "content": { "body": { "bold": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-heavy.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.2.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-medium.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.2.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "regular": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.2.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "link": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-medium.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.2.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" } }, "caption": { "bold": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-heavy.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.1.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-medium.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.1.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "regular": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.1.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "link": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-medium.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.1.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" } }, "small": { "bold": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-heavy.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.0.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "medium": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-medium.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.0.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "regular": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.0.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "link": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-medium.value}", "lineHeight": "{lineHeights.0.value}", "fontSize": "{fontSize.0.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" } } }, "heading": { "headline": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-heavy.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.5.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "subline-heavy": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-heavy.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.4.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "subline-light": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.4.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "title-heavy": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-heavy.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.3.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "title-light": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.3.value}", "letterSpacing": "{letterSpacing.1.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" } }, "amount": { "large": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.6.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" }, "default": { "value": { "fontFamily": "{fontFamilies.primary.value}", "fontWeight": "{fontWeights.inter-light.value}", "lineHeight": "{lineHeights.1.value}", "fontSize": "{fontSize.2.value}", "letterSpacing": "{letterSpacing.0.value}", "paragraphSpacing": "{paragraphSpacing.0.value}" }, "type": "typography" } } }, "color": { "variables": { "accent": { "actionable": { "value": "{color.azure.500.value}", "type": "color" }, "disabled": { "value": "{color.shade.300.value}", "type": "color" }, "active": { "value": "{color.azure.500.value}", "type": "color" }, "warning": { "value": "{color.tigre.500.value}", "type": "color" }, "critical": { "value": "{color.crimson.500.value}", "type": "color" }, "success": { "value": "{color.jade.500.value}", "type": "color" } }, "background": { "overlay": { "value": "{color.shade.900.value}", "type": "color" }, "primary": { "value": "{color.shade.100.value}", "type": "color" }, "surface": { "value": "{color.shade.000.value}", "type": "color", "description": "The background of the blocks of content. The surface color has a small contrast with the app background." } }, "text": { "heading": { "value": "{color.shade.800.value}", "type": "color" }, "bodyPrimary": { "value": "{color.shade.700.value}", "type": "color" }, "bodySecondary": { "value": "{color.shade.600.value}", "type": "color" }, "active": { "value": "{color.variables.accent.active.value}", "type": "color" }, "disabled": { "value": "{color.shade.400.value}", "type": "color" } } } } }

[six7]

Before the update all aliases were resolved, so SD would never see the alias. Putting .value at the end didn't work before. However, in SD that should totally work - Figma Tokens itself has no support (yet) for specifying .value at the end.

I'm thinking of allowing that to be done with an option in the export dialog, what do you think? "Resolve aliases".