Variables Expand Their Reach in Figma
Figma’s latest round of updates to its variables feature expands what can be bound to dynamic values, pushing the tool closer to a true bridge between design and code. Product manager Jacob Miller outlines what's shipping now, why the team favors an "atomic" approach over simpler theming systems, and what's next for typography and design token interoperability.
New Fields Open Up for Binding
Previously, variables could be bound to a limited set of properties such as fills, text, and corner radii. That list has now grown considerably, with support for:
- Effects: Bind variables to blur sizes, drop shadow colors, and offset distances, making effects reactive to different modes.
- Stroke weight: Manage distinct stroke weights for different platforms (e.g., desktop vs. mobile).
- Layer opacity: Right-click the opacity field to bind it to a variable for more nuanced control.
- Layout grids: Set up grids that adapt between modes, ensuring pixel-perfect alignment across devices.
- Individual corner radii: Recently introduced, this allows detailed control over each corner of an element.
- Nested instance variants: Apply variables to component instances that live inside other components, enabling more complex and customizable structures.
How Styles and Variables Work Together
These updates change the relationship between styles and variables. Effect and grid styles can now contain variables, making those styles reactive to modes and contexts. The intended division of labor: styles group multiple values, while variables hold single values that shift between modes.
A useful analogy from the Figma team: styles are like CSS classes, while variables are like CSS custom properties. Most workflows will combine them, using effect or layout styles with embedded variables to simplify the design process without sacrificing flexibility.
An Atomic Rationale for Variables
A common question is why Figma doesn't simply let styles have themes built in. The team argues that a style-based theming system, while easier to build, is less flexible for complex scenarios. The preference is for atomic tools—small, modular building blocks that can be combined—following the principles of atomic design.
Consider a header where the font size changes between desktop and mobile, but the font family changes between brands. A single theme axis on a style can't handle both independently. Binding variables to atomic properties inside a style allows multiple axes to change on their own, and keeps the system compatible with future features.
Typography Is the Next Frontier
Typography is the team's next major focus. Variable fonts, which store a continuous range of design variants in a single file, present both an opportunity and a challenge. Creators have already defined over 19,000 variable font axes in Figma, controlling traits from standard font weight to more exotic properties. Supporting that diversity while making font weight specification intuitive across different font families is a key goal.
Design Token Import and Export
Figma is approaching token interoperability on two tracks:
- Plugin ecosystem: The Plugin API already supports variables, letting third-party tools handle hundreds of output formats.
- Native interoperability: In the long term, Figma aims to support native design token exchange, aligned with the W3C community group's standardization work. A major unresolved piece involves how modes and themes are defined in their spec. Figma prefers to wait for an industry consensus rather than launching a competing standard and fragmenting the ecosystem.
These updates are still in open beta, and the team is incorporating user feedback to refine the experience toward a goal of automatic management of complex properties like typography, allowing designers to focus on the creative work itself.
