Last updated
Was this helpful?
Last updated
Was this helpful?
Style text elements by composing many typography-related design decisions together into a single Typography Token.
Each of the nine design decisions (font size, letter spacing, etc.) that is part of the Composite Token is referred to as a property of the Typography Token in out guides.
Typography Tokens define a group of properties used to style text elements.
Typography Tokens can be applied to text layers to define all styling decisions in a single token.
Each property composed to style text elements can be defined as it's own Token and referenced within the Typography Composite Token:
Font family
Font weight
Font size
Line height
Letter spacing
Paragraph indent
Paragraph spacing
Text decoration
Text case
Like all Composite Tokens, you define the value of each property individually. When you create the Typography Token in the plugin, you can reference each Token you've already created as a property or enter a hard-coded value.
The dedicated Token Type of each property within the Typography Composite Token has unique specifications, described in detail in their own guides.
Font Weight defines the thickness and styling of the characters of a typeface.
It can be written as a unitless number, or a string value that exactly matches how Figma has written it their UI for the particular typeface.
It acts as a 'pair' with Font Family due to Figma's unique approach to text styling.
If you'd prefer to reference an existing Typography Composite Token as the value instead of defining each Property, select the Token's Reference mode button (2x2 circle icon).
When trying to reference another Token as the Value for a Typography 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:
typography
Typography Tokens define all 9 styling properties of text when the Token is applied.
With one or more text layers selected in Figma, click on the name of a Typography Token in the Plugin to instantly apply its value.
Keep in mind, Tokens can only be applied to the entire layer. In the case of Typography, you might want to apply a Token to a particular word within the text layer, but that is not possible today due to limitations of the Figma plugin API.
Here are some tips for creating Text Styles with Variable References using the Plugin.
When you Export to Figma, select these Options from the menu:
Typography Styles is selected.
Number and String Variables are selected.
Create styles with variable references is selected.
Ensure your Export to Figma as Themes or Sets configuration includes all necessary Tokens.
Themes and token sets where the referenced Tokens are located are active.
Themes and token sets where the variables are attached may need to be configured as reference only.
You'll notice these Variables are created on Export based on their Token Type:
fontFamily (will create as string variable)
fontWeight (will create either as string or number variable, depending on if they are a string or a number)
letterSpacing (number variable)
lineHeight (number variable)
paragraphSpacing (number variable)
paragraphIndent (number variable)
You'll notice the Text Style will be created on Export, with all possible values mapped to the appropriate Variables, based on the Token Type for each property.
Known issue with Font Weight as Figma doesn't allow changing a Variable Type after its been created.
Figma doesn't allow the changing of a Variable type, so by deleting that single Variable in Figma, when you export the Typography Token as a Style with Variable References, the Plugin will create the variable with the new Token Type.
However, Tokens Studio has approached Typography Tokens differently than how it is defined in the current spec draft. We support:
Additional text properties not defined in the spec.
Dedicated Token Types for each text property.
We've made these adjustments in the plugin to align with Figma's unique approach to Typography.
When transforming Typography Tokens, which are a Composite Token with several adaptations to accommodate Figma's unique approach to Text Styling, there are specific configurations to be aware of.
Composite Tokens require the SD-Transforms option to expand composite Tokens into multiple Tokens.
If you are working in Android Compose, there is an optional transform to convert typography objects into Android Compose shorthand (platform option).
Mentioned in this doc:
, this is known as the Text and Font Styling properties, which are defined individually.
Like all Composite Tokens, you may reference an existing Token as the value for each individual property .
💌 Create a free account to upvote on the and we will notify you when we start working on it.
Typography Tokens can be . Tokens Studio also supports .
If you are converting your between numeric and string values and you've already exported to Figma as a Style with Variable References, you may need to delete the Variable from the Figma collection.
typography is an official token type in the W3C Design Token Community Group specifications.()
Each property defined within the Typography Token has individual SD-Transform configurations to be aware of, which can all be found on the
SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Design in Figma -
MDN Web Docs -
Nate Baldwin's Typography + Dimension scale tool -
Import Typography Styles from Figma into Tokens Studio -
Marco Krenn's
Tokens Studio Plugin GitHub -
Enhanced Typography Support -
Expand Token Types -
Support Multiple Token Types per Layer -
Once a Token has been applied, it will remain attached until you manually remove it.
💡 Something to share?
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.
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.
🐞 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.
Jump to the guide on Exporting Tokens to Figma 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.
→
