How Figma engineers sync designs with Claude Code and Codex

1. 0:00 – 2:56

   Introduction to Gui and Alex from Figma

   1. GSGui Seiz0:00

      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.

   2. CVClaire Vo0:14

      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.

   3. AKAlex Kern0:22

      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.

   4. GSGui Seiz0:55

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

   5. AKAlex Kern1:00

      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.

   6. CVClaire Vo1:14

      [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

2. 2:56 – 5:17

   How AI has transformed Figma’s internal workflows

   1. CVClaire Vo2:56

      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]

   2. AKAlex Kern3:20

      I think the answer is it depends, so my, my favorite answer so.

   3. CVClaire Vo3:25

      Your favorite answer, and what I love about what Figma is doing right now is it's building the product for every team that has realized it just depends. What are we gonna do here? And so I know that your business has to have changed a lot. Your product has to have changed a lot in the last couple years because the way people design and build software now changes so much. And I'm sure that has impact both on how you think about what product you're building, but also how you yourself build products. So I'm curious, how has this shifted how Figma approaches the internal design and development process?

   4. GSGui Seiz4:04

      I mean, it's definitely changed, uh, our workflows, um, a-and in a way that it's kind of really blown up what a workflow even is. Uh, before, you know, for the, the majority of our careers, we've had a very, like, uh, linear agreed-upon workflow where the, where you increase fidelity as you go on, right? Because it's really expensive to work in code, and it's really cheap just to trade ideas and sketch them out. But AI basically collapsed that, and it's just as cheap to riff in code as it is to riff in design. And so a lot of times where we used to, like, mock up these kind of grayscale wireframes to point at what things should be, we can get functional wireframes straight away. And a lot of times what we treat these kind of vibe coded outputs is like, "Let me get to something that I can just... is more malleable, I can play with, and then let me kind of work into it. Let me bring my team in." And we're still, like many companies right now, trying to figure out what is the best kind of step process. And to, to Alex's point, it depends. It really depends on the scale of the feature, whether it's a feature, a bug, a product. Like, what are we trying to get to? Uh, we find ourselves reinventing a workflow almost every day, multiple times a day, depending on the case, um, you know, uh, that we

3. 5:17 – 7:28

   The collapse of linear design-to-code workflows

   1. GSGui Seiz5:17

      have to solve for.

   2. CVClaire Vo5:18

      What I like about what you said is, is a couple things. One, I do think up until this point, you know, both design and engineering felt very scarce and expensive resources, and so you were always trying to reduce effort and design by doing things like wireframes. And I, I tell the young people today, they don't know how spoiled they are. It-- you don't know what, like, Balsamiq is or, like, those old sm- mockups used to be. Like, you don't know what we used to have to do, um, with wireframes. So I think we were always trying to figure out that, and then we were always, like, scarcely protecting engineering resources. And part of that meant more work fell on the design team to make lots of very specific decisions about design implementation so that you didn't waste engineering's time trying to figure out, is this supposed to be a rounded corner? What's the hover effect? What's the error state? All this kind of stuff. And what I do appreciate about AI is-Now the cost of generating really high quality stuff has gone down which means you can invest more in the pieces that really matter, and then more people can contribute to the ultimate experience in design. And you know, Alex, I'm sure you feel like you can contribute more and, and, you know, and, and so I think that's an interesting change to how we had historically been doing more of a water file style product development process.

   3. GSGui Seiz6:40

      And to add to that, you also have more exploration capacity because you're not spending so long on one idea de-risking that one idea through meetings and prototypes, et cetera. If you can shortcut to that, you can explore more ideas. You have more, more divergence potential, and I think that's really interesting as well. I think we got to like going deep on quality, we can actually go wide as well.

   4. CVClaire Vo7:03

      Yeah.

   5. AKAlex Kern7:03

      Yeah. I find that I'm spending a lot less time doing like the mechanistic... even on the engineering side, the mechanistic like, you know, changing of syntax and, um, you know, trying to thread data through different call sites and more focused on the problem-solving aspects. And I feel like that same, you know, focus on like problem solving as opposed to the mechanical work, um, is really what AI is enabling on engineering as well as like design teams.

