GoKawiilI tried Claude Design yesterday and I have a theory for how this whole thing shakes out.
As product teams scaled and design needed to justify itself inside engineering orgs, it was pushed toward systematization — and Figma invented its own primitives to make that work: components, styles, variables, props, and so on. Some concepts are borrowed from programming, some aren’t, and the whole thing doesn’t neatly map onto anything. Guidance evolves, migrations pile up, and if you want to automate any of it you’re stuck with a handful of shoddy plugins. The beast is hairy enough that entire design roles now specialize in wrangling the system itself.
There’s always been a tense push-pull between Figma and code over what the source of truth should be. Figma won over Sketch partially by staking its claim there — their tooling would be canonical.
That victory had a hidden cost. By nature of having a locked-down, largely-undocumented format that’s painful to work with programmatically, Figma accidentally excluded themselves from the training data that would have made them relevant in the agentic era. LLMs were trained on code, not Figma primitives, so models never learned them. As code becomes easier for designers to write and agents keep improving, the source of truth will naturally migrate back to code. And all the baroque infrastructure Figma had to introduce over the past decade will look nuts by comparison. Why fuss around in a lossy approximation of the thing when you can work directly in the medium where it will actually live? If we want to make pottery, why are we painting watercolors of the pot instead of just throwing the clay?
At work, we’ve spent quite a bit of time back-porting design changes made directly in code back to Figma and it is not fun. I can’t share that file, but for a fair comparison, this is Figma’s own design system file for their product. I have to assume it was built by the most competent design system team you can find. And yet…
The Figma variables panel showing 946 color variables organized into nested groups like "bg/desktopBackgrounded," with a single selected variable revealing eight mode-specific values: Light, Dark, FigJam-Light, FigJam-Dark, DevMode-Light, DevMode-Dark, Slides-Light, and Slides-Dark.
A modal footer component open to its variant property editor, showing 12 variants with a dropdown full of values like "DS Library Swap," "QA Plugin," "Growth Stepper," and "Sharing Actions." The right panel lists eight props like "Border," "Second CTA," and "Helper Text"
The effect styles panel for a slider component, showing a style named "light/elevation-300-tooltip." Expanding it reveals its entire definition: a 0.5px drop shadow at 30% black. It has its own named style because that’s the only way to document what CSS variable it corresponds to.
A combo input component with 16 variants. Its children in the layers panel are named things like "Default, Default, Close Button=False" and "Default, Focused, Close Button=True"
These are Figma’s own files. Built by their own team. This is the gold standard.
... continue reading