Not that long ago, I wrote about the painful reality of keeping Sketch symbols and production systems aligned. The core problem wasn’t Sketch. It was the expectation that design files could act as a perfectly synchronized mirror of a living, evolving product.
Fast forward to today, and most teams have moved to Figma. The tooling is better. Collaboration is better. Variables, components, and shared libraries are far more powerful.
And yet the core problem hasn’t gone away.
We’re still trying to keep two systems in sync:
- A design system in Figma
- A production system in code
And we’re still pretending that’s sustainable.
It’s not.
The Illusion of a “Single Source of Truth”
Figma components feel like a source of truth. With variants, variables, and design tokens, it’s easy to believe your design system lives there.
But your actual product doesn’t run on Figma.
Your real system lives in code:
- Javascript components
- CSS tokens
- Accessibility logic
- State handling
- Edge cases that never make it into design files
Figma is, at best, a representation of that system. Once you accept that, things get clearer. You don’t have one source of truth. You have two systems that need to stay aligned. And alignment is where things break down.
Why Syncing Still Fails (Even in Figma)
Even with modern workflows, syncing design and code is still fragile:
- Designers update components without engineering context
- Engineers implement edge cases that never make it back to Figma
- Variants grow into unmanageable complexity
- Documentation drifts or becomes outdated
The result is familiar:
- Small mismatches everywhere
- Designers stop trusting the code
- Engineers stop trusting the designs
- Teams waste time reconciling differences
Figma didn’t create this problem. It just made it easier to scale it.
Enter AI: A New Layer, Not a Silver Bullet
Now we’re seeing a new shift. Teams are using AI to help bridge the gap between design and code.
Designers and engineers are starting to use AI to:
- Generate components from Figma designs
- Translate design tokens into code
- Audit inconsistencies across systems
- Suggest missing states or accessibility improvements
- Generate documentation
In theory, this reduces the manual overhead of keeping things in sync.
In practice, it just changes how the problem shows up.
The Upside of AI in Design Systems
AI can reduce the “sync tax” in meaningful ways.
Faster translation between design and code. Instead of recreating components manually, AI can scaffold them based on design intent.
Better coverage of edge cases. AI can surface states designers often miss, like loading, error, or empty states.
Automated audits. Tools can flag inconsistencies between Figma tokens and code variables.
Living documentation. AI can help generate documentation that stays up to date and is easier to maintain.
For teams with strong systems thinking, this becomes a multiplier.
The Downside (And It’s Real)
There are real risks to relying too heavily on AI.
False confidence. Generated output can look correct while missing important details like accessibility or structure.
Loss of intent. Good systems require clear decisions. AI can obscure why something exists. Just becase you are faster or more “efficient” doesn’t mean you solved a meaningful problem.
Over-reliance on design files. If AI treats Figma as the source of truth, it reinforces the original problem.
Harder debugging. When systems are partially generated, ownership and troubleshooting become less clear.
Inconsistent workflows. Teams experiment with different tools and approaches, which can lead to fragmentation.
AI doesn’t remove the need for systems thinking. It makes it more important.
So What Should We Do Instead?
The answer hasn’t really changed, but the approach should.
1. Treat Code as the Source of Truth
Your production system is the system that matters.
Figma should reflect it, not define it.
That means:
- Design tokens originate in code or a shared system
- Components are documented from implementation
- Designers reference real components whenever possible
2. Use Figma as a Modeling Tool, Not a Mirror
Figma is great for:
- Exploring ideas
- Communicating intent
- Stress-testing patterns
It is not great at:
- Capturing every state
- Representing complex logic
- Staying perfectly in sync
Don’t force it to do everything.
3. Let AI Assist, Not Decide
Use AI where it’s strong:
- Generating boilerplate
- Auditing inconsistencies
- Suggesting improvements
Keep humans responsible for:
- System architecture
- Naming and structure
- Accessibility decisions
- Product nuance
AI should reduce manual work, not replace thinking.
4. Define Clear System Boundaries
Instead of trying to sync everything, define boundaries:
- What lives in Figma
- What lives in code
- What gets documented where
- What gets automated
Clarity beats completeness.
5. Accept Drift and Manage It
Perfect sync is a myth.
Instead of chasing it:
- Audit regularly
- Fix what matters
- Ignore what doesn’t
Your system doesn’t need to be perfectly aligned. It needs to be reliably usable.
The Real Shift
The biggest change isn’t Sketch to Figma. It’s the move from manual to assisted workflows.
We’re moving from: “Keep everything in sync by hand” to:“Use tools, including AI, to manage the gap intelligently”
But the core principle still stands.
If keeping your design system in sync feels like a full-time job, you’re probably solving the wrong problem. Focus less on perfect alignment and more on building systems that can tolerate imperfection without breaking.
