What Figma Needs to Build
The six features missing from design-to-code sync
Last month I wrote about the inverted workflow problem. AI generates functional UIs in minutes now. Developers ship working prototypes before designers open Figma. The tools haven’t caught up.
That piece diagnosed the problem. This one names the solution.
Here’s what Figma isn’t doing. And what they should build.
1. No code-to-Figma import
You cannot take a React component and bring it into Figma. Full stop.
Developers build UIs every day in shadcn, Radix, Material. Designers cannot pull those into Figma to refine them. They screenshot the interface and rebuild it manually. Rectangle by rectangle.
HTML-to-Design plugins exist on Figma’s platform. They’re hacks. They shouldn’t need to exist. Importing working code into editable design files should be core functionality.
2. No native component library imports
shadcn has 50+ production-ready components. Tables with sorting. Pagination. Modals. Toast notifications. Form validation. Loading states. Error handling.
So does Radix. So does Material. So does Chakra.
Developers run npm install and get working components in minutes. Designers open Figma and get a blank canvas. Designers rebuild every one of those patterns from scratch.
Same components. Same behaviors. Built twice. Never quite synced.
Figma should let you pick your framework and give you the matching Figma components. They don’t.
3. Code Connect is display-only
Code Connect shows code snippets inside Figma. That’s it. It’s documentation, not sync.
It doesn’t generate code. It doesn’t update when code changes. It doesn’t let you push Figma changes back to the codebase. It’s a one-way viewer pretending to be a bridge.
The name promises connection. The feature delivers a screenshot.
4. No Git integration for tokens
Figma Variables exist. Design tokens exist in code. They don’t talk to each other.
You export manually. You import manually. When someone changes a color in Figma, developers don’t know. When someone changes a token in code, designers don’t know.
Tokens Studio, a third-party plugin, solves this. It syncs Variables to Git repositories with branch support and conflict resolution. Figma should own this natively. They don’t.
This is the easiest win on the list. The infrastructure exists. The format exists (W3C Design Tokens). Just build the pipe!
5. No parameter-level export
Designer wants the sidebar 320px instead of 280px. They export a mockup and write a comment: “Can you make this 320 instead of 280?”
Developer reads the comment. Opens the code. Finds the variable. Changes it manually.
This is absurd.
The designer should export a diff: --sidebar-width: 280px → 320px. Or a Tailwind class change: w-[280px] → w-[320px]. Or a prop update. Something a developer can apply directly.
Figma exports images and comments. Not changes.
6. No framework awareness
Figma doesn’t know what shadcn is. It doesn’t know that a designer’s “Select” component maps to @radix-ui/react-select in the codebase.
Dev Mode shows CSS. It should show the actual component and props the team uses. If a team picked shadcn, Figma should speak shadcn.
The design system and the code system should be the same system. Right now they’re parallel universes that drift apart constantly.
The Short List
Figma needs to:
Import components from code
Ship native Figma kits for major frameworks
Make Code Connect bidirectional
Build native Git sync for Variables
Export design changes as code diffs
Understand which component framework a team uses
None of this exists today.
Why It Matters Now
AI collapsed build time. Getting to a working interface used to take days. Now it takes minutes. The bottleneck moved.
The new bottleneck is the design-code gap itself. Every sync is manual. Every change requires translation. The design system lives in two places that never quite match.
Figma won by understanding developers. They built a design tool on flexbox logic and CSS concepts. That was the right bet for 2015-2023.
The next bet is bidirectional flow. Design to code. Code to design. One system, not two. If Figma is a slow public dinosaur now, then this is the feature for an upstart to make to be the next better Figma.
The infrastructure is there. Variables API. Code Connect. Dev Mode. The pieces exist. What’s missing is the commitment to connect them.
Teams are already duct-taping together Storybook, Figma, and custom scripts to solve this themselves. When teams build their own solutions to a universal problem, that’s a signal the platform should own it.
Figma has the market position. They have the developer trust. They have the foundation. Whats the problem?
This is looking backward. Not forward. If Figma wanted to catchup to the market this list makes sense. You can’t leapfrog the market with this list.