How to Use Color Variables in Figma: Simple Guide

In Figma, you create a color variable by defining a named color in the Variables panel. Then, you apply this variable to any shape or text fill by selecting the variable from the color picker, ensuring consistent colors across your design that update automatically when changed.

Syntax

In Figma, a color variable is created and used through the Variables panel. The syntax is simple:

• Define Variable: Name your color variable and assign a color value.
• Apply Variable: Select an object, open the fill color picker, and choose the variable from the Variables tab.

This links the object's color to the variable, so changes to the variable update all linked objects.

text

1. Open the Variables panel in Figma.
2. Click '+' to create a new color variable.
3. Name the variable (e.g., 'Primary Blue').
4. Pick a color (e.g., #0055FF).
5. Select a shape or text.
6. In Fill, click the color swatch.
7. Switch to the Variables tab.
8. Choose 'Primary Blue' to apply.

Example

This example shows how to create a color variable called Primary Red and apply it to a rectangle's fill color.

text

1. Open Variables panel.
2. Click '+' and select 'Color'.
3. Name it 'Primary Red'.
4. Set color to #FF0000.
5. Draw a rectangle on the canvas.
6. Select the rectangle.
7. In Fill, click color swatch.
8. Go to Variables tab.
9. Select 'Primary Red'.

// Now the rectangle fill uses the color variable 'Primary Red'.
// Changing 'Primary Red' updates the rectangle color automatically.

Output

A rectangle filled with bright red (#FF0000) that updates color automatically if 'Primary Red' variable changes.

Common Pitfalls

• Not using Variables tab: Applying colors directly from the default color picker means no link to variables, so colors won't update globally.
• Variable naming confusion: Use clear, descriptive names to avoid mixing up variables.
• Forgetting to update variables: Changing a color in the design without updating the variable breaks consistency.

text

Wrong way:
- Select shape fill color and pick a hex code directly.

Right way:
- Select shape fill color.
- Switch to Variables tab.
- Pick the named color variable.

Quick Reference

Action	Steps
Create Color Variable	Open Variables panel > '+' > Color > Name > Pick color
Apply Color Variable	Select object > Fill > Color picker > Variables tab > Choose variable
Update Color Variable	Variables panel > Select variable > Change color > All linked objects update
Remove Variable from Object	Select object > Fill > Color picker > Switch to default colors > Choose new color

Key Takeaways

Create color variables in the Variables panel to keep colors consistent.

Apply color variables via the Variables tab in the fill color picker.

Changing a color variable updates all objects using it automatically.

Avoid applying colors directly without variables to maintain design consistency.

Use clear names for variables to prevent confusion.