Building a Design System from Scratch: Do Figma Variables Really Replace Tokens?
When Figma introduced Variables, the design world went wild. We finally got native support for aliasing, dark and light modes, and an easier way to build design system architecture. But several months have passed, and that initial enthusiasm has somewhat cooled when faced with implementation realities.
What exactly are Variables?
Variables are a programmatic way to store values (colors, numbers, text). Instead of referencing a hex code like #FF0000, we refer to a variable such as "Color/Danger/500". This is a step towards Design Tokens – a methodology originating from the W3C.
Figma Variables are a powerful tool, but their true potential is only realized when combined with a sound engineering process.
Where does the Handoff problem lie?
Unfortunately, Figma is still primarily a drawing tool (even though it's slowly becoming a quasi-programming environment). When developers access the file, variables are often not directly mapped to their CSS/SCSS files in the code. There's a gap between "Primitive Variables" in Figma and the variable structure in environments like Tailwind or Styled Components.
The solution lies in using appropriate plugins (e.g., Tokens Studio) that can synchronize tokens directly to a GitHub repository via pull requests (JSON to CSS/Sass).
Golden Rules for Variable Structure
If you're building a Design System from scratch, remember the three-layer architecture:
- Core (Primitive) – Raw values. E.g., blue-500: #3B82F6.
- Semantic – Meaning in context. E.g., surface-brand, text-danger.
- Component – Component-specific. E.g., button-primary-bg-hover.
Applying this structure will save you during implementation. Variables in Figma are not a "magic wand," but a very sharp knife. Use it wisely.