Aakash GuptaDesigning With AI With Designers of Figma & Codex
CHAPTERS
Designing with AI is shifting fast: roles, speed, and new expectations
Aakash frames the episode around the accelerating debate of “design in code vs design in canvas,” introducing Ed Bayes (OpenAI Codex) and Gui Seiz (Figma AI). The guests set the context: AI is pushing teams to move faster, changing what designers can ship and how orgs operate.
- •Overton window shift: teams moved from AI-curious to AI-dependent rapidly
- •Design acceleration vs dev acceleration creates new bottlenecks
- •Designer/engineer boundaries are blurring as tools get more capable
- •Episode promise: a practical, tool-to-tool workflow and roadmap for teams
Code vs canvas: why it’s a false dichotomy
Gui and Ed argue that “code vs canvas” is the wrong framing—both are tools for different stages of thinking. Canvas excels at rapid lateral exploration; code excels at making ideas real, interactive, and testable quickly.
- •Canvas is best for quick riffing and broad exploration
- •Code is powerful for depth, realism, and interaction testing
- •Design is a toolkit problem: pick the right medium for the job
- •AI expands the toolset and lowers the cost of switching mediums
When to start in code vs start in canvas (and how to weave between them)
They outline practical decision criteria: the right starting point depends on the problem type, desired fidelity, and collaboration needs. The workflow becomes nonlinear—teams weave between Figma and code instead of a one-way handoff.
- •Historic low→high fidelity workflows were driven by tool constraints and cost
- •Start in code for functional wireframes and interaction-heavy exploration
- •Start in canvas for wide exploration, flows, and collaborative review/commenting
- •Use Figma for pixel perfection, systems, tokens, and detailed craft work
- •Expect iterative back-and-forth rather than “Figma then code”
Live demo setup: Codex desktop app as a design tool
Ed opens Codex (desktop app) and explains how it connects to a local project/repo, enabling fast experimentation. He uses an example UI component (“composer system”) already specced in Figma, then built in code to test real interactions.
- •Codex can open any local folder/repo and start iterating immediately
- •Example: dynamic composer UI states (permissions, plan mode, morphing buttons)
- •Why code first here: interaction feel, tap targets, layout behavior in reality
- •Design and implementation converge when designers can work directly in the codebase
Figma MCP deep dive: importing code/UI into Figma with high fidelity
Ed demonstrates sending UI from the running code experience into Figma via Figma MCP integration. Gui adds that you can import entire screens or select specific nodes/components to avoid unnecessary background/layout elements.
- •Codex can invoke Figma tooling (plugin/MCP) to snapshot/import UI into Figma
- •Supports selecting specific components or whole screens
- •Creates a new Figma file with responsive, editable layers
- •One-to-one fidelity: padding, radius, shadows, and layout properties carry over
Round-trip workflow: edit in Figma, push changes back into code
After importing into Figma, Ed tweaks design details (e.g., labels/colors) and copies a link to the Figma selection. He pastes that link into Codex to update the code—illustrating a two-way, low-friction loop for designer–engineer collaboration.
- •Designers can iterate visually in Figma without breaking the code workflow
- •Copy link to Figma selection and instruct Codex to apply changes to code
- •Enables collaboration even when a designer isn’t comfortable hand-editing code
- •Reduces traditional handoff friction and speeds up polish and iteration
Fidelity limits and “lossiness”: what still breaks and how it improves
They discuss where translation still fails: advanced web effects, shaders, and some transitions don’t map cleanly onto a static canvas. They highlight workarounds (annotations) and the trajectory: models and tooling are steadily improving, especially when aligned to a design system.
- •Some effects don’t translate: shaders, complex transitions, certain web-only behaviors
- •Annotations can communicate intent through MCP even when visuals can’t fully transfer
- •Reliability improves as models improve (e.g., newer models better at tool use)
- •Foundations matter: naming, structure, and system alignment increase success rates
Design systems as the bridge: tokens, libraries, and aligned sources of truth
Gui explains how newer Figma tooling aims to reference your actual design library during import, not just create a visual facsimile. This enables shared truth across Storybook/GitHub/Figma and reduces component drift with AI-assisted diffing/loops.
- •Goal: imported designs should map to real tokens and local styles
- •Move from “snapshot copy” to “design-system-native representation”
- •AI can help detect diffs across Storybook, code, and Figma to reduce drift
- •Interoperability makes the “start in code vs canvas” question less important
Behind the scenes: how AI changed building at OpenAI and Figma
Ed shares how Codex designers are developer-forward, with many spending most time coding, and how dogfooding hit a capability threshold that increased shipping velocity. Gui describes a similar internal shift at Figma: designers increasingly prototype, work in staging, and revisit previously deprioritized ideas because execution is cheaper.
- •OpenAI: designers code heavily; less handoff, more direct shipping and prototyping
- •Capability threshold (during dogfooding) increased PR volume and speed
- •Figma: broader adoption beyond technical teams; “permission to build” spreads
- •Lower cost of shipping revives old “P2” ideas and enables more zero-to-one work
Roadmap for traditional teams: how to adopt the new workflow safely
Aakash asks for step-by-step guidance for regulated/traditional orgs without full tool access. The advice: start small, build comfort outside work if needed, and use AI as an on-ramp—without immediately jumping to shipping to main in high-compliance environments.
- •Start by experimenting personally if procurement/access is slow
- •Try different entry points: terminal, app, IDE extension depending on comfort
- •Use small, low-risk projects to learn: internal tools, simple apps, prototypes
- •Adoption isn’t all-or-nothing; begin by interrogating systems and opportunities
AI as your tutor: learning, curiosity, and engineering hygiene
Gui and Ed emphasize AI as an always-available tutor that helps people learn by doing. Ed notes that while AI lowers the barrier, good software practices still matter—PR reviews, understanding the codebase, avoiding foot-guns, and respecting data models.
- •Ask-for-help learning loop replaces long, intimidating bootcamp ramps
- •Curiosity becomes a core career skill as tools and workflows change rapidly
- •AI enables surface understanding fast, then deeper skill-building over time
- •Engineering hygiene still applies: reviews, code comprehension, safe changes
Roles are blurring, not disappearing: designers, PMs, engineers in 2026
They describe how roles overlap more in practice (designers shipping code, PMs prototyping), yet remain distinct in purpose. Gui explains “spikes” rather than rigid territories; Ed argues the conceptual mandates (user, business, systems) still matter even if tool access converges.
- •Designers can ship code; PMs can prototype; tool barriers are falling
- •Roles persist because the value each represents differs (user, business, systems)
- •“Spikes” model: people retain strengths but can cover more ground
- •Shift from PRDs to prototypes for some PM workstreams
Total football metaphor: cross-functional coverage as the new operating model
Gui uses “Total football” to describe teams where members can fluidly cover adjacent responsibilities, reducing bottlenecks when someone is unavailable and increasing overall team threat/velocity. The emphasis is on adaptive collaboration enabled by AI, not on everyone becoming the same role.
- •Total football: every position can play multiple roles; coverage is dynamic
- •AI enables faster context switching and broader contribution
- •Reduces bottlenecks and increases resilience in execution
- •Still anchored by individual strengths and primary role identity
Wrap-up and calls to action
Aakash closes by summarizing the core takeaway—fluid movement between code and canvas—and encourages viewers to subscribe/follow and check out sponsor bundles. The episode ends with a final nudge to engage and share to grow the show.
- •Key message: learn to move between Figma and code with AI-enabled loops
- •Encouragement to follow/subscribe/review to support distribution
- •Mentions creator bundle and tools to support builders and AI PMs
- •Episode conclusion and sign-off
