Last updated
Was this helpful?
Last updated
Was this helpful?
The Composition Token is a Token Type we initially introduced to support design decisions that are typically composed of multiple parts, like typography, shadows and borders.
Since then, a lot has changed.
The Design Tokens Community Group (DTCG) hosts a token specification on the W3C community group pages for web standards. Although it's in draft form, the tools and technologies working with Design Tokens are trying to align with the W3C DTCG specification.
The W3C DTCG specification defines each of these composite design decisions as their own Token Type instead of a generic composition Token Type.
→
You might have noticed Tokens Studio is aligning to the W3C DTCG spec by introducing as many of the same Token Types as reasonable and feasible.
We now support typography, border, and boxShadow as independent Composite Token Types.
We know some of you love the idea of Composition Tokens as a way to have a single token which captures the values of as many design decisions as possible applied to a component. In fact, many of you have requested features to push this idea even further.
While this doesn't align with the direction of the W3C DTCG spec for a Token Type, it could be an interesting feature the Tokens Studio team could work on in the future.
The Composition Token allows you to combine multiple design decisions into a single Token.
When you apply a Design Token to a design element in Figma, the properties are applied to a single layer.
This means that if you try to apply a single Composition Token to a component, like a button, it will only apply the styling properties to the layer it's applied to: the container, the text, or the icons.
It is not possible to define a single Token (of any Type) for all children layers within a design element.
It's important to note that if you use the Composition Token Type, any individual property Tokens defined in the value that are attached to Styles or Variables in Figma will not show in the Figma UI as Styles or Variables.
We suggest replacing your Composition Tokens over time with the independently defined Token Types included in the W3C DTCG specifications.
There are numerous challenges with transforming these tokens so they are usable in code.
We have several bugs and known issues open specific to this token type.
When transforming Composition Tokens, which are not an official Token Type, the SD-Transforms package has to do a lot of heavy lifting to split out the individual 'Property Tokens' with it so they are usable in code.
Composite Tokens require the SD-Transforms option to expand composite Tokens into multiple Tokens.
Make sure you look at the generic SD-Transforms package to include this option, which allows you to further customize this transformation further using Style Dictionary.
Mentioned in this doc:
The problems related to transforming this token type have been described as "untenable to work with" by Joren Broekema, the lead engineer maintaining Style Dictionary,
→
→
SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Request to remove/deprecate Composition Tokens -
Tokens Studio Plugin GitHub -
Composition Tokens On Text Don't Theme Switch After Closing and Reopening the Plugin
Blank composition properties causing the fill property to not be applied to Figma layer
Deprecate Composition Tokens and replace with a 'template' feature.
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
💌 Visit to contribute or subscribe to updates.
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.