How Figma's Team Syncs Design and Code with Claude Code and Codex

Welcome back to How I AI! I'm Claire Vo, and in this episode, I was so excited to sit down with Gui Seiz, a designer, and Alex Kern, an engineer, from the team at Figma. We finally get to tackle the age-old question: which comes first, the design or the code? As Alex wisely said, “it depends.” And that’s the reality for modern product teams. The workflow is no longer a straight line from a static design file to a final coded product.

For most of our careers, product development has been a linear process of increasing fidelity. You start with cheap sketches and wireframes (I'm having flashbacks to my days using Balsamiq) because working in code was expensive. Engineering time was a scarce resource to be protected at all costs, which often meant design had to spec out every single hover state and error message to avoid wasting it. But AI has completely collapsed that model. As Gui explained, it’s now just as cheap to riff in code as it is in design. This is what he calls a "decadent moment" where teams have more capacity for exploration and can go wide with ideas instead of just deep on one.

This shift is profound. It's moving us away from a world of scarcity and cut lines into an era of abundance. Instead of arguing over which features get built, we can build more. Instead of skipping on polish, we can invest in the craft that makes experiences delightful. Gui and Alex walked me through the exact workflows their team uses to make this a reality, creating a fluid, bidirectional loop where design and code inform each other in real time. We're going to see how they pull a live app directly into Figma, push design changes back to the codebase with a single prompt, and automate tedious engineering tasks with custom AI skills.

Workflow 1: The Code-to-Design-to-Code Sandwich

The first workflow we looked at tackles a problem every product team knows intimately: design drift. The code in production almost never matches the original Figma file. Features evolve, bugs get fixed, and nobody has time to go back and update the designs. This creates a messy source of truth, making it hard to iterate. Gui and Alex showed me a bidirectional workflow that keeps both worlds in sync.

Step 1: Bringing Production Code into Figma

Gui started by showing me a local version of a financial tracking app. The design for it was either non-existent or completely out of date. Instead of taking screenshots or rebuilding it manually, he used an AI agent to pull it directly into Figma.

The process is surprisingly simple:

1. With the local web app running, Gui opens up Codex, which is connected to Figma's MCP (Model, Controller, Presenter).
2. He uses a straightforward natural language prompt to tell the agent what he wants:

send the budget allocation page to Figma

In seconds, the agent processes the webpage's structure and recreates it as a fully editable, vector-based design inside a new Figma file. This isn't a flat image; it's a collection of layers, text objects, and shapes that a designer can immediately start working with.

Step 2: Collaborating and Refining in Figma

Once the design is in Figma, the entire team can jump in. As Gui pointed out, this is where the collaborative magic of Figma shines. Multiple people can work on the design at once, moving elements, changing colors, and exploring ideas in a way that's impossible when you're just prompting an AI solo. For a designer, the ability to directly manipulate elements with a cursor—to just feel if a color is right—is still the gold standard. You can do more with a single click than you could with a hundred words in a prompt.

This also democratizes the process. A designer who isn't comfortable in an IDE or with prompting can now contribute directly to a design sourced from live code, using the tools they know best.

Step 3: Pushing Figma Designs Back to Code

After Gui and the team have perfected the new design in Figma, the loop closes by pushing those changes back to the codebase. This is where Alex, the engineer, steps in.

1. He copies the URL of the specific Figma frame containing the updated design.
2. He goes into his coding environment, in this case Claude Code, where the app's repository is loaded.
3. He instructs the agent to apply the changes using the Figma URL:

bring the changes from this component, into my code base. And which component is it? It's the...budget allocations page.

The AI, via the Figma MCP, analyzes the differences between the existing code and the new design data from Figma. It then generates the necessary code changes and applies them as a patch. The result? The locally running web app instantly updates to be a pixel-perfect match of the new Figma design, all without Alex having to manually write a single line of CSS.

Workflow 2: Exporting All Code States into Figma

Another common disconnect between design and code happens with component states. A developer might implement various states for a signup flow—default, typing, error, success, loading—but these often never make it back into the design file. This forces designers to either guess what the live states look like or bother an engineer to find out. Alex showed me a brilliant workflow to solve this.

The Challenge: Invisible States

In a complex application, a single component can have dozens of states. Documenting all of them manually in Figma is classic "design toil"—tedious, time-consuming work that slows everyone down. But without that documentation, designers are working blind. They can't see what the user actually experiences in every scenario.

The Workflow: Batch Exporting with a Single Prompt

Alex demonstrated how he can use the same Figma MCP connection to solve this in reverse. Working on a signup flow with five distinct states that only existed in the codebase, he used one command in Claude Code to get them all into Figma for his design partner, Gui.

1. Inside his code editor, Alex simply asks the agent:

send all five states of the signup flow to Figma

1. The agent intelligently inspects the codebase, identifies the different states of the signup component, and renders each one.
2. It then exports all five states as individual, editable components into a single Figma file, neatly laid out side-by-side.

This is incredibly powerful. It's like pair programming for designers and engineers. While Alex continues his development work, Gui can immediately start refining the actual, existing states, ensuring the user experience is consistent and polished across every single interaction, not just the "happy path."

Workflow 3: Eliminating Toil with a Custom /ship Skill

Finally, Alex shared a workflow that goes beyond the design-code interplay and targets the universal pain of engineering toil. Every engineering organization has a long checklist of things you must do before you can merge a PR: run tests, fix linting, push to the repo, and then babysit the CI pipeline to make sure all the checks pass. It’s tedious and full of friction. Alex automated this entire process by creating a custom skill.

From SOP to Automated Skill

Many teams have this pre-flight checklist documented in an internal wiki or a Confluence page. Alex's insight was to turn that static document into a dynamic, executable skill. He wrote a custom /ship skill that he can invoke right from his code assistant.

Here’s how his custom /ship skill works:

1. Pre-flight Checks: It first runs a series of local checks on the code, including running lint and build commands with Bazel.
2. Push to Repo: Once the local checks pass, it pushes the code to the Git repository.
3. Monitor CI: The skill then monitors the CI/CD pipeline (in Figma's case, BuildKite) by checking the GitHub pull request status.
4. Auto-Fix: If the CI build fails due to minor issues like lint errors, the script will automatically generate a fix, commit it, and push it again. It will retry this up to five times.
5. Safety Rails: The prompt for the skill even includes important constraints, like instructing the AI not to force push, to avoid overwriting history or committing credentials.

Now, when Alex has a change ready, he just types /ship and walks away from his computer. The AI handles the entire monotonous process of getting his code merged. This is a perfect example of turning tribal knowledge and standard operating procedures into automated tools that save the entire team time and mental energy.

A New Paradigm for Collaboration

The common thread through all these workflows is the move from static artifacts to dynamic, interconnected systems. Your codebase doesn't have to be a black box for designers, and your design files don't have to be outdated relics for engineers. By using AI as a bridge, teams like the one at Figma are creating a more fluid, collaborative, and honestly, more fun way to build products.

It’s a future where we spend less time on toil and more time on craft and creativity. I walked away from my conversation with Gui and Alex feeling incredibly inspired. It made me think about all the internal wikis and SOPs that could be turned into powerful, automated skills. I encourage you to think about your own team's processes—what tedious checklists could you transform into an AI skill that frees everyone up to do their best work?

Thanks to Our Sponsor!

This episode is brought to you by Optimizely.

• Optimizely—Your AI agent orchestration platform for marketing and digital teams

Episode Links

Where to find our guests:

• Gui Seiz: Find him on X and LinkedIn.
• Alex Kern: Find him on X and LinkedIn.

Where to find me:

• Claire Vo: Website, ChatPRD, LinkedIn, and X.

Tools and resources mentioned:

• Figma
• Codex
• Claude Code
• BuildKite
• Balsamiq
• Dev Boxes