How do you use Figma variables, styles, and modes?
Distinguish reusable values, combined styles, and contextual values, then map them to web rules.
In Figma, variables store reusable values, styles store groups of presentation properties, and modes store different values for different contexts. Distinguishing them helps designs follow shared rules.
Keep these basics in mind
- A variable is a named value such as background colour or spacing. A collection organises related variables.
- A style combines properties, such as typeface, size, and line height for body text.
- A mode distinguishes contexts within a collection, such as light and dark. An alias refers to another variable.
- Variables and styles can work together; using a newer feature does not require deleting all existing styles.
See Figma’s overview of variables, collections, and modes and its explanation of variables versus styles .
Establish design-file mappings
Illustrative resource mappings
These are hypothetical design resources.
| What to record | Example organisation | Check |
|---|---|---|
| Primary text colour | Purpose variable | Clear in light and dark contexts? |
| Body typography | Text style | Suitable typeface, line height, and wrapping? |
| Gaps between parts | Number variable | Suitable with longer content? |
Walk through an example
The team gives primary text and background variables light and dark values. Body styles continue to record typeface and line height. Switching themes prompts checks of body text, error guidance, and borders. They then map the purposes to web tokens rather than copying values from one screenshot.
Limits and common misunderstandings
Representing changes in a design tool does not implement browser behaviour. Confirm mode limits and supported features in the actual environment. Variables and styles express rules; they are not the entire design system.