4. 7:28 – 10:49

   Demo: Pulling production code into Figma using MCPs

   1. CVClaire Vo7:28

      Awesome. Well, we're going to actually dive in and show some of this, not in theory, but in practice, and we're gonna see design starting in Codex, which is not what I, not what I expected when I dialed into this call today, that you all were gonna say, "Hey, we're gonna start over in Codex," but that's what we're gonna do. So do you wanna share your screen and show us what I'm gonna call the sandwich of code, which is gonna be code design code I think is, is the process.

   2. GSGui Seiz7:53

      Love it. Yeah, let's do it. So yeah, we thought we'd start with Codex 'cause we've just, uh, recently launched this as well. We had a launch, uh, for Claude, we've just launched on Codex, and we're bringing this, uh, kind of MCP functionality to a bunch of stuff. Let me see if I can just go open my local host for this project. Something that happens a lot is, uh, the sources of truth diverge between design and code, so sometimes some things only really exist in a state in code, uh, or you start working with a developer and you really like elevate what the thing was, the artifact that you originally supplied. Or sometimes like that just doesn't exist in code, you've just inherited someone else's project from forever, forever ago. And so what's really interesting here is that I can just open up a local page. So, so now we've been working on, as a, as a demo hub, Alex and I put something together just to show you the power of this. Let's imagine I am working on a thing that there isn't really a, a cons- coherent source of truth for. Um, it's just a financial tracking app, and I really wanna do some editing in here. And the, the, the case that usually comes up is that yes, I could prompt it for these things, but it's kind of a, a wish and a hope that it gets it, or I have to be super specific, or I have to do install a bunch of tools that help me kind of manipulate closer to the material. But what I really wanna do here is, uh, just ask Codex to send the budget allocation page to Figma.

   3. CVClaire Vo9:21

      Got it. So what, what we're seeing here, and I think the problem you were setting up, which I can empathize with, which is no one ever keeps their Figma up to date with what's the latest in prod, and prod rarely has the hopes and dreams of what has been designed in Figma. And you know, a lot of times, even I do this at ChatPRD, we've created like a Figma page with a bunch of screenshots, and they always go out of date. And so even for using recent designs in things like marketing assets, not even just the software development process, it's really hard to keep these things in sync because code and design are moving in parallel tracks and there's not a common substrate between them yet, I would say, that can keep them sort of up to date on both sides.

   4. GSGui Seiz10:06

      Exactly. Exactly.

   5. AKAlex Kern10:08

      That's exactly right. Yeah.

   6. CVClaire Vo10:09

      Great. So then what you're using here, if I can, if I... tell me if I'm wrong, which is you have the Figma MCP connected to Codex. So that's a hosted MCP that you've connected. Do you have the Figma skill also installed here in Codex? 'Cause I know Codex has made a big deal about skills, and so I'm con- I'm wondering if you're using those two together.

   7. GSGui Seiz10:30

      Honestly, at some point I installed all the skills. [laughs]

   8. CVClaire Vo10:33

      Perfect.

   9. GSGui Seiz10:33

      So I, I have no doubt that at some point I'm using it. Uh, we also have, uh, you know, we're, yeah, we're ex- we're exploring kind of how we improve those. Alex can talk more to those for sure.

   10. AKAlex Kern10:44

       Yeah. You can use the skills in order to do this, um, but you could also just ask the MCP directly

