How I AI | Episode Summary

Podcast: How I AI
Host: Claire Vo
Episode: From Figma to Claude Code and back | Gui Seiz & Alex Kern (Figma)
Date: March 11, 2026

Episode Overview

This episode explores how AI-driven tools are dramatically transforming the workflows between design and engineering teams, particularly through newly integrated processes involving Figma, Claude Code, and Codex. Gui Seiz (designer) and Alex Kern (engineer) from Figma join host Claire Vo to demonstrate, in practical detail, the emerging paradigms of "code to design and back," where design and code are no longer isolated artifacts but live, fluid, and collaborative substrates. They also share hands-on tips for minimizing toil through automation and custom skills, offering listeners a clear view into cutting-edge team practices.

Key Discussion Points & Insights

1. Reimagining Design-Engineering Workflows

Timestamp: 00:00–06:40

• The Old Way: Traditionally, workflows were linear; design and engineering were protected “scarce” resources.
• With AI: The boundary is blurred—iterating in code or design is now equally fast and inexpensive.
• Increased Exploration: Teams can now explore more ideas rapidly, not just go deep on one.
• Collaboration: Both disciplines contribute more flexibly, as AI eliminates or reduces the "mechanistic" work on both sides.

"AI basically collapsed that and it's just as cheap to riff in code as it is to riff in design... We find ourselves reinventing a workflow almost every day." – Gui Seiz [04:04]

2. From Code to Design: Syncing Artifacts with Figma & AI

Timestamp: 07:27–13:46

• Demo: Taking a web app’s code base and programmatically importing UI components/states into Figma frames using the Figma MCP (Multi-Channel Pipeline) with Codex.
• Solves: The age-old problem of design files drifting from what’s live in production.
• Benefit: Once in Figma, designers can edit visually and collaboratively—even those less comfortable in code.
• AI’s Role: MCP mediates between code and Figma, eliminating tedious manual updates.

"What we just saw is taking a locally hosted web app and code base and using the Figma MCP to pull the whole design of a page...into Figma into a frame... Figma is really built for multiplayer collaboration in a way that prompting code in something like Codex... isn't built for." – Claire Vo [11:41]_

3. From Design to Code: AI-Driven Reverse Handoffs

Timestamp: 14:32–19:11

• Reverse Flow: Designers can edit in Figma and instruct MCP to apply those changes back to the app’s codebase, automatically reconciling differences.
• Developer Impact: Engineers like Alex now spend less time toggling between code and browser, as changes propagate smoothly.
• AI Agents: Custom instructions ("skills") can manage much of the build/push/test process for a developer.

"Now you can actually see that the app has been updated and it looks exactly like what the Figma design looked like, but has been applied entirely within code." – Alex Kern [21:37]

4. Abundance in Design & Engineering Craft

Timestamp: 19:11–21:37

• Decadent Moment: AI automates busywork, enabling deeper focus on planning, ideation, and polish.
• Abundant Mindset: More features and polish make the “cut;” even long-deferred tweaks are now feasible.
• Creative Freedom: Designers and engineers indulge more in exploratory phases, fueling creativity.

"We're in this really... decadent moment... now we're kind of actually at this point where more of the priorities can make it above the cut line. And also we can spend a lot more time in the planning stage." – Gui Seiz [19:11]

5. Bidirectional Workflows: Pair Programming for Designers & Engineers

Timestamp: 22:54–28:00

• From Code → Figma → Code: Demo of importing five signup flow states from code to Figma, so design collaborators can edit in bulk.
• Synchronous vs. Asynchronous: New tools facilitate both, but the synchronous energy of "riffing" together (like seeing cursors fly in Figma) fosters momentum and creativity.
• No More "Final_v4" Files: AI helps dissolve versioning headaches and design toil.

"Momentum begets momentum. And so having the team together riffing and, yes, anding and trying this stuff out is really great." – Gui Seiz [27:09]

6. Reducing Toil through Skills: Automation for Engineers (and Designers!)

Timestamp: 28:00–34:07

• Custom Skills: Alex writes reusable “skills” (macros/instructions) to automate monotonous steps—e.g., a SHIP skill wraps up preflight checks, CI processes, fixes, and pushes.
• From Wiki SOPs to Code: Teams should convert onboarding docs/checklists into skills the whole team can invoke.
• Broader Impacts: Eliminates friction, reduces errors, and frees up headspace for higher-order creative work.

"Every engineering org... has a wiki... with this is what you do before you push a PR... Every team should go through their onboarding wiki... and make it a skill, push it in your repo, let everybody benefit.” – Claire Vo [33:02]

7. Creative Learning and Up-Skilling with AI

Timestamp: 35:37–36:58

• Learning Platform: AI unlocks self-education—Gui learns shaders in plain English, Alex uncovers codebase history/lore with queries.
• Open Source Exploration: AI enables deep dives into new or existing codebases, democratizing technical learning.

"I hope that people see the educational and upskilling aspect of it and not just outsourcing any potential capability... Anything you wanted to get a little bit deeper on, you can now do it without having to trawl through links.” – Gui Seiz [35:37]

8. Prompting Tactics (When AI Misbehaves)

Timestamp: 38:09–38:59

• Alex: Admits swearing in prompts works; or invoking a "my boss is mad at me" scenario to get better AI results.
• Gui: Takes the “gentle parenting” route—polite, positive prompting out of fear (and respect!) for the coming AI overlords.

Notable Quotes & Moments (with Timestamps)

• "AI basically collapsed that and it's just as cheap to riff in code as it is to riff in design." – Gui Seiz [04:04]
• "Momentum begets momentum. And so having the team together riffing and yes, anding and trying this stuff out is really great." – Gui Seiz [00:00]
• "Programmatically pulled it into Figma... used our beautiful fine-tuned opposable thumbs... then pulled in by an engineer... and now it can be deployed pixel perfect. Everybody's happy." – Claire Vo [21:51]
• "I have a skill for creating more skills…” – Alex Kern [29:24]
• "Every engineering org should go through their onboarding wiki and... make it a skill and then let everybody benefit." – Claire Vo [33:02]
• "It's really, you know, Figma is really built for multi person collaboration... that broad exploration is very, very hard [elsewhere]." – Claire Vo [11:41]
• "I only yell at you because it works. Look, I don't want to yell at you, but sometimes it's the only thing that you guys listen to." – Claire Vo [38:34]

Important Demonstrations & Segments

• [07:53–13:46] – Demonstrating code-to-Figma workflow with MCP/Codex.
• [14:32–19:11] – Figma back-to-code workflow; real-time updates and automation.
• [22:54–25:23] – Importing multiple UI states from codebase to Figma for collaborative design.
• [29:24–34:07] – Automating engineering workflows with custom "skills" (macros).

Closing Thoughts

This episode demonstrates the leading edge of AI-driven workflows for product teams. Whether you start in code, in design, or somewhere in between, the new generation of tools collapses the boundaries, reduces toil, and powers a new era of abundance for creativity and craft. By sharing practical demos and firsthand insights, Gui Seiz and Alex Kern offer a roadmap for teams looking to integrate design and engineering more fluidly—and make the most of AI’s potential for productivity, quality, and learning.

Where to Find the Guests

• Alex Kern: X (@kurnio)
• Gui Seiz: @guiseid (various social platforms)

For more episodes and resources: howiaipod.com