I Tested NEW Figma Agent with Claude Code 🤯

0:00Okay, agents meet the Figma canvas. So I decided to use Claude Code with Opus 4.6 and let it loose. And this is what has happened. Okay, so this could be big. We'll see, we'll give it a few tests. Figma has announced a Use Figma MCP tool, which lets you use either Codex or Claude Code to be able to generate designs inside of Figma

0:24using your design system. So what I'm gonna test is I'm gonna use Material UI and we're gonna try and build something using Claude Code today. We'll go from probably the easiest to a little bit more complicated one. So just looking through the announcement, I think it's still in kind of an early preview, but you can use either your code or images to go and generate different designs inside of Figma, obviously respecting all the auto layouts

0:50and your design system. And if you guys wanna read more about this, I'm gonna put a link or two in the description. So head over to Figma blog and yeah, just familiarize yourself because this could be a big deal if you are still using Figma. Plugin itself comes with a bunch of skills, which will be definitely useful and will tell Claude Code or Codex how to actually work

1:13with the Figma canvas. Okay, so how do you set this up? Obviously you have to have either Codex, CLI tool or Claude Code and I am gonna use Claude Code in terminal. So I'm gonna just paste that in and see what happens. I have not tested it before. So it's gonna be first time for me and you.

1:31So that has been successfully installed. So the next step would be to run Claude Code. I'm gonna do that. What else do we have? We have the plugin as well, which needs authentication. So let's actually go and play with it, see what we can do. Oh, so in Figma, we are using Material UI, community version. So if you see there are no pages in Figma

1:51and we have a bunch of components here. So what we are gonna try to do is the first prompt, no image, no context, just a simple prompt too. What I'm actually asking is to create a mobile app using the design system. So let's send this off and see if something happens. So far it looks promising.

2:09We'll see how the output is. Okay, sweet. So it took six minutes and this is what we got. Obviously it's not impressive, but there was no, you know, a comprehensive prompt. So it was guessing. What I wanna do is I wanna see if it is actually using the components itself. So it's auto layout. Okay, so one thing I've noticed, it is actually not

2:31using the actual components. So we might wanna retry this with a different design system because if you look at the elements, the attributes properties are gone. These are just individual elements. None of them are components. At this point, the component library that I have here, it does have the avatar component. So if I were to drop this, this is the component it should have been using in this generation

2:54with all the properties and so on. It hasn't done that. So we've got iOS and iPad OS 26 UI kit loaded. Again, we are pointing to this design file and I'm asking it to design three screens for the weather app. So hopefully it is going to work. Okay, so it cooked for 12 minutes. You guys be the judges of

3:17the quality of the generation. And if you would be quicker than 12 minutes. Anyway, let's have a look at this. So we've got one component here. If we open it in the design system, it should take us to the exact component. Yeah, that's correct. We're just looking at the layers panel. We only have the status bar component and then the home

3:38indicator as the component. So again, a kind of a mixed bag of components and new UI elements. In this case, we're just gonna use the low fidelity wireframe. And we're just gonna paste it into Claude Code and ask to generate that using our design system inside of Figma. So again, we've got our iOS component library here.

4:00Again, all our components. Oh, so it finished. Let's have a look at this. Okay, so I was expecting more. I was expecting that it is actually going to try and use the components or it's gonna look at the low fidelity wireframe. And then, so this one here and actually, make it more beautiful, I guess. But when you look at this and then when you go to

4:25Figma, what do we have here? Okay, so we've got the text. The text field is a component. I am not entirely sure why there is so much hype now online about this. Hey guys, I'm just giving you what I'm experiencing using this for the first time. You can see there's one component. Everything else is just

4:44text, shapes and all that. So is there value in this? Probably. This took 10 minutes again, almost 10 minutes. I do have the actual components. It's a library that is in this design file. So in this case, I'm gonna use cursor because I can see the browser as well. And we are gonna use a Vite application.

5:07Very simple one, just one page. This was put together by Claude in like two minutes using the Material 3 design system and components. So these are actual components in code. I wanna see how the code component is gonna get translated into the Figma design. And if Figma and this plugin and MCP with the skills is gonna respect the

5:29actual components in Figma. Okay, simple prompt. I'm just asking to convert this web application, just one page web application into Figma design file. So let's have a look at the Figma design. Okay, so first impressions, the color, I think it's correct. Again, we will look at it side by side in a second. It's obviously not aligned. Like all these elements

5:53are too tall for sure. By the way, this took 12 minutes. So you guys know. Let's actually see if these are real components. So it is a component from Material 3 design. So that's awesome that this time it actually followed the instruction and it worked. So it works way better coming from code to Figma. Although guys put in the comment below,

6:16like why would you even need to do that? Why would you do that? I still don't get it. I still don't understand why people would want to do that. This section looks broken, but let's see. No card components. So is this just the button component that it used? Yeah, pretty much. Which doesn't make any sense because the Vite application uses

6:37components from Material. So it should work. Okay, so let's have a look at both designs side by side. Left-hand side, Figma generated design file with auto layout, which is cool. Right-hand side, something that was generated by Claude Code in two minutes using the components. And obviously it has interactions because it's an application. It is quite shocking how different it is, especially this section

7:02here, the hero section, I guess. It's much cleaner. It's much, much cleaner when it comes to the generation from Claude. On the left-hand side, looking at what Figma actually picked from the code itself, it is not that impressive. Again, guys, 12 minutes to get this. So you gotta be the judge of it, if it's worth doing it. Then the bottom section, again, just aligned and kind of beautiful

7:27what Claude actually did. In terms of Figma, like fixing it, just such a waste of time. Again, I think I'm gonna get a label that I am against things that Figma does. But listen, no hype. I'm just giving you what I'm experiencing. And I really don't know why would I use that? Why would anyone want

7:48to go from code to Figma? Because imagine in code, you can't be using your design system, your real components. So why would you ever need to go to Figma to generate designs? Is it about like being pixel perfect? But then again, like if you look at this, what's pixel perfect about this? There you have it, guys. Right-hand side, real code, real components,

8:10Claude Code, Opus 4.6. Left-hand side, Figma design. Okay, just to quickly summarize, the setup was very easy, getting the plugin installed with the skills and the agent and so on. The generations, I am really not sure. I think just a gimmick. It is just a gimmick at this point. Anyway, guys, if you are looking for no hype, side-by-side reviews,

8:31subscribe to the channel. I really appreciate all the support and all social media platforms, especially on YouTube. So thank you so much, and I'm gonna see you in the next one. Hopefully it's gonna be something we can actually be proud of. So thank you.