5. 10:49 – 14:10

   Using Figma for precise design manipulation and team collaboration

   1. AKAlex Kern10:49

      and it, uh, seems to pretty reliably get you to a-

   2. CVClaire Vo10:52

      Ooh

   3. AKAlex Kern10:52

      ... imported page.

   4. CVClaire Vo10:53

      You got a Claire Vo, "Ooh." Uh, this is really good.

   5. GSGui Seiz10:57

      There you go. So if you actually... I mean, if you look at the, the page-

   6. CVClaire Vo11:01

      Mm-hmm

   7. GSGui Seiz11:01

      ... and you look at the comparison kinda side by side, now I have all of this in Figma. And so not only can I do more intense kind of direct manipulation, I can go in here and I can like move stuff around in a way that's much more free form that perhaps I would've had to like really like express with words [chuckles] and it's been really burdensome and laborious to explain which bits I wanna move where and et cetera. Um, but my whole team can also jump in, and now we can just exponentially, uh, scale this work versus me solo having to do everything. Um, and when you work in a team, it's like really helpful to leverage that.

   8. CVClaire Vo11:41

      So for those that are listening and maybe not watching the screen share, what we just saw is taking a locally hosted web app, um, and code base, and then using the Figma MCP to then pull the whole design of a page or component into Figma into a frame, and then you can just edit that frame. And a benefit that I didn't really think about which is really useful is it's really... You know, Figma's really built for multi-person collaboration, multi player collaboration in a way that prompting code in something like a Codex or a Cursor or Claude Code really isn't built for, and so that broad exploration is very, very hard to do. The other thing that I wanna say for people is, look, I-I am a true believer every designer should be in, in their IDE playing with GitHub, all that kind of stuff. And also, there are some orgs that just, like, aren't there yet. There are some des- designers that aren't there yet that don't have the front-end language, the prompting skills, whatever, that are super pros in Figma. And this is a nice stepping stone to say, "Okay, we can get you back into a place where you're really comfortable with," but also use that as a way to educate, upskill them on how to use some of these more coding tools to also bring their design, design skills to bear. And so I think there's, there's a kinda halfway step here that is really useful for folks that are used to a, a design tool like Figma.

   9. GSGui Seiz13:05

      For sure. Um, and, and also to, to me it's just the... I don't think we're there yet in general with, uh, these kind of code tools in terms of the precision editing that you wanna do. Um, and trust me, I'm, I, I use the whole kind of landscape of tools to really see kind of where these workflows are going, and I think still the, the gold standard for me is just [chuckles] being able to drag stuff around. Um, and you can do a lot with a click that would take you 100 words to kind of write and to, like, really precisely nail. Like, no one wants to prompt for the exact hex code or the, the shade of yellow and, and that kind of stuff. Um, that's just easier to just quickly do, um, and directly manipulate, um-

   10. CVClaire Vo13:46

       Yeah

   11. GSGui Seiz13:47

       ... yeah.

   12. CVClaire Vo13:47

       I, I just think, like, what are humans g- where are humans gonna be in the loop? And it's gonna be, like, fine motor skills. And honestly, being able to eyeball, is that yellow happy or not? Like, it's very hard to go through a, a design loop, a prompting loop of like, "Oh, no, make that yellow just, like, a little bit more cheerful." But when you pull up the color picker and you start going like this, you can really, um, find the one that,

6. 14:10 – 16:06

   Demo: Pushing Figma designs back into code with Claude Code

   1. CVClaire Vo14:10

      that works for you. So once you've gotten this into Figma, you're collaborating with your team, you're, you're updating the design, what's the next step here? Because, you know, I can imagine you could pull this into of another ticket and then send it [chuckles] send it to an engineer and say, "Please, could you make these updates?" But what do you think about doing once you've pulled it into Figma?

   2. GSGui Seiz14:32

      There's definitely a few ways that we can do this. I can keep working myself. Let's say I'm [chuckles] I'm working a late night because I'm really kind of into this project, and I can just, uh, use MCP to bring it back to my, to my local host. I could also just ping my engineer and say, "Hey, do you have an instance of this running? Do you wanna, like, just up, like, upload it yourself and just work on it?" Um, so from here, we've created this kind of shared common ground where different people can plug in and just grab things out, um, versus it living on my machine, having to branch it, having to get, grapple with all that, uh, technical, uh, complexity. Um, and actually, that's a good point. Uh, Alex, do you wanna, uh, try and implement some of these other changes that we've kind of put together?

   3. AKAlex Kern15:12

      Yeah, absolutely. So let's say I wanna implement this particular variant. Um, what I can do is I can copy the URL of that and go right back into my Claude Code session. So, uh, I have the, uh, uh, app also loaded, uh, here locally, and I can say, "Bring the changes from this component into my code base." And which component is it? It's the... This is for, uh, the budget allocations page. And it's going to then use the Figma MCP server in a different way. This one allows it to take, uh, stuff that's currently within the Figma document and automatically transform that into code, which then gets reconciled with your local code base and automatically applies those changes, um, for you automatically. So-

   4. CVClaire Vo16:03

      Again, I need to have, like, an old lady

