Why It Matters
Bridging the gap between design and code with AI tools eliminates stale source‑of‑truth issues and speeds up iteration, which is critical for teams competing on speed and innovation. By democratizing access to code‑level precision for designers and reducing boilerplate work for engineers, organizations can allocate more effort to solving real problems and delivering better user experiences.
Key Takeaways
- •AI merges design and code for instant iteration.
- •Figma MCP syncs code states directly into design files.
- •Teams collaborate live, cutting mechanistic engineering tasks dramatically.
- •Multimodal AI translates visual layouts to functional code accurately.
- •Workflow shifts from linear to flexible, boosting exploration capacity.
Pulse Analysis
In this episode, Claire Vo hosts Alex and Gui from Figma to showcase how AI is collapsing the traditional divide between design and engineering. By leveraging Figma’s Multimodal Connector Platform (MCP) and Claude‑powered code agents, teams can generate functional wireframes directly from code and push design states back into the repository. This bidirectional flow eliminates the costly hand‑off phase, allowing designers to prototype in the same environment engineers use, and vice‑versa. The conversation highlights how the cost of high‑fidelity output has plummeted, turning what used to be a linear, waterfall‑style process into a rapid, iterative loop.
The core demonstration centers on the MCP’s ability to import five distinct UI states from a live codebase into a Figma frame, where designers can manipulate components with familiar drag‑and‑drop tools. This real‑time sync not only preserves visual fidelity but also enables multi‑person collaboration that traditional code editors lack. Engineers benefit by offloading repetitive tasks—such as aligning pixels or defining hover states—to the AI, freeing them to focus on problem‑solving and architecture. Meanwhile, designers gain immediate access to production‑ready components, reducing the need for manual spec translation and accelerating feedback cycles.
Beyond the technical showcase, the hosts discuss the strategic impact on product development. With AI handling the mechanistic glue, teams can spend more time in the planning and ideation phases, exploring a wider range of solutions before committing resources. This shift encourages a more flexible workflow, where the decision to start with design or code is context‑driven rather than prescriptive. For businesses, the result is faster time‑to‑market, lower engineering overhead, and a culture that empowers both designers and developers to contribute throughout the product lifecycle.
Episode Description
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.
What you’ll learn:
How to use Figma’s MCP to pull production code directly into Figma files
A workflow for pushing design changes from Figma back into your codebase using Claude Code without manual CSS adjustments
How to export multiple code states (like all five states of a signup flow) into Figma so designers can work with what actually exists in production
Why AI has shifted design work upstream to planning and downstream to craft, eliminating the rushed middle phase of execution
How to create custom skills that automate pre-flight checks, lint fixes, and CI monitoring before pushing code to production
How to structure your codebase so AI can write 90% of your code more effectively
—
Brought to you by:
Optimizely—Your AI agent orchestration platform for marketing and digital teams
—
In this episode, we cover:
(00:00) Introduction to Gui and Alex from Figma
(02:56) How AI has transformed Figma’s 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 codebases
—
Tools 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/guiseiz
LinkedIn: https://www.linkedin.com/in/guiseiz/
—
Where to find Alex Kern:
X: https://x.com/kernio
LinkedIn: 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/clairevo
—
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email jordan@penname.co.
Comments
Want to join the conversation?
Loading comments...