Move a running page into Figma as editable design, let the team refine it together, then give the updated frame URL back to a coding agent so it can apply the design to the local codebase.
Source episode · 06:00
How Figma's Team Syncs Design and Code with Claude Code and Codexwith Claire Vo
Gui sends a local budget allocation page to Figma for direct manipulation, then Alex copies the updated frame URL and asks Claude Code to bring those changes back into the app.
An editable Figma version of the running page plus a local code update based on the team's revised frame.
Collaborative design tool
OpenAI's cloud-based AI software engineering agent that can execute code, run tests, and handle complex multi-file tasks autonomously.
Anthropic AI assistant
Step by step
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Run the app locally and navigate to the exact page or component you want to edit. With the Figma MCP connected, ask the coding agent to send that live surface to Figma as editable design content.
Send the locally running budget allocation page to Figma as an editable frame. Preserve the current layout, copy, component structure, colors, and responsive state. Place it in [destination file or project] and return the frame URL.
Open the imported frame in Figma and work in the tool built for precise visual editing. Move elements, adjust color and spacing, and invite collaborators into the same file. Keep the updated work in one clearly named frame.
This step allows designers who are not comfortable with prompting or coding to contribute directly to the design sourced from live code.
Select the finished frame and copy its direct URL. A frame specific link gives the coding agent a precise design target and avoids ambiguity when the file contains several explorations.
Open the local repository in Claude Code or another agent connected to Figma. Provide the frame URL, name the component to update, and ask it to reconcile the design with the existing code and design system.
Bring the changes from this Figma frame into the budget allocation page in this codebase: [frame URL]. Reuse existing components and design tokens where they match. Update the local implementation to reflect the frame, then summarize the files and visible changes.
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.