Claire Vo · 2 min read · Gen AI Tools
From Figma to Claude Code and back | Gui Seiz & Alex Kern (Figma)
Read the original on lennysnewsletter.com →
Gui Seiz and Alex Kern from Figma demonstrate a bidirectional, AI-powered workflow that bridges design and code in real time by pulling production code into Figma with the MCP and pushing changes back with Claude Code. This approach replaces linear handoffs with a loop where design and code inform each other, including exporting multiple production code states into Figma for designers to work with live assets. They also discuss how AI shifts work upstream to planning and downstream to craft, and how to automate checks and structure codebases to maximize AI-generated code.
Key Takeaways
- Use Figma's MCP to pull production code into Figma for accurate, up-to-date design work.
- Push design changes back into code using Claude Code to reduce manual CSS tweaks.
- Export multiple production code states into Figma so designers can iterate on live states.
- AI shifts design work upstream to planning and downstream to craft, reducing rushed execution.
- Create custom AI skills to automate pre-flight checks, lint fixes, and CI monitoring, and structure codebases to enable AI to write most of the code.
Excerpt
Most teams are still passing static design files back and forth, and most Figma files are already out of date by the time they reach engineering. Gui Seiz (designer) and Alex Kern (engineer) from Figma walk through the exact workflow their team uses to bridge that gap with AI, live onscreen. They demo how to pull a running web app directly into Figma using the Figma MCP, edit it collaboratively, and push it back to code. The old linear waterfall workflow is gone. What replaces it is a fluid, bidirectional loop where design and code inform each other in real…