# How designers prototype using the Codex app and Figma

## Метаданные

- **Канал:** OpenAI
- **YouTube:** https://www.youtube.com/watch?v=P7HXxl14dCA
- **Дата:** 04.02.2026
- **Длительность:** 1:55
- **Просмотры:** 45,391

## Описание

Ed Bayes from the Codex team shows how the Codex app pairs with Figma out of the box: prompt with a Figma link and have a working prototype in minutes.

Takeaways:
- One-click install for Figma with the Figma skill.
- Pasting a Figma link is enough to kick off a strong first pass.
- Codex can pull from your design system and get 80-90% there.
- Interactive prototypes are key for building dynamic behavior.

Design-to-code is faster, and AI UX gets easier to stress test.

Chapters:
00:00 One-click MCP install with Figma out of the box
00:14 Paste a Figma link into Codex
00:38 Watch hot reload progress in real time
00:53 Compare against the original design system
01:02 Polish the last 10-20%
01:25 Why this is faster for AI-driven UI
01:36 Stress test with interactive prototypes

## Содержание

### [0:00](https://www.youtube.com/watch?v=P7HXxl14dCA) One-click MCP install with Figma out of the box

The very cool thing about the app is we have like a one-click install with MCP. You know, uh Figma is there out of 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 um alongside the app. We've been partnering with Figma and it

### [0:14](https://www.youtube.com/watch?v=P7HXxl14dCA&t=14s) Paste a Figma link into Codex

basically just like helps the model use it a bit better. So, I can just take um take a link uh basically copy the link from what I'm working on in Figver. So, like we can open it up here. So, I'll go ahead and I'll just take this link here. Uh, and I'll just paste it in here and then I'll click go. So, this will work a little bit. Um, we can have a look at

### [0:38](https://www.youtube.com/watch?v=P7HXxl14dCA&t=38s) Watch hot reload progress in real time

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 to set up. So, you can kind of monitor as codeex is going. — Pretty good. Let's have a look. Let's have a look at the original design. So

### [0:53](https://www.youtube.com/watch?v=P7HXxl14dCA&t=53s) Compare against the original design system

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 is this was here before and you know, it's use

### [1:02](https://www.youtube.com/watch?v=P7HXxl14dCA&t=62s) Polish the last 10-20%

the same ones. And this is a good example of where like, you know, it like 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 of the styling. I would make it look a little bit, you know, more like this chat on the left. Um, you know, I'd probably like implement like a click out here. But like these are really like Yeah, it's getting like 80% of the way there. — Mhm. [clears throat] — And that's helping me move like I don't know like two three times as fast. So um

### [1:25](https://www.youtube.com/watch?v=P7HXxl14dCA&t=85s) Why this is faster for AI-driven UI

it's just like a very cool way to pro extremely quickly particularly in a world of LMS where the output of LMS is so dynamic and nondeterministic. If

### [1:36](https://www.youtube.com/watch?v=P7HXxl14dCA&t=96s) Stress test with interactive prototypes

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 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 it's just like an incredible prototyping tool to get started.

---
*Источник: https://ekstraktznaniy.ru/video/11133*