Figma's "Code to Canvas" Will Change Lives

clot code to Figma. This is probably the biggest news both for product designers and also for developers. [music] The bridge between designing and developing has shortened again. So with this new update, you can code something and then send it to Figma and then the designer can change the design inside of Figma and then send it back to Claude. It it does solve a big problem that a lot of people are starting with the prototype, starting with the vibecoded prototype which doesn't care about design, which just gets the prototype up and running. And then it's a way of how do we now synchronize that process of applying the design and then getting it back onto the the vibe coded prototype. And this solves that. What you see on my screen is an app that I'm creating uh for web flow users, potentially for more people uh to manage your website's images uh from this app. I've just vibe coded this. Uh there are many design issues with it though. I there are many small things that I want to change and prompting it is just like painful. Uh, with this new update, I just asked Claude Code to um send all of my screens and all of the different states, like the hover states, the select states, everything, send it to Figma. And here's the the result. It just sends everything to to Figma. You click in there, you can you can change things. Is identical? Yeah, pretty much. It's not perfectly identical. So, here's how it works. So, here I have um my claude and I I just want to say do it again. Do it. Is is this Claude code? Presumably it uses Claude code, Claude desktop, Claude probably cla to be honest. But it's just an MCP, right? Yes, this is an MCP and a plugin. It it opens my project in a new tab and you see this select element to capture. And now I [music] can like hover over these elements. I can tell it to directly send it to my Figma or I can do it like this. I can let's say if I if I'm interested in by the way look like these views. If I'm interested in one of these or this section, I can just click it and now it sends it to Figma. We design it and once we design it, here's something cool. So this is something very simple but I haven't seen anybody talking about it. When you're in Figma you can go to Figma the the dev mode and here under the MCP you have this copy example prompt. It's nothing crazy. It just says uh implement this and it it it has this link that is like a specific link to whatever you click on. I copied the prompt, gave it to Claude, and it did it perfectly. You need to pick your battles because some apps need you to think about the UX. Maybe there's something really complicated about it. Maybe there's very specific needs. Maybe it needs to follow something that has already been created for whatever reason. Yeah. Whereas there are tons of projects that are going to benefit from just starting out with a AI coded a vibecoded prototype that the the client can actually use. It makes so much more sense for so many projects just to do that and then think about the design later on. Case in point is the project you and I have been exposed to recently. You know where where we will start with the vibe coded prototype. They can see that it works. They can use it. And it's like, okay, now while you're using it, we're going to go and take it and we're going to design the heck out of it. You know, how can someone get up and running with this? We have this Figma plug-in thing that is the the code for it is here. You just paste in and now um you have to also authenticate it. That is also important. You authenticate your uh Figma workspace and you're good to go. You you connect these two and you can now send things between these back and forth and you can even like design potentially with this because it is the MCP. You can generally use it because the MCP is there to communicate from Claude code to Figma, right? That's the back and forward. It's the push and pull between claw code and Figma, which by the way, you need a paid Figma account to access dev mode to access the MCP. So there's the connection between the two. And I think the plugin is the thing that springs up a server of your app and allows you to click around. That's what I reckon. Yeah. Well, from here it says Figma cloud plug-in directory. So I I think this is probably just coming here and installing the MCP and maybe more. Maybe. Maybe. Yeah. So as you see here, it worked. It brought the the UI part that we clicked on. Nice. And that's pretty much it. it um I already asked my AI to put every state in like one view and from here I'm like entering this phase of like refining my product. Why is this useful? A lot of people might think that the process of designing it is going or like building an app it is going from design to dev just like that. that that's probably what people think like you design it in Figma and then you build it. But that's like at least in my experience it's pretty much never the case. Uh what you do is you go from dev to design. You build something and then you fix the designs and then you go back to dev and then you go back to design and then you do the same thing over and over again. And this is what I'm calling like this zigzag approach that you're [clears throat] constantly like passing between these two states. And that's why like the the best people in space are in this space are like the the devs who understand design or like the designers who understand de like connect this or like [music] shorten this bridge. Um but yeah and this tool is making this much simpler like it to to me it seems like with this developers and the de designers don't have to do much of like manual work anymore. This is more like the AI is taking care of like the leg work like the the layouts, the layers, like the simple stuff and the designer can come in with like strategic thinking for the flows. Maybe the components, maybe there is like something about accessibility, maybe there's something about creativity. So the designers can focus on that instead of the layers or naming the layers or you know creating the outer layout. It's already all being created. Same for the developer. That's why I'm so excited about it because it's to me it's not replacing my designer like my actual designer in my team. This is like enabling him. Now I can give him work and I feel like I I feel like it's so much easier for me to give him something and he can just take it and start working on it instead of me thinking oh if I give him this task it's going to take so much time to just set it up or just to understand it or like just to list everything. Now it happens all all in like minutes. This is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.