Variable references in typography & enhanced tokens previews

This version was released on November 29, 2024.

We’re happy to announce a series of improvements to design tokens!

Preserve variable references in typography tokens

We’re taking another step toward complete design data synchronization. When importing typography styles from Figma, variable references are now preserved, ensuring your tokens remain fully themeable and eliminating the need for manual fixes or workarounds.

Variable references in typography tokens

Apply themes to typography tokens

Now you can effortlessly document how your typography styles adapt across various brands and modes. Apply selected themes and seamlessly display or export typography tokens in any theme with precision.

Apply theme to typography tokens

Enhancements to design token previews in exported documentation

We're thrilled to introduce a series of improvements that make your design tokens shine even brighter in your exported documentation. Here's what's new:

 

Border width tokens: Previews now visually display the width of the border, providing a clear and precise representation.

border-thin
border-thick

 

Border tokens: Previews render a variety of border styles, including dashed, dotted, and groove.

border-solid
border-dashed
border-dotted
border-groove

 

Border radius tokens: Previews now display their curves correctly, ensuring a smooth and accurate preview.

radius-medium
radius-large

 

Opacity tokens: Previews now include a swatch that visually shows the token’s transparency level.

overlayStrong
disabled

 

Font size tokens: Previews now reflect the size of the text visually, ensuring what you see is what you get.

Ag
small
Ag
medium
Ag
large

 

Font family tokens: Previews now visually represent the typefaces, bringing your typography choices to life.

Ag
inter
Ag
tinos

 

Text decoration tokens: Previews now visually match the token values for decorations like underline and strikethrough.

Hello
none
Hello
underline
Hello
strikethrough

 

Font weight/style tokens: Previews now accurately display different font weights and styles for clear differentiation.

regular
bold
bold-italic

 

Text case tokens: Previews now visually reflect the applied text transformations, such as uppercase and lowercase.

Hello world
none
Hello world
uppercase
Hello world
lowercase
Hello world
capitalize
Hello world
smallcaps

 

Letter spacing tokens: Previews now apply letter spacing, making it easier to evaluate spacing at a glance.

Hello
small
Hello
large

 

Typography token previews now include text decorations and display correct line heights.

Ag
headline-underlined
Ag
headline-strikethrough

For a list of smaller improvements and bug fixes, visit our Bug fixes page here: