This workflow comes from designer Roberto Moreno Celta’s October 2025 write-up on Medium, “Figma to Production: The Variables Workflow That Actually Saves Time.” He describes rebuilding design systems three separate times, once without variables, once with variables set up badly, and once with a structure that actually held together, and lays out what changed between the failures and the one that worked. This is our take on why his approach works, not a step-by-step reproduction, his own write-up already does that better than we would.
The problem he’s solving
Figma variables are supposed to mean you change a color once and every component updates. In practice, Celta argues, most setups fail in one of a few predictable ways: teams build a huge collection of variable groups before they’ve designed a single real component, name variables in a way that means nothing to the developer who eventually has to translate them into code, or build a beautiful variable system in Figma that never actually gets synced anywhere, so developers just build their own version from scratch and the two drift apart immediately.
The shape of his fix
Two ideas do most of the work. First, a split between raw values and what they mean: one collection holds literal, unchanging colors, a second “semantic” collection maps those onto what they’re actually used for, and every component references the semantic layer, never the raw one, so a single remap repaints everything downstream. Second, naming variables the way a developer will write them in code rather than the way they read nicely in a design file, so the handoff from Figma to CSS needs no translation step and no room for a developer to quietly rename something into drift. From there it’s a matter of discipline: a small number of collections instead of an exhaustive one, modes used sparingly (light and dark, mostly, not one for every breakpoint and brand variant), a documented reference page as the source of truth, and a gradual, component-by-component migration rather than a single all-at-once conversion.
Getting the values out of Figma and into code is its own decision, and it scales with team size, from copying values into a CSS file by hand, to an export plugin generating JSON or CSS, to piping that through Style Dictionary in a CI pipeline for larger teams. He also covers adapting the approach for a no-code target like Webflow, which has no native Figma-variable import.
Celta walks through all of this in full, collection by collection with real naming examples, in his original piece, worth reading start to finish if you’re actually setting this up: Figma to Production: The Variables Workflow That Actually Saves Time.
Why it matters for designers
The appeal here isn’t variables themselves, Figma has had them for a while, it’s the workflow around them that Celta says most teams skip. A design system where a single color change takes ten seconds in Figma and a couple of minutes to reach production is a fundamentally different working relationship with your developers than one where the same change means manually chasing down every instance across a dozen files and hoping nothing gets missed. If your team already has variables set up but still doesn’t trust them, the naming-convention and semantic-layer split described here is probably the more useful part to borrow, even without redoing everything else.
What to watch out for
This is one designer’s account of what worked for him across his own projects, not an independently verified benchmark, and the specific time-savings figures he cites are his own estimates from his own work, not a controlled comparison. The export step also isn’t a solved, standardized process: which plugin you use, and whether your team has the engineering setup to run something like Style Dictionary in CI, will shape how smooth this actually is in practice far more than the Figma side does. And a naming convention only pays off if developers agree to honor it, if they rename things their own way downstream, the sync breaks just as fast as it would without variables at all.
