12.1 Figma Variables Panel Structure
In the Figma Variables panel, you should see the following collections. Each collection has specific modes and a defined scope:
Figma Variables Panel layout
▶ Primitives / Color [Default]
▶ Primitives / Spacing [Default]
▶ Primitives / Typography [Default]
▶ Primitives / Radius [Default]
──────────────────────────────────────
▶ Brand Palette [Brand-A | Brand-B]
▶ Semantic / Color [Light | Dark]
▶ Semantic / Typography [Default]
──────────────────────────────────────
▶ Color / Active [neutral | brand | info | success | warning | danger | contrast]
▶ Button / Size [sm | md | lg]
▶ Button / Structure [Default]
▶ Toggle / Size [sm | md]
▶ Toggle / Structure [Default]
▶ Checkbox / Size [sm | md | lg]
▶ Checkbox / Structure [Default]
... (one row per component)12.2 Setting Up a Component
Follow these steps every time you create a new component in Figma:
1
Bind dimensional tokens to Size collection
Select the layer, go to Auto Layout, click the value → choose variable from
Select the layer, go to Auto Layout, click the value → choose variable from
{Component}/Size. Repeat for height, padding, font-size.
2
Bind structural colors to Structure collection
For fills that don't change with color family (disabled bg, checkmark white), bind to
For fills that don't change with color family (disabled bg, checkmark white), bind to
{Component}/Structure.
3
Bind family colors to Color / Active
For fills that change when the user switches color (track when checked, button bg), bind to
For fills that change when the user switches color (track when checked, button bg), bind to
Color/Active → color, Color/Active → container, etc.
4
Apply Typography Text Style
Select text layer → apply the matching Typography style (e.g.,
Select text layer → apply the matching Typography style (e.g.,
Button / Label). The style internally references Size tokens, so sizing is automatic.
5
Set up states as Variant Properties
Add a Variant Property called
Add a Variant Property called
State with values: default, hover, pressed, focused, disabled. Do not make Color or Size variant properties.
6
Test by switching collection modes
In the canvas, select the component instance. In the right panel under "Layer", look for the collection name and switch its mode. Verify that colors update correctly.
In the canvas, select the component instance. In the right panel under "Layer", look for the collection name and switch its mode. Verify that colors update correctly.
12.3 Variants vs Modes — What Goes Where?
| Property | Figma Variant? | Figma Mode? | Why |
|---|---|---|---|
State (hover, pressed…) | ✓ YES | – | State changes the visual "recipe" (shows different layers) |
Type (primary, outline…) | ✓ YES | – | Type changes the structural visual recipe (different fills applied) |
Color (brand, danger…) | ✗ NO | ✓ Color/Active mode | Color changes token values, not the structure of the component |
Size (sm, md, lg) | ✗ NO | ✓ Component Size mode | Size changes token values (dimensions), not structure |
Theme (light, dark) | ✗ NO | ✓ Semantic/Color mode | Theme changes all semantic color values simultaneously |
Brand (Brand-A, B) | ✗ NO | ✓ Brand Palette mode | Brand changes which primitives are used across the board |
12.4 Button Mode Switching Example
| What changes | Bound to | Collection | Controlled by |
|---|---|---|---|
| Dimensions | button-height, etc. | Button / Size | Size mode (sm/md/lg) |
| Fill color | color role | Color / Active | Color mode (brand/danger/…) |
| Light ↔ Dark | brand-color, etc. | Semantic / Color | Theme mode (Light/Dark) |
| Brand switch | brand-base, etc. | Brand Palette | Brand mode (Brand-A/B) |
12.5 Mode Inheritance in Frames
Setting a mode on a frame applies it to all children unless overridden. Use this deliberately:
Page-level theming: Set Semantic/Color to Dark on the root frame → the entire screen goes dark. No need to touch individual components.
Component-level override: To make one button "danger" in an otherwise "brand" screen, select only that button instance and override its Color/Active mode to "danger". The parent mode keeps applying to all other children.