Gideon AwolesiWhat Figma variables are
Figma variables live in collections, and each collection can have modes, like light and dark, or compact and comfortable. A variable stores one value for each mode. Figma supports six types: colour, number, string, boolean, and, more recently, timing and easing for motion.
How many modes you get depends on your plan. Since October 2025, Professional has allowed up to 10 modes per collection, Organization up to 20, and Enterprise unlimited, while the free Starter plan has none.
What design tokens are
A design token is a design decision written down in a format that isn't tied to any one tool. The W3C Design Tokens Community Group published the first stable version of its format, 2025.10, on 28 October 2025. It's a community group report, not a W3C standard, but it's the format a lot of tools now read and write.
So the difference is this: variables are Figma's own way of storing decisions, and tokens are how you move those decisions out of Figma and into code.
Where they line up, and where they don't
Two Figma features help a lot here. Scoping lets you say where a variable can be used, so a spacing variable only shows up for gaps and padding, not for font size. Code syntax lets you store the name a developer uses on each platform, for web, iOS, and Android, so Dev Mode shows the right name next to the value.
What doesn't line up is mostly types and units. A Figma number variable can be a spacing value, an opacity, or a font weight, while a token format wants to know which it is. So decide on the type of every variable when you create it, and name it so the type is obvious.
Getting variables out of Figma
Since late 2025, you can import and export variable modes as JSON files from inside Figma. The import expects the DTCG 2025.10 format. Some people have reported that export drops descriptions, so check the output before you rely on it.
If you need to automate it, the Variables REST API still requires a Full seat in an Enterprise organisation. On other plans, the export is a manual step, so make it part of your release checklist.
Which one is your source of truth?
There's no right answer for every team, but there has to be one answer for yours. If designers change the system more often than developers, keep the source in Figma and export on every release. If you ship to several platforms and already have a token build step, keep the source in code and import into Figma.
Either way, write the decision down, and give one person the job of keeping both sides in step. When nobody owns that job, the file and the code drift apart, and you're back to fixing it by hand.