Last updated
Was this helpful?
Last updated
Was this helpful?
Text Decoration Tokens define the position of an optional line as an individual property to be composed within a . It is not intended to be applied to text elements directly.
Text Decoration defines an optional line as a part of font styling properties, typically used to communicate the visual emphasis of text.
When we apply a Typography Composite Token to a text layer in Figma, these Text Decoration values will change the text:
By default - no lines are added to the text - null
The text appears as typed with no decoration added.
A line below the text - underline
It commonly indicates interactive text elements, like links.
A line in the middle of the text - strike-through
It commonly indicates information that is no longer accurate, like a to-do item that has been completed.
The syntax used to write string values for Design Tokens is important, so be sure to write your Text Decoration Token value with all lowercase letters and ensure there are no spaces.
The Text Decoration Token has a few specific values depending on your needs.
null
Most of the time, text will appear as typed; the Text Decoration Value will be:
underline
To create a line at the bottom of the text, enter the Text Decoration Value as:
strike-through
To create a line through the centre of the text, enter the Text Decoration Value as:
Not supported by Figma
There are additional text-decoration properties commonly used in CSS that are not supported in Figma.
Overline
Line-above
Using the Tokens Studio plugin, you can still create a Text Decoration Token with these values.
When you apply them to design elements in Figma, the Token will be present and visible to engineers inspecting the design element in Figma, but the Token won't interact with the Text decoration property in Figma's UI.
When trying to reference another Token as the Value for a Text Decoration Token, you will see Tokens in the dropdown list that are:
Living in Token Sets that are currently active.
In the left menu on the plugin's Tokens page, a checkmark is visible next to the Token Set name.
Token Type is compatible:
The same = textDecoration
Text Decoration is not yet an official Token type in the W3C Design Token Community Group specifications.
Tokens Studio has added Text Decoration as an uofficial Token type in anticipation it will be added to the W3C specs in the near future.
This property in Figma matches CSS, so there is no specific transform for Text Decoration.
Running the SD-Transforms pre-processor as part of the generic package will prep your Text Decoration Tokens for Style Dictionary.
However, Text Decoration, as part of Typography Composite Tokens, requires the SD-Transforms option to expand composite Tokens into multiple Tokens.
Mentioned in this doc:
Style Dictionary - https://styledictionary.com/
None yet!
None yet
None
In , this property is also called text-decoration.
→
SD-Transforms -
Design Tokens Community Group -
Design Tokens Community Group -
Design in Figma -
MDN Web Docs -
Tokens Studio Plugin GitHub -
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.
💡 Something to share?
🐞 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
However, like all Token Types, you can "force" a reference by manually entering the Token Name between curly brackets.
For example {token.name.here}
Jump to the guide on Token Values with References by selecting the card below to learn more.
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.
→
💌 Visit to contribute or subscribe to updates.