7. 16:06 – 18:43

   How AI has changed the role of software engineers

   1. CVClaire Vo16:06

      moment, which is I tell people, you know, when I used to have to, like, walk uphill both ways for my CSS, thinking about what I used to have to do to get a close to p- And I was on both sides of the table. I was a designer, and then I was an engineer. To get, like, a pixel perfect version of whatever somebody had mocked up, and I mean, we didn't even have Figma that I was doing thi- I was making Photoshop PSDs for the real olds out there. And, and just the ability to, like, pull in what's the size of this, how's it supposed to look, what's the alignment, all through just typing still to this day blows my mind. Alex, I'm curious how this has just changed your relationship with what your job is as a software engineer. I know you said, like, the mechanistic pieces are, have gone away, but what does this do for you for, from, like, a ti- like, how you spend your time perspective?

   2. AKAlex Kern16:58

      Yeah. I mean, I spend quite a lot of my time just sitting here inside of my terminal now. Um, I, I do so much less. I think of the, uh, like, what I used to have to do, where I had to have a browser window open at the same time as having my code window open. Uh, there are times where I need to check, check those types of, you know, product-oriented flows, but there's actually quite a few changes, especially when they're kind of mechanistic in nature like this, where I don't even necessarily have to have, uh, you know, the visual, uh, in order to get the work done. So, um, I often have two, three, up to five maybe Claude Code, um, instances running all at the same time working on different aspects of the work that I'm, I'm tracking. So some of them might be doing things that are just reconciling the design file with the code base, but other ones might be working on exploratory things, answering questions that I have about the code base, writing specs and documentation that we've talked about in a little bit, and kind of my workflow around, uh, grounding technical specifications inside of code bases. Um, I'm just gonna allow Claude to progress here. Um, so it was able to find what those differences were between the, uh, design file and the code base, and, um, it's actually going ahead and applying them.

   3. CVClaire Vo18:07

      And what's amazing to me, and I think people don't, don't articulate enough about, let's call it, a multimodal AI or, you know, computer vision, all this stuff, is it doesn't have to be you dragging a PNG of the file into Claude Code, it, it reading that through a vision model, and then making some inferences about it and designing it. You're actually doing this, like, sort of pseudo-structured data to pseudo-structured data translation through the MCP, which has to have much higher accuracy, but it's translating functionally visual information, which I think is-Just so nifty. I, I love it.

8. 18:43 – 22:31

   The shift to upstream planning and downstream craft

   1. CVClaire Vo18:43

      Um, ha- has, has this changed kind of your mental model of what does... I mean, I think Figma in general has pushed forward everybody's mental model of, like, how you encode design into data, but I'm curious, how are you all evolving your thinking when you have all these multimodal models at your, um, at your fingertips when you can do kinda structured data to other structured data translations? Has that inspired any ideas internally about what the future of design looks like?

   2. GSGui Seiz19:11

      What's really interesting about, like, our, our role with all of this is kind of really moved upstream. Um, and we're in this really, I find, almost decadent moment in time where before we had to be so conditioned on re-sharp product decision-making skill that would have to happen, like, almost immediately and being able to, like, quickly reason with stuff and quickly get to really good craft because the bulk of the time was spent building. And so the longer you ate into that, the more P0s became P1s and P2s. And so now we're kind of actually at this point where more of the priorities can make it above the cut line, and also we can spend a lot more time in the planning stage. You asked me, like, does it start with, with design or with code? Actually, I start a lot of it with planning and just, like, really riffing and a- allowing myself and indulging in the, the possibilities. And then kind of riffing in, in something that, you know, if, if it-- I need it to be something that can only exist in code, it'll be code. If otherwise, uh, I will diverge in design. But I see design as much more at this kind of like, what should we be building, uh, stage of the conversation, which we were before, but it was, like, a very rushed moment there. Um, and now we can spend a lot more time in it because we know that actually the, the, the building will happen a lot quicker. And so we do that, and then on the other side, we spend a lot more time in the craft because we can. Because we can reach higher for ideas. Uh, because before we were like, "Well, I don't know. Hope, hopefully an engineer will get my intention." Now I can spend a lot, a lot longer in that moment.

   3. CVClaire Vo20:45

      I love that you call this a decadent moment because it was two years ago at Config, actually, I gave a talk on the future of product management, and I said, "This is the era of yes." Like, this idea of the cut line has to disappear. And how many planning meetings have we all been in where we look at a design and an engineer goes, "Oh, well, that's just gonna add scope." Like, we gotta cut scope. Or we look at a, a priority planning meeting and we say, "Oh, we-- that, that, that little fix that everybody hates in our app, I know that everybody hates it, but it's not a P0 priority, so it's gotta, you know, go, go next year." And I do think this idea that you can really have an abundance m- [chuckles] a feature-level abundance mindset is, is... and, and the craft-level abundance mindset where you can put the polish and all the things that make these experience nice are one of the benefits of working with AI right now.

   4. AKAlex Kern21:37

      So it's done here. It's applied the patch, and, um, now you can actually see that the, uh, app has been updated. And it looks exactly like what the Figma design looked like but, uh, has been applied entirely within code.

   5. CVClaire Vo21:51

      And so the benefit we got here, just to reiterate for folks that are not watching, is took an existing app that had drifted very far from the original file in Figma. Happens to the best of us. We programmatically pulled it into Figma. We used our beautiful, fine-tuned, opposable thumbs and fingers to actually drag and create the perfect design that we wanted in Figma, and then that's very easily pulled in by an engineer like Alex. Claude Code, whatever your code is, built the code. Didn't even look. I mean, you, you did look, but, like, didn't have to look at the design, and now it can be deployed pixel perfect. Everybody's happy. That's how it works.

