The new way to use Figma?

Is this the new way to use Figma? Most designers use Figma the way they have been for years, but then jump into separate AI tools on the side. But there's a new update that changes that completely. Instead of working from screenshots, AI can now plug itself directly into your Figma files, read your design tokens, your layer structure, components, and even write directly back into your file, essentially carrying out a lot of that design process for you. It's called MCP or model context protocol. Today, I'm going to break down what that actually is, how to get it set up, and what it looks like to use this as a professional designer. Let's get into it. MCP stands for model context protocol. Think of it as a standardized way for AI models to connect to external tools and services. Not just read data from them, but interact with them, too. Most AI integrations up until now have been onedirectional. You export something, you paste it in, the AI responds with text. The MCP is different. It's a live birectional connection. The AI can read your Figma file and take actions inside it. Creating frames, applying styles, building components, all without you switching context. You type a prompt and your Figma file changes. That's what we're doing today. The setup is really quick. I'll show you the claude code method, which is what I use, but the process is nearly identical for cursor or any other MCP compatible AI tool. From your sidebar, go to customize connectors, which is how most AI tools refer to MCP connections. Hit plus, browse connectors, then search for Figma. Then if you see two options, choose the one with the description starting with the Figma MCP server. Then click install. Then once you sign into your Figma account and allow access, Claude is now officially connected to Figma. That's the whole setup process. Now let's actually use it. For the first demo, I want to show you something that you never would have expected 2 years ago. Prompting AI to design an app inside your Figma file. I've got a blank Figma file open and cloud code running with the MCP connected. I'm going to use a super thorough prompt. Design a mobile app UI for a personal finance tracker. The app should have a dashboard screen, a transaction list screen, and a budget screen. Use a clean, minimal aesthetic, suitable for a BTOC app. But then I'll give it some specific guidelines about the styling that I want. Dark navy surfaces with white text and a green accent for positive values and red for negative. Create all three screens at mobile frame size 390x 844. Use auto layout and name all layers clearly. And then something that Cloud will usually ask you for is a link to the actual Figma file that you want it to design in. And then I'll hit prompt. One thing to note is that the Figma MCP is still a relatively new feature and it's definitely far from perfect. And I found that for example, if I don't tell to use auto layout strictly, it won't. It'll just design loose frames with absolute positioning. So especially for this first prompt, it's important to be pretty thorough so that the rest of your project has a good foundation to build on. After a few minutes, your agent will probably still be initializing the design process and getting fully set up inside Figma. That's okay. It's not a lightning fast process, and it does take a bit of patience sometimes, but because of the newest cloud code update, you could open another session on the side and run a parallel agent while Claude is also still working inside Figma. Now, we're seeing our app design start to come to life. It's built our dashboard screen, and then it's also just built our transaction screen a few seconds later. Now, it's working on the last screen, budgets. So now it's designed all three screens and it's doing some things pretty well, but some things not so well. We can see in the left sidebar that all of our layers have auto layout applied correctly. This is pretty much essential inside Figma so that our designs are responsive and dynamic when we need to make changes. It also followed my directions pretty well overall using green all throughout as the positive accent color and red for the negative accent color. But like I said, Claude Code and the Figma MCP are far from perfect yet. It messed up pretty badly on this chart and some minor things like there's not quite enough bottom padding on these cards. So, there are a couple things we can do right now or at the beginning of your design process to help Claude design significantly better. Let's add a skill that turns Claude into a better designer. Something I recommend you do is look up Claude front-end design skill. Go to this GitHub link. Should be one of the first results that you see. Open this drop down in the upper right and hit download. Then head back over to Customize Skills. Hit plus, create skill, upload a skill, and then drop in that file that we just downloaded. Now, we have that skill installed, and it's going to give Claude guidance about design thinking, front-end aesthetics, guidelines, and much more. Now, to go even further, since I'm not totally satisfied with our design at this point, I can give Claude some design inspiration. Here's a design that I'd like Claude to match the layout and styling of. So, I've attached it as a prompt, and I'll say, "Let's improve this reference/frontend design. " and the design I attached as inspiration. This prompt is pretty simple, but it should be enough to help Claude come up with a solid iteration of our first pass. And now we already have three screens that are on a much better track just from using that front-end design skill and attaching some inspiration. Like I said, the Figma MCP is not perfect yet, but when you compare designing three screens from scratch and Figma alone to having Claude Code knock out a first draft for you in 15 minutes, it can make a massive difference in your design workflow. So now here's where it gets really interesting. We've got the

app designs. Now let's have Cloud generate a design system from them. Color styles, typography, and a component library directly inside the same file. Based on the three app screens in this file, generate a design system page. include a color palette with all styles used, background, surface, text, accent, a typography scale with the font sizes and weights applied in the UI, and a component library with reusable versions of the card, button, and list item components. Organize everything clearly on a new page called design system. Then I'll add a little bit more guidance. Once you've created all of the color and text styles, make sure everything in the UI has those applied, not hard-coded hex values and pixel values. And now we have a full design system built automatically from the design decisions we already made in the UI. The color styles match the screens. The typography scale is extracted from what we actually used. And we have our collection of components, all with auto layout applied, not just grouped frames. Figma has even taken all of these color and text styles and created native text styles and color styles over here on our right sidebar. Check that out. We have all the colors that we used in our UI listed right here with actual names and categories. And if we go back to our UI and select something in our selection colors, we'll see that every element in that frame has those actual color styles applied. Same with all the text layers in this frame using those actual text styles that Claude Code created for us. So, I want to be straight with you about where this workflow shines and where it doesn't because it can drastically speed up your workflow in some areas, but here and there it can actually slow you down and use a ton of tokens in the process. Here's where the Figma MCP is genuinely strong. Scaffolding screens fast when you have a clear brief. Extracting and organizing design systems from existing work. Repetitive component generation like building out a set of button states, card variants, and icon frames. Applying design tokens consistently across a file. And lastly, renaming and organizing layers. Now, here's where you still need to drive the design process yourself. Creative direction. Cloud will make safe, competent choices, but distinctive design will still come from you. It can also struggle with complex auto layout logic here and there. So, sometimes you'll find yourself needing to make manual fixes. If your UI needs any micro interactions and animation, that's where Claude and the Figma MCP are going to start to break down a bit as they don't have that capability built in super strong yet. Lastly, you'll usually need to bring your design skills to make the final polish. The kind of details that make a design feel very thorough. Think of it as a very fast, very literal junior designer. You give it a clear brief. It executes quickly. You review it, redirect where needed, and bring the craft that makes it great. The Figma MCP is one of those tools that changes how you think about what a design session can look like. You're not just using AI as a brainstorm partner or a code generator anymore. It's working directly inside your primary tool, building with you in real time. So go set it up, run a few prompts, and see how it fits into your process. The setup takes less than 5 minutes, and the first time you see it build something inside your Figma file for you, you'll immediately see the value of it. Thanks for watching, and we'll see you in the next video.