Theming in Figma with Variables

Background

Recently, Figma introduced amazing features as part of its latest release. I wanted to try the "variables" and explore their capabilities. To gain hands-on experience I decided to redesign an older project using these new variables.

How to create a variables in Figma?

Creating a Variable is just as intuitive as defining a new Style:

1. From the Variables Library: Open the Variables panel in the left sidebar, click + New variable, choose Color, Number, Boolean, or String, then name it and pick a value.

2. From a Fill (or Stroke): Select any layer, click the Fill color swatch, switch from a solid color to Variable, and either pick an existing token or create a new one in place.

Both approaches feel seamless, fitting right into your typical styling workflow.

Step 1: Establish Your Base Palette

I started by laying out my original screens with the standard color palette I intended to use:

• Background Color (bg)

• Card Background (card-bg)

• Primary Text (text-primary)

• Secondary Text (text-secondary)

Every color was tied to a Variable. That way, I could reference and adjust each element globally without hunting through layers.

Step 2: Spin Up a Secondary Theme

Once the base theme was tokenized, I duplicated my canvas to create a dark‑mode prototype.

Then, in the Variables panel, I copied the original mode and renamed it Dark Theme. By swapping the color values, e.g. bg: #121212, text-primary: #E0E0E0 I instantly switched the look of every linked element across both screens.

Step 3: Build Your Variable Library

To turn this experiment into a reusable system:

1. Open the Variables panel and click Publish library.

2. Name the library (e.g. “Project Tokens”) and share it with your team.

3. In any new file, go to Assets → Libraries, toggle on “Project Tokens,” and your Variables are ready to go.

Publishing ensures that every designer works from the same source of truth and any updates flow through automatically.

Testing and Iteration

With both themes defined and published, toggling between them was instant. I could:

• Preview contrast and hierarchy in dark vs. light modes.

• Update a single Variable (say, primary-accent) and see it ripple across headers, buttons, and icons.

• Iterate on new color ideas without redrawing or manually replacing swatches.

Conclusion

Figma Variables have reshaped my design workflow. By assigning tokens early, I gained:

• Speed: One change updates every instance.

• Consistency: No more mismatched shades.

• Scalability: New themes or palettes slot in immediately.

If you haven’t yet explored Variables, especially for theming, give it a try on your next project. You’ll spend less time chasing pixels and more time shaping meaningful experiences.

Happy designing!