From Figma to Claude Code and back | Gui Seiz & Alex Kern (Figma)

18:06Alex Kern:And what's amazing to me, and I think people 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 quad code, 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 love it. 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.

18:55Alex Kern:But I'm curious, how are you all evolving your thinking when you have all these multimodal models at your fingertips when you can do kind of structured data to other structured data translations. Has that inspired any ideas internally about what the future of design looks like?

19:11Gui Seiz:What's really interesting about like our role with all of this is kind of really moved upstream. And we're in this really, I find it almost decadent moment in time where before we had to be so conditioned on really sharp product decision-making skill that would have happened 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 p zeros became p ones and p twos 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 allowing myself and indulging in the possibilities.

20:04Gui Seiz:And then kind of riffing in something that, you know, if I need it to be something that can only exist in code, it'll be code. If otherwise I will diverge in design. But I see designers much more at this kind of like, what should we be building stage of the conversation, which we were before. But it was like a very rushed moment there. And now we can spend a lot more time in it because we know that actually 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. Because before we were like, well, I don't know, hopefully an engineer will get my intention.

20:41Gui Seiz:Now I could spend a lot, a lot longer in that moment.

20:44Alex Kern: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 going to add scope. Like we got to cut scope. Or we look at a priority planning meeting and we say, oh, 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 got to, you know, go next year.

21:19Alex Kern:And I do think this idea that you can really have an abundance, a feature level abundance mindset is, is in the craft level abundance mindset where you can put the polish and all the things that make these experience tonight are one of the benefits of working with AI right now.

21:37Gui Seiz:So it's done here, it's applied the patch. And now you can actually see that the app has been updated. And it looked exactly like what the Figma design looked like, but has been applied entirely within code.

21:51Alex Kern: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. Cloud code, whatever your code is, built the code, didn't even look. I mean, you did look, but like didn't have to look at the design. And now it can be deployed pixel perfect.

22:28Alex Kern:Everybody's happy. That's how it works. That's how it works. Okay, now we're just hitting the rubber wall and we're going the other direction. So you're going to show me how we can start with no design, go from cloud code into a design. And then I'm presuming back to codex in this episode is just going to be a ping pong back and forth. So, Alex, how would you as a engineer, no design set up, actually start designing something in Figma?

22:55Gui Seiz:Oftentimes, like the code base gets way ahead of where the actual design file is. And there are states or workflows that just don't exist at all within the design file. And I want to 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 your design collaborators can work directly off of those. Here I've been working on a signup flow for a 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.

23:27Gui Seiz:And so what I can do is say, send all five states of the signup flow to Figma. Now the agent's going to do is 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 Guy, my design partner, can work against it.

23:56Alex Kern:Yeah, again, I'm just going to 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 flash is yellow this flash is red this has orange this is the hover state was documented designed lovingly crafted pixel by pixel and the ability here 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.

24:39Alex Kern:And then you layer on top of that. Oh, cool. It's actually in a figment component. So I can go in and edit it. It's not just a screenshot is is quite nice. And so right here, is this in figment?

24:51Gui Seiz:These are all the browser windows that it opened up. But here is now the figment document that has all of those states laid out side by side. And you can see that each one of them was imported as part of this 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 code base, they can actually get started on riffing on this, experimenting with different colors, patterns, etc., all while I'm doing my normal development work.

25:22Alex Kern:This feels like pair programming for designers and engineers together. It's such an interesting new way, you know, Guy, 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. Do you find yourself doing more synchronous work or more asynchronous work because of this?

25:50Gui Seiz:I find that asynchronous work tends to be like my default now. However, I do find that there's something that's really special about synchronously working through things with your collaborators, whether it's other engineers or designers. Remote-oriented environments, you get a lot of benefits about being able to work around the clock, basically, regardless of where everyone's located. But 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, even with pull requests, even with, you know, jumping on, you know, screen share.

26:30Gui Seiz: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. I think with this kind of tool, it's really re-enabled a lot of the sync work. It's funny you're talking about the handoffs of packages. I often feel it's like the Planet of the Apes analogy where we've gone so far into the future or in the past. Where technology is sci-fi, but we're back in this thing of handing over USB sticks. Here's my version. Here's version controlling things.

27:06Gui Seiz:and you know now with this i can like be working on 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 i'm going to 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 anding and trying the stuff out is really great there are going to be moments where it's like, all right, I think we've had a good jam here. Now let's go deep. And that's fine. Let's go converge.

27:44Gui Seiz:But there is something to be said about even in remote environments, jumping into your Figma file and just seeing curses 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, to be honest.

28:00Alex Kern:One thing that I want to 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 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 is right.

28:39Alex Kern: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 contributions to your product, which you think results in a higher engaged team. Great. 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 pick them, why you built them and how you use

29:23Gui Seiz:So I may actually be someone in the minority here where I actually just write a lot of the skills myself or ask the AI to write them for me. A lot of it is based on just consistently having I kind of think of them as just like large, like macros, like prompts that I can invoke at any like point in my workflow. One of the ones that I've been using frequently is this slash ship skill that I wrote. I use it all the time in my workflow. So 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 test pass, making sure all of the like pre-flight things are in order.

30:05Gui Seiz:And also then once it's pushed to 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, you know, kind of processes like all the way at every single step. And it just created a lot of friction for me. So I wrote this slash ship skill that I use all the time. So inside of 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 we automatically insert like bootstrap scripts in order to 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.

