How Figma engineers sync designs with Claude Code and Codex

The energy that we've rediscovered around those spikes where we're all just prototyping and throwing it all into the same place, momentum begets momentum. And so having the team together riffing and yes, anding, and trying this stuff out is really great.

This feels like pair programming for designers and engineers, and you can work very quickly back and forth using the MCP as a connector here.

Oftentimes, the codebase gets way ahead of where the actual design file is, and there's states or workflows that just don't exist at all within the design file. So what I can do is say, "Send all five states of the sign-up flow to Figma." Now, the agent's going to do is read my codebase, understand what I'm referring to when I say those five states, and for each one of those, it's going to individually import that one by one into Figma such that the Figma document will then have all of those states laid out all side by side so that my design partner can work against it.

It's definitely changed our workflows in a way that it's kind of really blown up what a workflow even is.

I spend quite a lot of my time just sitting here inside of my terminal now. I often have two, three, up to five maybe Claude Code instances running all at the same time, working on different aspects of the work that I'm tracking.

[upbeat music] Welcome back to How I AI. I'm Claire Vo, product leader and AI obsessive here on a mission to help you build better with these new tools. Today we have Alex, an engineer, and Gui, a designer from Figma, and they're gonna show us the new world and the new workflows of design, code, and back to design. I'm really excited about this one because it's gonna show you how more forward-looking teams are thinking about the interplay between design and engineering teams, how designs don't have to be static artifacts either in Figma or in code, and we're gonna get some tips and tricks on how you can use skills in your repo to take away toil both for engineers and for designers. Let's get to it. This episode is brought to you by Optimizely. Most marketing teams aren't short on ideas, but what they are short on is time, and that's exactly what Optimizely Opal gives you back. With AI agents that handle real marketing workflows, you know, like creating content and checking compliance, generating experiment variations, personalizing user experiences, analyzing pages for GEO, even tasks like approvals and reporting. It's your AI agent orchestration platform for marketing and digital teams, plugging seamlessly into the tools you already use, handling the boring busy work, and keeping everything on brand. That leaves marketers with more time to do your actual job. See what Opal can automate for your team by signing up for a free enterprise agentic AI workshop with Optimizely. Find out more at optimizely.com/howiai. Attend live, and you'll get a free pair of Rayban Meta AI glasses. Welcome to How I AI. Alex, Gui, I am so psyched for you all to be here because we get to finally answer definitively the question on everyone's mind, which is which comes first, the design or the code? Is that right? Do we get to, do we get to finally decide that today, or are you gonna force us to watch both directions? [chuckles]