Has Figma become a problem?
Why the most popular design tool is a dead end for development
Disclaimer: All thoughts are my own. Edited for clarity, consistency and accuracy using Claude3.7 Sonnet.
Once upon a time, the design software landscape was fragmented amongst a few minor players, all specializing in one thing well. For mockups, there was Sketch; for Prototyping, there was Principle; for inspecting design, the was Zeplin.
But then came a software that managed to aggregate all of those specialities into one, within a browser window. I’m talking of course, about Figma.
Since, then Figma has become ubiquitous with UX design, taking the crown from Sketch, fending off competitors from Adobe and InVision and then cornering the market by integrating even more features that matched Abstract, Mural and even Google Slides.
After shuttering xD, Adobe saw value in Figma and agreed to buy the company for $20 Billion in 2022, before the deal terminated over regulatory concerns in 2023.
It’s become unrecognizable since the early days, and as such, now costs a designer $144/yr and $35 for a Developer on an Enterprise plan.
But the value to a Developer raises questions. How valuable is it really?
The Design-Code Barrier
Each year, it seems like Figma unveils some interesting new features to bridge the gap between design and code. Yet, despite all that’s been done, design hits an inevitable dead end in Figma.
I can execute Discovery and collaboration sessions in FigJam. Then, I can spin up wireframes and mockups in Figma. I can then apply my design system and other variables to get to a near realistic prototype - but the buck stops there.
No matter how meticulously I engineer my file with reusable components, auto layouts or design tokens — the best an engineer will ever receive is a reference point to what needs to be built.
This means, despite all the Figma can do, its value as a handoff tool is only as good as the engineer picking up the work. If that engineer isn’t experienced on front-end, then your design won’t be built to spec, regardless of how neat your design file is.
From an engineer's perspective, there's a significant gap between referencing design specifications and being able to use the actual work product in the engineering process. Instead of leveraging what’s built in Figma, they must interpret design and manually recreate everything from scratch.
Figma acknowledges this limitation in their help docs, stating:
most of the code available involves only visual properties and spacing. No Javascript or other logic is exported.
https://www.figma.com/best-practices/tips-on-developer-handoff
So this begs the question. If Figma is just a communication tool, despite all that’s it does, is it really necessary in Design at all?
How we can build better
As we at Khaos are working to streamline our handoff process, we’ll continue to explore alternatives to make our design-to-code handoff as smooth as possible.
But as new text-to-code builders like Cursor and Tempo come to market - we’re experimenting with building our prototypes in code.
This allows us to hook up our APIs and an analytics platform like Amplitude - to capture more realistic user behavior from more realistic prototypes.
We are no longer hamstrung by having to develop ‘dumb’ prototypes in Figma, as we’re now able to rapidly generate personalized prototypes in a few hours.
We take it a step further by hosting our design system in Storybook.js, allowing us to use our production-level components in our prototypes.
If we ever want to adjust anything quickly for mockup purposes, we use a Figma Plug-in like Web-to-Figma to reimport our components, which we can then use to mockup some new designs.
But this is where we’re at currently. Figma is a mockup tool, that always ends without jump-starting production.
Until Figma figures out how to do it, it’s just the prettiest (and most expensive) mockup tool you can buy. But the clock is ticking as new front-end AI coders are rushing to market.