Skip to main content
Original: Lenny Rachitsky · 11/03/2026

​
Summary

Gui Seiz and Alex Kern from Figma discuss how AI transforms design workflows, enabling real-time collaboration between design and code.

​
Key Insights

“The old linear waterfall workflow is gone.” — Discussing the shift in design and engineering processes.
“AI has shifted design work upstream to planning and downstream to craft.” — Explaining the impact of AI on the design workflow.
“How to structure your codebase so AI can write 90% of your code more effectively.” — Highlighting the benefits of AI in code generation.

​
Topics

​
Full Article

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 time.Listen or watch on YouTube, Spotify, or Apple PodcastsWhat youll learn:How to use Figmas MCP to pull production code directly into Figma filesA workflow for pushing design changes from Figma back into your codebase using Claude Code without manual CSS adjustmentsHow to export multiple code states (like all five states of a signup flow) into Figma so designers can work with what actually exists in productionWhy AI has shifted design work upstream to planning and downstream to craft, eliminating the rushed middle phase of executionHow to create custom skills that automate pre-flight checks, lint fixes, and CI monitoring before pushing code to productionHow to structure your codebase so AI can write 90% of your code more effectivelyBrought to you by:OptimizelyYour AI agent orchestration platform for marketing and digital teamsIn this episode, we cover:(00:00) Introduction to Gui and Alex from Figma(02:56) How AI has transformed Figmas internal workflows(05:17) The collapse of linear design-to-code workflows(07:28) Demo: Pulling production code into Figma using MCPs(10:49) Using Figma for precise design manipulation and team collaboration(14:10) Demo: Pushing Figma designs back into code with Claude Code(16:06) How AI has changed the role of software engineers(18:43) The shift to upstream planning and downstream craft(22:31) Demo: Exporting multiple code states back into Figma(25:23) Synchronous vs. asynchronous collaboration with AI(28:00) Eliminating design and engineering toil with AI(29:03) Demo: Custom skills for automating pre-flight checks(34:06) Code first or design first?(35:24) Using AI to learn and explore codebasesTools referenced: Figma: https://www.figma.com/ From Claude Code to Figma: Turning production code into editable Figma designs: https://www.figma.com/blog/introducing-claude-code-to-figma/ Codex: https://codex.ai/ Claude Code: https://claude.ai/code Buildkite: https://buildkite.com/Other references: Balsamiq: https://balsamiq.com/Where to find Gui Seiz:X: https://x.com/guiseizLinkedIn: https://www.linkedin.com/in/guiseiz/Where to find Alex Kern:X: https://x.com/kernioLinkedIn: https://www.linkedin.com/in/alexanderskern/Where to find Claire Vo:ChatPRD: https://www.chatprd.ai/Website: https://clairevo.com/LinkedIn: https://www.linkedin.com/in/clairevo/X: https://x.com/clairevoProduction and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email jordan@penname.co.

🎙️ This week on How I AI: From Figma to Claude Code and back & From journalist to iOS developer

Lenny Rachitsky · how-to · 86% similar

“I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype

Lenny Rachitsky · how-to · 83% similar

🎙️ This week on How I AI: How Notion’s design team uses Claude Code to design

Lenny Rachitsky · how-to · 81% similar
Originally published at https://www.lennysnewsletter.com/p/from-figma-to-claude-code-and-back.