9. 22:31 – 25:23

   Demo: Exporting multiple code states back into Figma

   1. AKAlex Kern22:31

      That's how it works.

   2. CVClaire Vo22:32

      Okay, now we're just hitting the rubber wall, and we're going the other direction. So you're gonna show me how we can start with no design, go from Claude Code into a design, and then I'm presuming back to Codex, and this episode's just gonna be [chuckles] a ping-pong back and forth. So Alex, how would you as a engineer, no design set up, actually start designing something in Figma?

   3. AKAlex Kern22:55

      Oftentimes, like, the code base 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. And I wanna show you a little demo of, like, how you can actually take all of those states that don't exist within your design file but exist within your code base, bring them into a Figma design file so that, uh, your design collaborators can work directly off of those. Uh, here I've been working on a signup flow for a, uh, new app that I've been working on, and there's a few different states of the signup flow, but not all of those states exist within my design file. And so what I can do is say, uh, "Send all five states of the signup flow to Figma." Now the agent's going to do is, uh, read my code base, 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 Gui, my design partner, can, uh, work against it.

   4. CVClaire Vo23:56

      Yeah. Again, I'm just gonna go back to how it was before, and I'm having flashbacks to these design packages that I used to send over to engineering where every single error state, every bit of copy, every this flashes yellow, this flashes red, this has orange, this is the hover state, was documented, designed, lovingly crafted pixel by pixel. And the ability here, a- again, I think for a designer even to say like, "Can you remind me what happens when you have a correct email but an incorrect password on this sign-in flow, and, like, what is our error state?" without having to go into the code and without having to replicate that in production is pretty powerful. And then you layer on top of that, "Oh, cool, it's actually in a Figma component, so I can go in and, and edit it. It's not just a screenshot," is, is quite nice. And so right here-Is this in Figma?

   5. AKAlex Kern24:51

      Uh, these are all the browser windows that had opened up. But here is now the Figma document that has all of those states laid out side by side. Um, and you can see that each one of them was imported, uh, as part of this like exact flow all into the same Figma file. And I can now send this link over to my design partner so that while I'm working on my side of the codebase, um, they can actually, uh, get started on, uh, riffing on this, experimenting with different colors, patterns, et cetera, all while I'm doing my n- my normal development work.

10. 25:23 – 28:00

    Synchronous vs. asynchronous collaboration with AI

    1. CVClaire Vo25:23

       This feels like pair programming for designers and engineers together. It's such an interesting new way, new... You know, Gui, as you said at the beginning, like a new workflow to think about where you're both in different expressions of the same part of the app, and you can work very quickly back and forth using the MCP as a connector here.

    2. AKAlex Kern25:45

       Mm-hmm.

    3. CVClaire Vo25:46

       Do you find yourself doing more synchronous work or more asynchronous work because of this?

    4. AKAlex Kern25:50

       I find that asynchronous work tends to be like my default now. However, I do find that like there's something that's really special about synchronously working through things like with your collaborators, whether it's other engineers or designers. Remote-oriented environments like, you know, you, you get a lot of benefits, uh, about being able to like work, you know, around the clock basically, uh, regardless of, you know, where everyone's located. But, uh, there's something that's still really special about putting everyone together in one place and having that collaborative canvas experience that really brings everyone together, I think is still something that you can't quite replace, uh, even with pull requests, even with, you know, uh, jumping on, uh, you know, screen share. Um, there's something that feels different when, you know, folks can freestyle over here, and other folks can be working on something else totally unrelated, but in the same shared space and seeing each other like kind of work in real time.

    5. GSGui Seiz26:42

       I think with, with this kind of tool, um, it's really re-enabled a lot of the sync work. We went... It's funny you're talking about the handoffs of packages. It's, I often feel it's, it's like the Planet of the Apes analogy, where we've gone so far into the future or in the past, where like technology is sci-fi, but we're back in this like thing of handing over USB sticks. Here's my version. Here's version controlling things. And, you know, now with this, I can like be working on an idea with my team together, and the energy that we've rediscovered around those spikes, where we're all just prototyping and throwing it all into the same place, and it doesn't feel like, "Oh, I'm gonna work into this, and tomorrow I'll show you a version, and then you'll show me a version." Like, momentum begets momentum. And so having the team together riffing and yes and-ing and trying this stuff out is really great. There are gonna be moments where it's like, "All right. I think we've, we, we've had a good, [chuckles] a good, uh, jam here. Now let's go deep," and that's fine. Let's go converge. But there is something to be said about even in remote environments, uh, jumping into a Figma file and just seeing cursors flying around and trying out stuff. I haven't found a better alternative for that, and I'm hoping if anybody does, it'll be us, um,

