# Code to Canvas: Codex | Figma ## Метаданные - **Канал:** Figma - **YouTube:** https://www.youtube.com/watch?v=peHL-0u-pVs - **Дата:** 12.03.2026 - **Длительность:** 8:05 - **Просмотры:** 4,972 ## Описание Learn how to bring your coded designs from Codex into Figma for further exploration and iteration on the canvas and then send those design updates back to code. To learn more, check out our developer docs here → https://developers.figma.com/docs/figma-mcp-server/ ____________________________________________________ Find us on ⬇️ X (formerly Twitter): https://x.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma TikTok: https://tiktok.com/@figma Figma forum: https://forum.figma.com/ ## Содержание ### [0:00](https://www.youtube.com/watch?v=peHL-0u-pVs) Segment 1 (00:00 - 05:00) Hi, this is Anna from Figma and I'm going to show you how you can bring your designs from code into the Figma canvas and then push those updates back to code. As I'm filming right now, there's currently two different ways that you can do that. One is from Cloud Code and the other is from Codeex, but we're going to continue to uh add on additional ways that you can bring your code into the Figma canvas. So, I'm going to quickly go through first how you can start out within Codeex. Looking here, I have got my design uh previewed up in local host. Going into codeex, I've already got my Figma code file opened up in here. And all I have to do to send it over to Figma is first make sure that we're setting up the Figma integration. You can do that in a couple of different ways. Uh first of all, if you look on the left side panel of Codeex, you can see there's this option called skills. Within skills, you can see a bunch of their different uh recommendations. And then one of them here is called Figma implement design. So I can select that in order to enable it. Or I could also go into settings, navigate to MCP servers, and then from there you can see Figma is in the list of recommended servers. So I'm going to go ahead and click install and authenticate. Cool. You can see here, this is the link to the URL to access the Figma MCP. And I think because I already went through the authentication process, this is already working fine for me. But, uh, if this is your first time, it'll basically prompt you to open up a new browser window and verify through your OOTH. All right. So, going back to my app here, um, I'm just going to prompt it to send my design to Figma. So, I'm going to say send my app to Figma. And while it's thinking, uh, let's just talk a little bit about the Figma MCP. So, essentially, MCP servers are how you're able to bring information from different applications to your AI agents. In the context of Figma, our MCP server allows you to bring context from Figma to your AI agent such as design context like you know what components are using, what variables are using, what's the layout of things. And in addition now too, we're also able to bring the context uh from your code into Figma. So you can see here it says it's sent to Figma. So let's quickly swipe over to Figma and see how that looks. And yeah, you can see it's gone ahead and dropped my code prototype design directly into this Figma design canvas and everything is selectable design layer. So you can see here we've got like a frame of my recipe scroll. You can also see that it's applied auto layout to some of my frames as well. And yeah, I can choose to edit things like maybe the spacing for instance uh through direct manipulation. So, in addition to sending entire screens though, I can also choose to send just parts of my design. Maybe, for example, with the filtering, I want to be able to focus specifically on improving this filter menu. I'm going to click select element. Uh, hover over the filter and it's going to send that over to Figma. Also, if I wanted to work on maybe refining the design of other screens that aren't just the initial starting point screen, um I can even navigate. So, I'm going to navigate to this recipe screen. And let's go ahead and just send that entire screen design over. Awesome. And yeah, you can see it's gone ahead and dropped these into Figma as editable design layers. That's how you can send your designs that you've prototyped in code over to the Figma design canvas. I've already got actually some different explorations and iterations around, you know, just different ways that we can approach filtering. Um, looking at my different uh explorations, I'm really feeling this one just because of the way that we have the information hierarchy as well as I've added on this additional option for users to reset their filters. So, what I'm going to do is you can select the design and right click and go to copy paste as and copy link to selection. You can also see here command L is the shortcut for that. But I'm going to copy the link to this. Great. And let's go back to codeex. And in order to now update my code with my new design, I'm just going to prompt ### [5:00](https://www.youtube.com/watch?v=peHL-0u-pVs&t=300s) Segment 2 (05:00 - 08:00) it to update the filter panel uh to match this new design. Paste that and let it go. So basically what it's going to do is you can see here it's calling the Figma MCP get design context. So, it's starting to pull in that information from Figma that you would normally be able to get by inspecting through dev mode, but now it's automatically feeding that information to codeex. Um, and then you can see it's starting to explore through my different code files that I've got here. So, it's reading that filter panel file as well as the top bar cuz that's how you can access the filter. Um, and yeah, looks like it's identifying that there's some differences in terms of what's in my design to what's in code. So, it's saying it needs to restyle that filter panel to match my Figma structure and then also expand the filter options because I've added a couple of new additional things. And then it's also identified that there is a new reset action that I want to introduce. But while it's thinking, just a couple of best practices around how to kind of get better outputs when trying to bring information from Figma directly to your AI agents. Um, and one of the best practices is of course to have an good design. So, naming your layers, using auto layout where possible. If you are using a design system, you know, utilizing components and variables is a really helpful way about creating a nicely structured design. Um, that's going to make it a lot easier for AI to interpret and also avoid distractions of maybe other unnecessary details like invisible layers that have no impact on the design. um getting fed to the AI. Currently, we don't really have a way of uh directly translating your code components to design library components when bringing them from code to Figma and vice versa. Um but it is something that our team is working on. So, make sure to stay tuned for any upcoming updates on that. But, uh yeah, taking a look here. So, it said it's updated the filter panel to now match my design. It's telling me a bit about what it's changed. It also added that reset functionality. Um, and then it ran npm built. So, let's go back to uh previewing our code prototype in local host and see what that looks like. All right, let's click on the filter option. And yeah, it went ahead and updated that to look like my new design, which is pretty cool. Thank you guys so much for watching how to bring your prototypes from Codeex to Figma and back to Codeex. Uh to learn about how to do this process with claude code, check out part too. --- *Источник: https://ekstraktznaniy.ru/video/17767*