Style Dictionary Output References

[markacianfrani]

Looking at the docs for Style Dictionary's outputReferences support https://amzn.github.io/style-dictionary/#/version_3?id=output-references I noticed that their syntax is slightly different.

Given that I have a very basic typography style in Figma, the plugin outputs:

{
	"fontFamilies": {
		"sans": {
			"value": "sans",
			"type": "fontFamilies"
		}
	},
	"body": {
		"b1": {
			"fontFamily": {
				"value": "{fontFamilies.sans}"
			}
		}
	}
}

When ran through SD, using the basic config we get:

$font-families-sans: sans;
$body-b1-font-family: [object Object];

Their example shows you need to reference .value in your alias. So if we change our token.json to:

{
	"fontFamilies": {
		"sans": {
			"value": "sans",
			"type": "fontFamilies"
		}
	},
	"body": {
		"b1": {
			"fontFamily": {
				"value": "{fontFamilies.sans.value}"
			}
		}
	}
}

We get:

$font-families-sans: sans;
$body-b1-font-family: $font-families-sans;

if we set outputReferences to true.

Which is amazing.

Is this something the plugin should support out of the box? I'm not sure how others are using aliases because the first example doesn't work.

[six7]

I think what the plugin should do is treat .value at the end of a reference as a special case. As value is a reserved name in the W3C spec we could just check if the last part of a reference equals .value and if yes, then fetch the same way we do for fontFamilies.sans - fetch its value. We should do this at least for a Style Dictionary Export and add .value at the end of each token alias.

The W3C spec currently doesn't seem to follow what Style Dictionary does and define aliases the same way as Figma Tokens does - without the .value at the end.

[markacianfrani]

Good catch with the spec. I put in a PR on Style Dictionary itself to see if they'd be willing to make a change on their end. I feel like it's probably best to follow the spec in this case. Even though it's just a draft, I can't imagine that part changing.

[zetareticoli]

I have the same issue here with colors:

Adding .value to the end of reference breaks the color preview in the plugin:

But Style Dictionary works fine this ways:

$light-background: #fff;
$light-text: #111827;
$light-text-weak: #6b7280;
$light-text-light: #9ca3af;
$light-background-strong: #080b12;
$light-background-light: #f3f4f6;
$light-border: #e5e7eb;
$light-state-active: #c2410c;
$light-state-hover: #f97316;
$light-text-primary: #ea580c;

If I remove the .value I get [object Object] output instead.

Any update on this?

[zetareticoli]

+1

[six7]

We're waiting for a fix on Style Dictionary end for this as the W3C draft doesn't have the .value prop in the draft.

A PR seems to be coming 🙏

amzn/style-dictionary#746

[zetareticoli]

@six7 thanks for the update 🙏

[oleksify]

@six7 Style dictionary PR merged 🎉

[jakobe]

@six7 So I guess the fix in Style Dictionary (amzn/style-dictionary#746) with the optional .value suffix now allows the output of Figma Tokens to be directly transformed by Style Dictionary without appending the .valuesuffix to each alias beforehand.

Not sure if it should also work the other way around? I.e. being able to reference other tokens using {alias.value} in the plugin? As far as I can see the spec doesn't mention this:

For a design token to reference another, its value should be a string containing the period-separated (.) path to the token it's referencing enclosed in curly brackets.

When a tool needs the actual value of a token it must resolve the reference - i.e. lookup the token being referenced and fetch its value

If not, then this issue could be closed...

[six7]

Agree, I think we can close this one for now. If we'd decide in the future to allow aliases to not just reference the value but also description or other custom fields on a token then we'd need something like that, but for now we're good.