11. 28:00 – 29:03

    Eliminating design and engineering toil with AI

    1. GSGui Seiz28:00

       to be honest.

    2. CVClaire Vo28:00

       One, one thing that I wanna call out is we've talked a lot on this podcast about engineering toil and reducing engineering toil through AI, and Alex, we might see some of that in, in just a little bit of how do you structure your process and reduce the, you know, as you say, the mechanistic parts of your work or the kind of tactical parts of your work. There is design toil out there. There is copying and pasting files. There is this version final, final, V2, V3, final, final, signed off by boss. Just kidding, final again. Like, there, you know, there's who's rounding these corners and checking that, you know, the fonts are matching or that the capitalization's right. There's a lot of design toil that goes into building a beautiful product. And the other thing that I see is AI can just strip a lot of that work away and again, leave you focusing on the higher leverage uses of your talent and contribute con- contributions to your product, which I think results in a higher engaged team.

    3. AKAlex Kern29:01

       Mm-hmm.

    4. GSGui Seiz29:02

       Yes.

    5. CVClaire Vo29:02

       Great.

12. 29:03 – 34:06

    Demo: Custom skills for automating pre-flight checks

    1. CVClaire Vo29:03

       Okay, we're gonna wrap with one last use case, which is not Figma related, but is, has been really powerful in your workflow, Alex, which is everybody's favorite new primitive of the AI stack, the skill. So let's see a couple of skills that you found useful to install as an engineer and why you picked them, why you built them, and how you use them.

    2. AKAlex Kern29:24

       Uh, so I may actually be somewhat in the minority here, where I, I actually just write a lot of the skills myself or ask the AI to write them for me. Um, a lot of it is based on, um, just consistently having... I, I kind of think of them as just like large like macros, like prompts that I can, uh, invoke at any like, um, point in my workflow. One of the ones that I've been using frequently, uh, is, uh, this /ship skill that I wrote. Um, I use it all the time, uh, in my workflow. Uh, often in order to get something into a large repo like the Figma repo, there's a lot of work that's involved in just making sure tests pass, making sure, um, all of the like pre-flight things are in order. And also then once it's pushed to, uh, the repository, checking on CI and making sure that it correctly built and is all green so that I can actually merge it. Previously, I would have to kind of babysit these, um, you know, kind of processes like all the way at every single step, and it, it just created a lot of friction for me. Um, so I wrote this /ship skill that I use all the time. So inside of, uh, Figma, we have these things called dev boxes, which are hosted development environments that we do most of our work in now. Part of that dev box environment is that, uh, we automatically insert like bootstrap scripts in order to, uh, make it so that when you boot your new dev environment, that any of your customizations that you specifically have for your dev environment also get put alongside it. So what you're looking at right here is my internal Git repository that stores all of my personal configuration for my dev box.And I have a couple of commands here, some of which are underneath the, the devbox command that I'll, I'll talk about in a little bit. But this, uh, this is how I manage the devbox itself and create new skills via it, so I have a skill for creating more skills. Uh, as well as a couple of just really popular ones that I, uh, use all the time, such as addressing PR feedback and the /ship command that I just mentioned. So what does that do? It boots up a bunch of things and runs a bunch of checks against, uh, the repository. Um, these are what I refer to as p- pre-flight checks. Uh, they check for things inside of the commit to make sure I didn't accidentally commit something that doesn't make sense in the context of this particular, like, commit, as well as, uh, running lint, querying for various packages to make sure that, uh, we're correctly running the Bazel build commands. We use Bazel for, um, Bazel for, uh, build systems. And then finally, like, pushing it to the Git repository. So monitoring the CI checks after push using GitHub pull request checks in order to do that. We use Buildkite for our, um, CI loop, and, uh, that also gets checked. So once the build either succeeds or fails, the script will then check Buildkite for whether or not the logs represented anything. And if there are minor fixes, like linked issues or otherwise, it'll automatically push another commit in order to, uh, fix that particular, like, more minor issue. And it'll do this up to five times with a one-hour timeout, um, waiting for CI. There's also a handful of things that are, um, you know, as things as I, I went through, like encouraging it not to force push just in case-

    3. CVClaire Vo32:38

       [laughs] That's the one I was looking at

    4. AKAlex Kern32:40

       ... overwrites, uh, something inside of my repository, or it commits credentials or things like that. But I use this skill pretty much all the time in my dev loop as a way, once I've, like, hit a good state where I think that this is ready to go and should be like, um, you know, um, pushed to our repository, I do /ship and then walk away from my laptop, and, um, it usually takes it from there.

    5. CVClaire Vo33:02

       So one thing I wanna call out, this is giving me such inspiration, which is every engineering org that I've ever run has an internal wiki that has that page, which is this is what you do before you push a PR and you get in everybody's way in the deploy pipeline. And every engineering team should go through their onboarding wiki and pull every page out, every this is what you should do into a skill, and then l- give, give access to that to their entire team. And so I think we're really shifted from this idea of, like, an SOP into a skill or a doc into a skill, and I know so many folks that have this buried in GitHub, in, um, Confluence, and you can just give somebody the job for a week to take all that stuff and make it a skill, push it in your repo, and then let everybody benefit from a systematic way to, to roll out those best practices.

    6. AKAlex Kern33:53

       Absolutely. Yeah.

    7. CVClaire Vo33:54

       Awesome.

    8. AKAlex Kern33:55

       It turns, like, a lot of these, like, processes that would otherwise just be, you know, based on best intentions and whenever people remember into something that can be fully automated and, um, brought into people's workflows

