How to Use Figma’s Variables with Dev Mode for Seamless Theming

Introduction: Tokens Meet Code

Imagine switching between light and dark mode—or even between brands—without rebuilding your designs or rewriting code. With Figma Variables and Dev Mode, that dream is now reality.

This article shows you how to bind your design tokens to components, preview theme changes instantly, and sync those styles with developers using Dev Mode. The result? Effortless theming and cleaner design-to-code handoff.

1. What Are Figma Variables?

Figma Variables are reusable values that define your design decisions, such as:

Color values
Font sizes
Spacing units
Radii and effects

These variables can be assigned to properties inside components and swapped by mode (e.g. Light/Dark, Brand A/Brand B).

2. Set Up Variables for Theming

Start by creating a Variables Collection in the right-hand panel.

Step-by-Step:

Click the Variables icon.
Create a new collection: “Base Theme”
Add variable categories:
- Color/Primary
- Color/Background
- Text/Heading
- Spacing/Medium, etc.
Add modes: Light, Dark, Brand A, Brand B
Input different values per mode

🌓 Example:
Color/Background

Light mode: #FFFFFF
Dark mode: #1A1A1A

3. Bind Variables to Your Components

Use your variables in your design components:

Background fills
Text colors
Padding values
Radius and effects

Now, these components are theme-aware—they change based on the active variable mode.

✅ Auto Layout + Variables = dynamic, responsive, and scalable components.

4. Preview Theme Modes Instantly

Click the active mode dropdown and switch between Light, Dark, Brand X, or Brand Y.

You’ll see:

Colors change in real time
Typography update across frames
Components adapt without duplication

🎯 Great for testing multiple visual systems in a single file.

5. Open Dev Mode: What Developers See

When Dev Mode is active, developers can:

See the name of each variable (e.g. Color/Primary)
Get the resolved value for the current mode (#FF5733)
View token names, not just hardcoded styles

This allows developers to:

Map tokens directly to their codebase
Swap values based on mode in CSS, iOS, Android, or tokens.json
Stay in sync with design decisions

🔌 Bonus: Tokens map 1:1 with systems like Style Dictionary, Tailwind, or Material Design Tokens.

6. Use Dev Mode to Communicate Themes Clearly

To make life easier for devs:

Group frames by theme: Light, Dark, Brand X
Label each frame clearly
Use sticky notes or badges: “Uses Color/Surface/Inverted”

Create a dedicated Dev Handoff Page with:

Token documentation
Screenshot comparisons
Notes on fallback logic

🧠 Example: “If Color/Accent is undefined in Brand Y, use Color/Primary as fallback.”

7. Plugin Power: Tokens Studio & Syncing to Code

Use plugins to extend the token workflow:

Tokens Studio: Import/export tokens as JSON, sync with codebases
Style Dictionary: Map Figma tokens to CSS variables, Android XML, etc.
GitHub Actions: Automate token export for CI/CD

💡 Advanced teams even write scripts to sync variable updates with live component libraries.

8. Common Use Cases for Variable-Based Theming

Use Case	Example
Light/Dark Mode	Swap background and text schemes
Multi-Brand Design	Different logos, colors, accents
Platform Styling	iOS vs Android vs Web
White-Label UI	Embed themes for external clients

🎯 The same component library can power multiple branded experiences.

9. Naming Conventions for Token Clarity

Keep token names clear and scalable:

✅ Color/Primary/Default
✅ Text/Body/Small
✅ Spacing/XL

Avoid:

❌ Blue-500
❌ Font14px
❌ PaddingBig

Consistency in naming = smoother Dev Mode output.

Conclusion: One System, Many Faces

Variables + Dev Mode = a theming powerhouse. Your designs become adaptive, your components future-proof, and your devs stay aligned every step of the way.

Whether you’re building a multi-brand product or simply switching between light and dark modes, Figma makes it seamless—with zero duplication and 100% clarity.

Next up: “How to Document Design Systems Inside Figma (Without Boring Anyone)” — where we explore live docs, embedded notes, and design literacy at scale.