Export the states that exist in code but are missing from the design file. One prompt asks the agent to find every state in a flow, place editable versions side by side in Figma, and give designers a current canvas for refinement.
Source episode · 20:30
How Figma's Team Syncs Design and Code with Claude Code and Codexwith Claire Vo
Alex asks the agent to send all five signup states to Figma, where they appear side by side as editable frames that a design partner can refine.
One Figma file containing editable, labeled frames for every requested state in the current implementation.
Anthropic AI assistant
Collaborative design tool
Step by step
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Choose a flow where code contains states the Figma file does not, such as empty, typing, validation error, loading, and success. Make sure each state can be reproduced locally through a route, fixture, or predictable interaction.
Run the app locally and ask the coding agent, connected to Figma, to export the full set. Name the flow and the expected number of states. If the labels are not obvious from code, list them in the prompt.
Inspect the signup flow in this codebase and send all five implemented states to Figma. Reproduce each state from the running app, label it with the state name, and place the editable frames side by side in one section of the destination file.
Open the Figma file and compare the exported set with the running flow. Check that no state is missing, labels match behavior, copy is current, and every frame is editable rather than a flattened screenshot.
Use the side by side frames to refine error copy, visual hierarchy, transitions, and edge cases. Keep the full set together so the design file documents the actual product flow instead of only the happy path.
Turn an idea into a PRD, user stories, and a plan.
After the steps
How to recover when the loop fails and where human judgment helps.
Recover
Keep building
Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.
Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.
Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.