13. 34:06 – 35:24

    Code first or design first?

    1. AKAlex Kern34:06

       by default.

    2. CVClaire Vo34:07

       Amazing. Okay. Well, this has been great. Just to recap what we saw, we saw Codex to Figma to Claude Code to Claude Code to Figma [laughs] to Figma. Um, basically just calling out you don't have to think about your designs as a static asset anymore. You don't have to think about building components in code only or in design only. These things can interact together. Calling out the benefits of just being able to touch the design with your cursor and collaborate live with your colleagues, and then encoding some of your best practices into things like skills, um, encoding some of your capabilities into things like MCPs, and then everybody can, can access this stuff. So I'm gonna ask you a couple lightning round questions. You both have to answer. There are clear rules, so you cannot say, "It depends." Um, I'm gonna start with the one that I started this episode with, with, which is Gui, code first or design first, if you had to pick one?

    3. GSGui Seiz35:03

       Design first.

    4. CVClaire Vo35:04

       Ah, I love it. A- and Alex?

    5. AKAlex Kern35:06

       I'd probably pick code first.

    6. CVClaire Vo35:08

       [laughs]

    7. GSGui Seiz35:09

       Breaking the mold here. [laughs]

    8. AKAlex Kern35:11

       You know?

    9. CVClaire Vo35:11

       And this is why Figma had to make this MCP, 'cause there will never be, never be agreement here. You know, my second question for you all, um, and Gui, I'm, I'm interested in your opinion, is

