Design Tokens

In Flex, a design token is a semantic variable that points to a primitive variable. For example, bg/primary in Semantic / Theme points to a colour in Primitive / Colour.

Using tokens instead of raw values has three benefits:

• Several tokens can point to the same primitive.
• Changing a primitive updates every token that points to it.
• A token can point to a different primitive in each mode, so one design can switch theme or breakpoint without being rebuilt.

Modes let a token hold a different value depending on context. Apply a mode to a frame and every token inside it switches to the value for that mode.

Each collection in Flex has its own modes, and they work independently. A single frame can be Large, Dark and German at the same time.

Controls colours, corner radius, font families and font weights.

Modes:

• Light
• Dark

Controls responsive behaviour, such as padding, font size, content width and grid layout changing between mobile and desktop.

Modes:

• Small
• Medium
• Large

The collection also includes variant/breakpoint, a string variable that switches breakpoint-specific component variants automatically. See How to create responsive components in Figma for a walkthrough.

Controls text that needs translating.

Modes:

• English
• Portuguese
• German
• French