30:50Gui Seiz: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 dev box command that I'll talk about in a little bit. But this is how I manage the dev box itself and create new skills via it. So I have a skill for creating more skills, as well as a couple of just really popular ones that I use all the time, such as addressing PR feedback and the slash 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 the repository.

31:29Gui Seiz:These are what I refer to as preflight checks. 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 commit, as well as running lint querying for various packages to make sure that we're correctly running the Bazel build commands. We use Bazel for Bazel for 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 build kite for our CI loop and that also gets checked. So once the build either succeeds or fails, the script will then check build kite for whether or not the logs represented anything.

32:15Gui Seiz:And if there are minor fixes like linked issues or otherwise, it'll automatically push another commit in order to fix that particular, like more minor issue. And it'll do this up to five times with a one hour timeout waiting for CI. There's also a handful of things that are, you know, as things as I went through, like encouraging and not to force push just in case.

32:38Alex Kern:That's the one I was looking at.

32:41Gui Seiz:overwrites 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, you know, pushed to our repository, I do slash ship and then walk away from my laptop. And it usually takes it from there.

33:02Alex Kern:So one thing I want to 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 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 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 roll out those best practices.

33:53Gui Seiz:Absolutely.

33:54Alex Kern:Yeah. Awesome.

33:55Gui Seiz:It turns out 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 brought into people's workflows by default.

34:07Alex Kern:Amazing. Okay, well, this has been great. Just to recap what we saw, we saw Codex to Figma to Cloud Code to Cloud Code to Figma to Figma. 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, encoding some of your capabilities into things like MTP, so then everybody can access this stuff.

34:48Alex Kern:So I'm going to ask you a couple lightning round questions. You both have to answer. They're clear rules, so you cannot say it depends. I'm going to start with the one that I started this episode with, which is Guy, code first or design first? If you had to pick one. Design first. I love it. And Alex?

35:06Gui Seiz:I'd probably pick code first.

35:08Alex Kern:And this is why Figma had to make this MCB because there will never be, never be agreement here. You know, my second question for you all, I mean, Guy, I'm interested in your opinion, is are there any things around AI, not let's put software and design systems, all this stuff aside, that you're really excited about as a creative, as a designer, that you hope people are going to start using more or talking about more?

35:37Gui Seiz:Honestly, it's just been a platform for me to just learn more about something that I was always curious about. And I hope that people see the educational and the upskilling aspect of it and not just outsourcing any potential capability. because it happens across everything. Anything you wanted to get a little bit deeper on, you can now do it without having to troll through links. Like it's just there at whatever moment you need it. And I think 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 specifics that I want to learn about.

36:19Alex Kern:Alex, what about you?

36:20Gui Seiz:Yeah, I mean, I love going really deep. We have a massive code base at Figma. And so I love asking all of the crazy questions that I had always wondered about. 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, what the origin was. And it came back with a really good story about how that came to be. It got renamed multiple times. That contributor has since left the company many years ago. So this was kind of lost in the ether. But now all of this lore, honestly, from the company is actually embedded inside of the code base.

36:56Gui Seiz:And I can find it now.

36:59Alex Kern:I'm going to bridge both of your 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 OpenClaw, now named OpenClaw, came out. And everybody's so mystified. They're like, it's working overnight and it's doing all this stuff for me. I was like, I'm just going to 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 an agent and what were some of the kind of new things that it had built.

37:31Alex Kern:And so that's another thing that I recommend, either going deep in your 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 really cool. Okay, last question. Alex, I'm going to start with you first because we had a tiny bit of friction with clawed code. I saw you sweat a little bit. When AI is not replying how you want, it's not doing what you want, what is your prompting technique? Do you just slash clear and kill it? What do you do?

38:08Gui Seiz:That can work, but I find that the more successful one is either cursing a little bit in the prompt. I am somewhat ashamed to admit that that's extremely effective. But the more common one I use now is that my boss is mad at me and it seems to work pretty well. It kind of sympathizes with you and it's kind of cute.

38:33Alex Kern:You know, I sometimes say about this, about parenting. I tell my kids, I only yell at you because it works. Look, I don't want to yell at you. But sometimes it's the only thing that you guys listen to. Guy, what about you? Are you also, do you also?

38:49Gui Seiz:I have to take the gentle parenting route I'm terrified of the robots taking over and reading through my prompt history I'm still on the make no mistakes camp

39:00Alex Kern:I am very polite I kind of go with like no I sound really sad I'm like no or I do sort of growth mindset parenting where I say I believe you can do it I believe you're capable of solving this problem just apply yourself you can do hard things Alex Gee this was so great where can we find you both and how can we be helpful to you uh you can find me on x i'm on

39:23Gui Seiz:x as kernio amazing and you can find me on uh any social media platform uh as g size g u i s e i z and just generally if you at figma chances are i'll probably be reading it amazing well it was

39:37Alex Kern:so great to have you i am so excited i've got i've been very inspired about how we can manage our YouTube thumbnails through code and figma. So I'm going to go experiment with that. And I appreciate you all joining How I AI.

39:49Gui Seiz:Thank you for having us. Thanks so much for having us, Claire.

39:53Alex Kern: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 howiaipod.com. See you next time.