14. 35:24 – 40:21

    Using AI to learn and explore codebases

    1. CVClaire Vo35:24

       are there any things around AI, not... let's put software and, you know, design systems, all this stuff aside, that you're really excited about as a creative, as a designer, um, that you hope people are gonna start using more or talking about more?

    2. GSGui Seiz35:37

       Honestly, it's just been a, a, like, a platform for me to just learn more about something that I was always curious about, and I hope the people, like, see the educational and the upskilling aspect of it and not just outsourcing any potential capability, 'cause it happens across everything. Anything you wanted to get a little bit deeper on, you can now do it without having to trawl through links. Like, it just c- it's just there at whatever moment you need it. And I think, um, I've been diving deep into getting deeper into shaders, which before was just pure mathematics that I had no business playing in, and now it's like, oh, wait, I can talk about it in natural language and I can learn more about the spec- specifics that I want to learn about.

    3. CVClaire Vo36:19

       Alex, what about you?

    4. AKAlex Kern36:20

       Yeah. I, I mean, I love going really deep. We have a, a massive code base at Figma, and so I love asking all of the, like, qu- crazy questions that I had always, like, wondered about. Um, we have an internal service, for example, that I didn't know the origin of its name, and so I asked Claude to go and figure out based on the commit history, um, what the origin was, and it came back with a really good story, um, about, like, how that came to be. Um, it got renamed multiple times. That, you know, contributor has since left the company many years ago, so this was kind of lost in the ether. But now, uh, now, uh, all of this lore, um, honestly, uh, from the company is actually, like, embedded inside of the code base and-Um, I can, I can find it now.

    5. CVClaire Vo36:59

       I'm gonna bridge both of your, um, excitement, which is I think it's such a fun thing to learn by querying open source libraries. And so the example of this recently is, you know, OpenClau, now named OpenClau, came out, and everybody's like so mystified. They're like, "It's working overnight, and it's doing all this stuff for me." And I was like, I'm just gonna go into this thing and figure out how it's architected and how it actually does the thing it does. And it was such an interesting learning experience just to decompose how you would design a, an agent, and what were some of the kinda new things that it had built. And so that's another thing that I recommend, either going deep in your co- own code base or going deep in an open source code base to learn something, is something that was so inaccessible before, and now you can do basically on any open source library out there, which I think is, is really cool. Okay, last question. Alex, I'm gonna start with you first 'cause you, um, you know, we had a tiny bit of friction with, with Claude Code. I saw you sweat a little bit. When AI is not replying o- how you want, it's not doing what you want, what is your prompting technique? Do you, do you like just slash clear and kill it? Like, what do you do?

    6. AKAlex Kern38:08

       That, that can work, but I find that the more successful one is, uh, is, it's either cursing a little bit-

    7. CVClaire Vo38:15

       [laughs]

    8. AKAlex Kern38:15

       ... um, in the prompt. Uh, I, I, you know, uh, am somewhat ashamed to admit that it- that's extremely effective. But the more, uh, common one I, I use now is that my boss is mad at me.

    9. CVClaire Vo38:26

       [laughs]

    10. AKAlex Kern38:27

        Um, and it seems to work pretty well. Um, uh, it, it kind of sympathizes with you, and it's, it's, it's kinda cute.

    11. CVClaire Vo38:34

        I, you know, I s- I sometimes say about this about parenting. I tell my kids, "I only yell at you because it works." [laughs] Like, like, I don't wanna yell at you, but sometimes it's the only thing that you guys listen to. Gui, what about, what about you? Are you also a... Do you also-

    12. GSGui Seiz38:49

        I, uh-

    13. CVClaire Vo38:50

        ... with opt-

    14. GSGui Seiz38:50

        I have to take the gentle parenting route. I'm terrified of the robots taking over and reading through my prompt histories. [laughs] Uh, I'm still on the make no mistakes camp. Uh-

    15. CVClaire Vo38:58

        Oh, make, make no mistakes. I am very polite. I, I kinda go with, like, "No." Like, I sound really, like, sad. I'm like, "No." Or I do, um, sort of growth mindset parenting where I say, "I believe you can do it. I believe-

    16. GSGui Seiz39:10

        Yeah

    17. CVClaire Vo39:10

        ... you're capable of solving this problem. You just apply yourself." Okay.

    18. GSGui Seiz39:13

        You can do hard things.

    19. CVClaire Vo39:15

        [laughs] Alex, Gui, this was so great. Where can we find you both, and how can we be helpful to you?

    20. AKAlex Kern39:21

        Uh, you can find me on X. I'm on, uh, X as kernio.

    21. GSGui Seiz39:25

        Amazing. And you can find me on, uh, any social media platform a- as guiseiz, G-U-I-S-E-I-Z. And just generally if you @ Figma, chances are I'll probably be reading it.

    22. CVClaire Vo39:36

        Amazing. Well, it was so great to have you. I am so excited. I have got... I've been very inspired about how we can manage our YouTube thumbnails through code and Figma, so I'm gonna go experiment with that. And I appreciate you all joining How I AI.

    23. GSGui Seiz39:50

        Thank you for having us.

    24. AKAlex Kern39:51

        Thanks for having us, Claire.

    25. GSGui Seiz39:51

        Great.

    26. CVClaire Vo39:52

        [upbeat music] Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiai pod.com. See you next time.

Episode duration: 40:21