Quantum Design Docs
English (EN)
English (EN)
  • Introduction
  • Overview
    • Methodology definition
    • How to use Quantum Design
    • Tokens
  • Tokens layers
    • Global Tokens
    • System Tokens
  • Components
    • Atoms
    • Molecules
    • Organismos
    • Templates
  • Figma
    • Figma variables
    • Creating new components
  • Typography
    • Change typography
    • Scalability
    • Edit scale in Figma variables
Powered by GitBook
On this page
  1. Typography

Edit scale in Figma variables

PreviousScalability

Last updated 3 months ago

Currently, Figma doesn't have a function to automate this process, so it must be done manually, although it's very simple. You just need to open the variables panel, go to the System Tokens collection, find the Typography folder, and in the font-size category, you'll find the base and the scale system. These two are just informative. However, for the lower tokens, you will need to manually change the sizes, following the exercise explained earlier.

You only need to modify the values of the Alias (xxs, xs, sm, etc.). The definitions of body, title, subtitle, heading, and the rest will change automatically since they are configured in the Component Tokens collection. No changes will be needed in that part.

Line-Height

Just like with sizes, editing the line-height must be done manually from the variables panel. To do this, go to the System Tokens collection, find the Typography folder, and in the line-height category, you'll find the values you can edit. You only need to modify the values of the Alias (xxs, xs, sm, etc.). The rest of the values are configured in the Component Tokens collection, so no changes are needed there.