Figma variables on the free plan: what works without modes
On Figma's free Starter plan you can create variables, aliases and scopes, but not a second mode or a shared library. What works, the workarounds, and when to upgrade.
Yes, you can use Figma variables on the free Starter plan. You can create collections, color, number, string and boolean variables, aliases and scopes, and apply them to your designs. What you can't do on Starter is add a second mode to a collection, so there's no native Light and Dark switch, and you can't publish variables to a team library for other files. Both need Professional or above.
That's the short version, and it's what trips up most people following a dark mode tutorial. Below is the exact plan breakdown, three workarounds that hold up, and how to tell when upgrading is worth it.
What Figma's free plan includes for variables
Everything here comes from Figma's help center, checked October 25, 2026.
| Feature | Starter (free) | Professional | Organization | Enterprise |
|---|---|---|---|---|
| Create and edit variables | Yes | Yes | Yes | Yes |
| Aliases, scopes, code syntax | Yes | Yes | Yes | Yes |
| Modes per collection | One (no extra modes) | Up to 10 | Up to 20 | Unlimited with extended collections |
| Publish variables in a library | No | Yes | Yes | Yes |
| REST API for variables | No | No | No | Yes |
| Files | 3 design files, 1 folder | Unlimited | Unlimited | Unlimited |
Sources: Create and manage variables (variables on any plan), Modes for variables (modes on Education, Professional, Organization and Enterprise), Figma plans and features (mode limits, libraries, API, files) and the Starter plan overview.
The Professional limit used to be lower. Figma raised it to 10 modes per collection, and Organization to 20, after its Schema 2025 conference (Figma blog).
Can you use variable modes for free?
Not on Starter. Figma's modes article lists who can create and use modes, and Starter isn't on the list; the plans table leaves the Starter cell empty. Every collection on Starter has exactly one column of values.
Figma's Education plan is on the modes list, so students and educators who qualify get modes without a Professional seat.
This also affects plugins. Several design system generators note it on their listings: Semantix says dark mode on colors needs Professional or higher, and the Radix UI + ShadCN Variable Generator says you need a paid or education team plan for it to work. Foundation Studio, by contrast, added support for free Figma accounts in December 2025. If you're on Starter, read a generator's listing before you run it.
Workaround 1: build the structure now, add Dark later
The cleanest option. Set up variables exactly as you would on a paid plan, minus the second column:
- A
Primitivescollection with your full palette. - A
Semanticcollection whose variables (background/default,text/primary,action/primary) each alias a primitive. - Bind every layer to semantic variables only.
When the team upgrades, you open the Semantic collection, add a mode, rename it Dark and re-point the aliases. Nothing in your screens needs rebinding. Our variable modes setup guide covers that step.
Good for: most people. You lose nothing now and save the most work later.
Workaround 2: a second collection for dark values
If you need dark screens on Starter today:
- Duplicate your
Semanticcollection and name itSemantic Dark. Keep the variable names identical. - Re-point each alias in
Semantic Darkto the dark-theme primitive. - Duplicate the frames you want in dark, select a duplicated frame, and open Selection colors in the sidebar. Each variable used inside the frame is listed once; click one, and the Libraries picker lets you swap it for its
Semantic Darktwin (Figma).
It works, but every dark frame is a copy. Change a light screen and you have to change its twin by hand. Keep the number of dark frames small: a few key screens for review, not the whole product.
Workaround 3: color styles in pairs
Color styles work on every plan (Figma). Some teams keep Light/Background and Dark/Background as pairs of styles and swap them the same way, through Selection colors. It's the same trade-off as Workaround 2, with one extra cost: styles can't alias each other, so the palette is copied rather than referenced. I'd only do this in a file that's already built on styles.
What doesn't work on Starter
- Switching a frame's mode with Apply variable mode. There's only one mode to apply.
- Sharing variables across files. Starter has no team libraries; you can create components, styles and variables, but you can't publish them for other files. That keeps the design system and the screens in the same file.
- Variables in prototype logic. Figma's plans table lists variables, expressions and conditional logic in prototypes for paid plans only.
- More than three design files. The plans table limits Starter to one folder and three files.
When is upgrading worth it?
Upgrade when one of these becomes a weekly cost:
- You keep two copies of screens to show dark mode, and they drift.
- You want the system in its own library file and the product screens elsewhere.
- You've hit the three-file limit.
- A developer needs Dev Mode, which Starter doesn't include.
Figma's pricing page showed a Professional full seat at $16 a month on October 25, 2026; check monthly versus annual billing there. If only the designer edits the system, one full seat is often enough.
Where Huekit fits
Huekit is our plugin. Our plugin writes color scales into variables, adds a semantic layer that has Light and Dark modes, and creates foundations. Because the Dark column is a mode, it depends on your Figma plan as described above. We haven't published a separate guide to running Huekit on Starter yet, so if that's your setup, try it on a blank file first. See huekit.io for what each Huekit plan includes.
FAQ
Are Figma variables free?
Yes. Every plan, including the free Starter plan, can create and edit variables, aliases and scopes.
Does Starter include modes?
No. Modes are available on Education, Professional, Organization and Enterprise plans. Starter collections have a single mode.
How many modes do I get on Figma Professional?
Ten per collection. Organization raises that to 20, and Enterprise is unlimited with extended collections.
How do I do dark mode in Figma for free?
Build single-mode variables now and add a Dark mode after upgrading, or keep a duplicated Semantic Dark collection and swap colors on copies of key frames through Selection colors. Neither is as clean as modes.
Can I share variables between files on Starter?
No. Starter has no team libraries, so variables stay in the file where you created them.
Next step
If you're on Starter, set up the two collections from Workaround 1 today, bind one screen to the semantic layer, and leave the Dark column for later. It's the one choice here you won't need to undo.
About the author
Written by the Huekit team.
Want the fast path?
Huekit builds the color scales, semantic tokens, and Light/Dark modes inside your Figma file, then exports JSON tokens or a Tailwind config.
Get Huekit on FigmaKeep reading
Accessible color palette for light and dark mode in Figma
Build an accessible color palette that meets WCAG AA in light and dark mode: the contrast ratios, the color pairs to test, and the Figma tools that check or adjust them.
Catppuccin, Dracula and Tokyo Night in Figma: turn an editor theme into variables
Map Catppuccin, Dracula, Tokyo Night or One Dark onto Figma variables with Light and Dark modes: which flavor goes where, which roles to create, and which pairs fail contrast.
How to export Figma variables to Tailwind (v4 @theme or v3 config)
Three ways to export Figma variables to Tailwind: native JSON export plus a build step, an export plugin, or a generator with export built in. With v4 CSS for light and dark.