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.
In CSS, this is known as the Text and Font Styling properties, which are defined individually.
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 Family defines the typeface.
It must be written as a string value that exactly matches how Figma has it written in their UI.
It acts as a 'pair' with Font Weight due to Figma's unique approach to text styling.
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.
Font Size defines the height of the glyphs/characters of a typeface.
It should be written as a numeric value with a unit of measurement in either pixels or rem.
Font Size impacts the Line Height and Letter Spacing values.
Line Height defines the vertical distance of each line of text related to its font size.
It should be written as a numeric value with a percentage to support responsive design in Figma.
Values without a percentage unit will be assumed as a fixed value in pixels.
Letter Spacing defines the horizontal distance between each glyph/character related to its font size.
It should be written as a numeric value with a percentage to support responsive design in Figma.
Values without a percentage unit will be assumed as a fixed value in pixels.
Paragraph Spacing defines the vertical distance between 2 paragraphs of text
It should be written as a numeric value with a unit of measurement in either pixels or rem.
Values without a unit will be assumed as a fixed value in pixels.
Paragraph Indent defines an offset of the first word of every paragraph.
It should be written as a numeric value with a unit of measurement in either pixels or rem.
Values without a unit will be assumed as a fixed value in pixels.
Text Decoration defines the position of an optional line in a string of text.
It should be written as the string value that matches the intended property.
Text Case defines a transformation to the capitalization of letters in a string of text.
It should be written as the string value that matches the intended property.
Like all Composite Tokens, you may reference an existing Token as the value for each individual property as described above ↑.
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.
💌 Create a free account to upvote on the feature request for this here and we will notify you when we start working on it.
Typography Tokens can be Exported to Figma as Text Styles. Tokens Studio also supports Styles with Variable References.
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.
typography is an official token type in the W3C Design Token Community Group specifications.(9.7 Typography )
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).
→ SD-Transforms Read Me Doc, ts/typography/compose/shorthand
Each property defined within the Typography Token has individual SD-Transform configurations to be aware of, which can all be found on the Read Me page on Github.
Mentioned in this doc:
SD-Transforms - Read Me
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group - W3C Draft
Design Tokens Community Group - 9.7 Typography
Design in Figma - Explore Text Properties
MDN Web Docs - Text Styling Fundamentals
Nate Baldwin's Typography + Dimension scale tool - Proportio.app
Import Typography Styles from Figma into Tokens Studio - Video Tutorial by Sam I am Designs
Tokens Studio Plugin GitHub - Open issues for Token Type Typography Composite
Enhanced Typography Support - Feature Request
Expand Token Types - Feature Request
Support Multiple Token Types per Layer - Feature Request
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.
Once a Token has been applied, it will remain attached until you manually remove it.
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.
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.
→
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.
🐞 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.
💡 Something to share?
