What's a variable, anyway?

In code, a variable is a name that points to a value — and that value can change. You write primaryColor = "#3B82F6" once, use it in fifty places, and when you need to update it, you change it in one spot. That's it. That's the whole concept.

Figma borrowed this idea. Since their update earlier this year, designers can create, define, and reuse values across their entire design file — not just for text styles like before, but for colours, numbers, strings, and booleans. If you want to understand the difference between styles and variables, Figma's own article explains it well. The short version: variables hold a single value, styles hold multiple.

I've been using variables almost exclusively since they launched. Some designers argue they're not a total replacement for styles, and technically that's true. But for our team's workflow, I haven't needed styles the way I used to. Variables just fit better with how our devs already work, and that's made communication between design and development noticeably smoother.

What we've been doing with them

Honestly, we've gone a bit overboard. In the best way. Here's what variables have changed for us:

Translations without touching the design. We set up string variables for different languages, and now someone who isn't a designer can update the text in Figma directly. In Switzerland we deal with up to four languages on a project, so this is a massive time saver.

Theme switching with one click. Light mode, dark mode — once the variables are set up in the system, you just toggle. No duplicating frames, no manually swapping hex codes.

Responsive design across devices. We use number variables to build designs that adapt to different screen sizes. It's not perfect yet (more on that in a second), but it's already faster than doing it manually.

Colour scoping. You can scope which colours appear where — specific colours for text, others for strokes, others for frames and borders. Keeps things clean and prevents the "why is the heading colour being used as a border?" problem.

Code syntax naming for devs. This one's underrated. In the variable settings there's a "code syntax" option where you define what the variable is called in actual code. So our developers see the exact naming convention they need when they open Dev Mode. No translation layer, no guessing.

Dev Mode itself. We've been loving Dev Mode. Developers can see the correct CSS properties and code syntax directly from Figma — no more external spreadsheets for tracking colours or sizing. Figma has basically become the source of truth for our entire team. Prototypes, designs, translations, variable definitions — it's all in one place.

Replacing styles with variables. We've been steadily moving our styles over to variables. It's more comprehensive, more aligned with how code actually works, and just easier to organise.

What's still missing

Two things that bug us:

No font size variables. You can't switch font sizes with variables yet. So even if you make a design responsive and toggle between device modes, the typography won't adjust. Figma has said font variables are coming, but they're not here yet.

The three-column limit. You can't add more than three columns of variables unless you upgrade to the enterprise plan at $75 per user per month. For a small team, that's steep. We get that Figma needs to monetise, but this particular limitation feels like it hits exactly the teams who'd benefit most.

How to set up variables

The process is the same regardless of variable type — colours, numbers, strings, or booleans:

Go to Design → Local variables → Create variable and pick your type. Give it a name, enter the value (or use the colour picker for colour variables), and you're done. Use the more options menu on the right side of the value column if you need to edit scoping or code syntax. Organise your variables into groups using the shift key to keep things manageable as the list grows.

The real work isn't in creating individual variables — it's in planning your naming conventions and group structure before you start. Get that right and everything downstream gets easier. Get it wrong and you end up with a tangled mess that's harder to maintain than what you had before.

What we're excited about for 2024

Two things on our radar:

The improvements coming to FigJam AI look promising for brainstorming and early-stage ideation. And Config 2024 — Figma's annual conference — is where they typically announce the big feature drops. We're hoping font variables make the cut.

Why we care about this stuff

We're a team of startup-oriented techies, and our thing is making the gap between design and development as small as possible. That's why tools like Figma variables matter to us — they're not just a design feature, they're a communication bridge.

We offer CTO as a Service: everything from design to implementation, with a direct line of contact via Discord and regular sprint calls. The product team you see in our content is the same team that'll help you build a well-researched product for your users — not just an interim solution that costs thousands. It shouldn't take you more than six minutes to know whether it's the right fit. Check out our offering here.

Don‘t sleep on Figma variables in 2024!

Latest blogs