How designers prototype using the Codex app and Figma

The very cool thing about the app is we have like a one -click install with MCP, you know, Figma is there out of the box. So it just takes you into

the box. So it just takes you into Figma, you just log in and then you go back and you can use this Figma skill that we're releasing alongside the app. We've been partnering with Figma

app. We've been partnering with Figma on it and it basically just like helps the model use it a bit better. So

I can just take a link, basically copy the link from what I'm working on in Figma. So like we can open it up here. So I'll go ahead and I'll just take this link here and I'll just paste it in here and then I'll click up.

So this will work a little bit. We can

have a look at what it's doing while it's going and this will, you know, just kind of refresh in real time. And

this is the magic of using like a hot reload. Yes, so you can kind of

reload. Yes, so you can kind of monitor as Codex is going. Pretty

good. Let's have a look. Let's have a look at the original design. So this

is the original design. Yeah, it's

used my entire design system as well.

So these are buttons from the design system. You know, this was here before

system. You know, this was here before and, you know, it's used the same ones. And this is a good example of

ones. And this is a good example of where like, you know, it was like 90 % of the way there. So I would just maybe like remove a few of these borders. You know, I would adjust some

borders. You know, I would adjust some of the styling. I would make it look a little bit, you know, more like this chat on the left. You know, I'd probably like implement like a click out here. But like these are really

out here. But like these are really like, you know, it's getting like 80 % of the way there. And that's helping remove like, I don't know, like two, three times as fast. So it's just like a very cool way to prototype extremely quickly, particularly in a world of LLMs where the output of LLMs is so dynamic and non -deterministic. If

you're designing for AI, it's very hard to do it in these static figures and other things like this alone.

They're a great way to get it started.

But ultimately you want to stress test it, which is why we've built Interactive Prototype so that you can see all these edge cases. And this is just like an incredible prototype tool to get started.