# Claude + Figma MCP Complete Workflow | 3 Months Experience!

Channel: AI Design Professor | Nehmat Gereige
Video: https://www.youtube.com/watch?v=sUr36TBmC8c
Duration: 25 min
Language: English
Words: 4274
Transcript page: https://viewrankai.com/tools/youtube-transcript/sUr36TBmC8c

---

[0:00] After three months of using Claude with the Figma MCP, there's so much that I have been learning that I want to share with you. Starting from the new setup for those of you who are getting started. I also want to show you how I use the Figma MCP to vibe to code to generate interactive prototypes to test with my users starting from Figma designs. And lastly, I'm going to show you how to vibe to vector in your design workflows where you actually get started from an idea, send multiple iterations using claude inside your Figma file, so you can control, refine, and move to a final solution. I also show you how I'm using an AI design sprint of 5 days to move very quickly

[0:47] from idea to execution. So, if you want to know how to use Claude and the Figma MCP in your real workflows, enterprise SAS work, this is the goal from this video. I'm showing you my whole workflow and why I think it's still incredibly valuable to leverage Figma at some point of the design process. Let's dive in. So, the first thing I want to go over is the setup for the Figma MCP with Claude, which is much simpler than 3 months ago when we had to do it. If you are already set up, feel free to skip to the next chapter. But if this is your first time, you are in luck

[1:24] because 3 months ago when we had to do this, I had to show you how to use the terminal. Today, it's so much simpler. The first step that you would have to do is download Claw Desktop. I'm providing you a link in my description below that will allow you to download Claw Desktop either for MacOss or for Windows. Once you download it, it will be a DMG file and all you would have to do is move Claude to your applications folder. You doubleclick, open it and of course you will need to go through some authentication. Now to use the Figma MCP, you need at least a Claude Pro account

[2:06] because you need to use Claude code and that is inbuilt with the Figma MCP. Now, if your intention is to use Claude within your terminal, then I highly recommend you follow my previous setup and if you are a designer or a product manager, I highly recommend that you use Claude desktop. It's much more intuitive and you will be able to do almost everything that you need from this chat interface. There's chat, code, and co-work, but most of the time I use chat because it saves me on my token usage. Now assuming you have your claw desktop, let me show you how to connect the Figma

[2:44] MCP. You need to come here to customize. This is where you have access to skills and connectors. If you don't know how to use cloud desktop yet, please watch the other videos I created for you where I teach you about skills, about cloud co-work, all these differences. But for now, you need to come to connectors and this is where you would connect different tools that you have. Come to search and search for Figma. You will see for me I've had it connected before. I just

[3:11] disconnected to show you how to do this. And once you find the Figma connector, click on connect. And this should open an authorization window in your browser that looks like this. So what you will have to do is click agree and allow access. And once you've done that, you will be prompted to open cloud once again. So when you look at your connectors, you'll have Figma over here. You will see inside the Figma plugin or the Figma connector, you have all the different Figma tools that you need. There are read only tools, there are interactive tools. I am giving it always allow because I know that whatever actions I want to do here, I want to give them permission. It's up

[3:56] to you. You can leave it to the default earlier because you haven't used it yet. And that means it will ask you for certain permissions when you work with the Figma MCP. And this is all the setup that you have to do. Fortunately, they've updated it to become intuitive. You don't need to download cloud code separately. All these things that we've had to do before are right now resolved by simply downloading the claude desktop and the Figma connector being added. In order for you to understand what we're doing or the different workflows in the Figma MCP with cloud integration,

[4:30] it's very important that you know what are the different Figma skills that you have access to. Again, I'm giving you a link in the description for the documentation from Figma Learn where you can go dig into each one of these skills and understand it deeper. I also have a video for you where I go through each one of these skills and I explain it in details. But for now, I want to focus on the Figma skills that are most essential to designers who are still wanting to work within Figma. And those are Figma implement design and Figma use. And it's very important that you understand the difference. The first one I'm going to show you is Figma implement design. The

[5:14] target of Figma implement design is code. That is the deliverable that you will get. It will generate HTML. Now let's talk about real scenarios where you as a designer would still need to vibe to code. So the first scenario if you've had a design already existing in Figma and you wanted to make it interactive enough so that you can test it. Some of us have tried to do this in Figma make but unfortunately there were so many limitations. So that's why we're doing this with Claude and the Figma MCP. To show you this example, I'm using a SAS dashboard created by Ireina Lohush from the Figma community. Let's say that this is your design. Now you want to test it. However, you want

[5:58] to make it more interactive in such a way that for example, if I doubleclick on one person, it will open on the side a right side panel. But I haven't designed for that yet. And I want to try to do that with claude. For the Figma implement design, you at least need read access. If it's your developer with a dev license, they will be able to perform the following task. Important tip when you come to claude, make sure to work in projects because you will see as you start working with it more often, you will have endless recent chats and it will be very hard for you to find different

[6:33] things. So make sure to create a project. So in my case, I'm creating a project called SAS workflow and giving a simple goal here. And now if I were to pin this project, it will appear right here. In the first chat, I am going to create the screen that we just saw in Figma using the Figma MCP. However, I'm going to show you a comparison of doing exactly the same thing with the same prompt but using only a screenshot just for you to see the level of accuracy and how different it is when you use all the context from the Figma MCP because a model context protocol means Claude

[7:14] can speak the language of your Figma file. It can read everything. It can read the tokens. that can understand the structure of the file which will lead it to better accuracy. So I'm saying in the first prompt I want you to see how simple and direct my prompt is. There is no please. There is no thank you. There is no I'm thinking can you do this for me? Just learn to be very direct in your prompts. And I know it takes practice but an LLM which is what Claude is. It's a large language model. The more direct and specific you are with it, the better results that you will get. So I

[7:52] already know I wanted to implement this Figma design and I want it to be an HTML interactive file because at the end of this chat, I want to be able to click on opening that HTML file and see it live. So let's do this. While this is running in the same project, which is my SAS workflow, I'm going to start a new chat right here. copying the same prompt but what I will change is I'm not going to say this Figma design I'm going to say implement this design as an HTML interactive file and rather than providing a Figma link we want to provide a screenshot so I'm clicking command

[8:32] shift4 on my Mac in order for me to take an exact screenshot of this design I am adding a file which is the screenshot that I just took and I'm saying implement this design as an HTML interactive file. Now, in the case of the Figma MCP, you will clearly see there is a Figma icon right here which tells you that Claude has used the Figma connector in order to get your design context. So, this is the tool that is embedded within the skill Figma implement design. However, in the case of the screenshot here, you will see it's leveraging a front-end design skill that's embedded within cloud code. Let's compare the results. So, first let's look at what was generated with

[9:20] the screenshot. You will see you have an HTML file here. And if you click on it, it will open it with your browser. And it did a very decent job just with me telling it make it interactive. It's already allowing me to click, select, unselect. I can see there's a live timer here. There's statuses. But how much does it resemble my design? If you look closer, the icons are different. If I were to select this text, this is a work sense regular. However, if I come here and inspect it, the font family is generic. It's a DM sense son serif. It's not very accurate. If you're

[10:00] working with a design system, this is not very accurate to what you're trying to create. Now, let's look at the MCP version, and you will see this version definitely, if I were to inspect it, has gotten my exact font family, the exact shapes and colors that were used. This version has used the icons that I provided it in the file, the same button, the same style of navigation. So, it's definitely much closer to what I have created. Once again, it's interactive. Now, let me get to the point that is actually valuable for designers to use the Figma MCP for because yes, accuracy is great, but that's not your first concern as a designer, right? Like this is what

[10:43] you want your developers to do. But why would you use the Figma implement design? Like we said, you may want to test this interactive prototype or you need some help to make things interactive without having to go do it yourself in the Figma file. So this is when I would start adding instruction. I would vibe to code with claude to create these features. Now we have this HTML built. So I want to be very specific with my prompt and add the feature that I'm looking to create. So, I'm saying when a user clicks a row of information, create a right side panel that should open with

[11:21] more details on each user, the side panel will allow actions like scheduling appointments or editing user info. And here you go. Clot created this. So, let's test it. If I click on one row, it opened a right side panel. And you can see the exact action items that I asked for are provided here for me. There's an option to reschedule. I can even edit the reschedule. Wow, it created the calendar for me where I can select the timing and confirm the reschedule with a notification. This is fantastic considering how tiny is the prompt in my description that I gave it. So, I'm hoping you see the value here. You're starting from a design, but you're adding features here. Features that you

[12:09] can make interactive right away. So you can test. Of course it needs refining. Like for example, you can see the margin here for the table got cut off. So we could prompt clot further to enhance it. But this is a real SAS workflow where I'm starting from something and I want to add features. And that is incredibly powerful, incredibly fast, rather than you going back and having to design it yourself. And most importantly, this feature becomes most significant for designers when you've connected your design system to claude. See, right now we are working in a random project that we created here. But imagine if your code base is the project that you are working from. I've shown

[12:52] you some other videos where we use a design system and we connect it so that every prompt that you create is leveraging components from your design system and creating things. Now you have a readymade fully interactive prototype where you can actually do the work that you want and you can keep refining it. Before we jump into vibe to vector and how you can leverage that so you can push back and create designs in vector inside Figma rather than generate HTML I want to talk to a specific observation I'm having in the industry. I've read this article from the Knack design team where their engineering director is talking about how they've created a whole environment

[13:34] for designers to push back into code. So I want to pause to acknowledge that this is possible. This is possibly the future where designers are pushing back PRs into the code. However, very clearly, their director of engineering said that the developers spent 6 weeks actually building an environment where Claude would only create prototypes so designers are safely pushing prototypes that their developers can leverage. But I want to back up here and talk about my personal experience. I have been running a pilot in my work environments for different teams where we're testing the Figma, MCP, and Claude integration to do a one-week design sprint to move within

[14:18] one week from idea to execution at the speed of AI with a specific timeline where we iterate, vibe to vector, vibe to code, do everything possible so that by the end of the 5day sprint, we have a complete prototype that is ready to test or ready to be handed over to developers after further validation with stakeholders. And one thing that we have been all noticing is that there is a limit to vibe coding or vibing to vector. There's always a limitation where you feel okay this is how far cloth can take you and designers are having that need and that instinct to jump into the file and move things around because this is what we do. And this is where Figma as a vector

[15:04] tool has been incredibly helpful because even if you're leveraging your design system, there are new things that you want to create. Designing is not just about working with limited patterns. It's only those creative designers who are in a flow state that will come up with new things that are enticing and exciting and bring enjoyment and engagement for our users. And we need more of those. We don't want to always be working with patterns. Please do not let yourself get bullied into pushing to code and as a designer you start thinking, "Oh, now I need to be coding." No, because if we are coding, if we're in charge of the quality of code, which is not our strength,

[15:45] what are developers doing? So, I still do not understand the industry pressure of pushing designers to be pushing PRs to code. Our strength is our creativity, our intuition, our ability to create new designs and user experiences that will engage our users. And that's where I think you will appreciate the vibe to vector that's coming next. So the reason I'm sharing all this is because I am open. If you're already vibing to code and still being creative, I would love to hear from you. I'm not close to how our role is evolving. But from my real experience for the last three months, there is still a need for a vector tool where designers can create things

[16:27] that are unique, not just patterns that AI can generate on their behalf. Even if those patterns are coming from a design system, we want to create new things and clot cannot do that. By definition, LLMs are giving us patterns that were generated elsewhere. Now that we've established why you still need vector, let's talk about how you can create vector designs and when you would do that using the Figma MCP. And for this, what you need to understand is anytime you're asking the agent as in claude or codeex to write inside your canvas. This is the Figma use skill. The Figma U skill leverages many tools that are embedded inside of it in order to allow Claude or Codeex to

[17:14] write inside the canvas. Now, I'm linking to you to a video where the best use case for this is to literally create a design system from scratch. So, I show you how to do that both with Claude and Codeex. If you already have a design system in Figma, if you're starting from scratch, make sure to take a look at that if that is your use case. Now, I want to show a different use case, which is iterating in Figma on features that you want to generate. Now, in this SAS workflow, I want to start in a new chat and I want to use an existing design system to generate form options. Let's say

[17:54] for your SAS product, you were tasked to create a new sign up form. There is a file that I created for you that gives you specific prompt that will help you build your design system. The last one of them is about creating a specific feature using your design system. So, I'm leveraging that and

[18:12] I'm linking for this file for you also in this video. So, basically the structure is like this. create a feature or a page whatever it is that you want to create here and this is where you would provide your Figma link for where you wanted to generate this ideation and you will say use components and tokens from my design system and we need to give the exact design system library so I'm copying the exact name that we created here and back to claude I will paste so the feature I'm trying to create now and I'm keeping it simple create three possible designs for forms. So, specifically, I want to create a form to allow my users who are designers to ask me questions

[18:58] about my videos to contact me with their detailed questions and inquiries. And last thing that I need is to provide it with the Figma link for the file where I wanted to create. Now I'm going to do this with you because there is an important step for clot to have access to the design system which is inside the design file where you wanted to generate you need to connect that library of your design system. So, I'm naming this new design file contact forms and I'm moving it to an existing project, preferably the same place where your design system is. So, you know, they have access to each other. In order my Namad design system to be accessible, I need to make sure that I publish

[19:45] this library. Publishing it to the team. And you can see when I search for this right now, I can find the NMAD design system and add it to my file. So now that I have this file that is connected to my design system, I am going to share the link with Claude ask it to generate these solutions

[20:05] for me. This three structure for the prompt is important to allow you to have better results. I've experimented quite a bit until I arrived to the specific details you need to tell clock. the features, the place where you want to create it and that file should be connected to your design system and making sure to specifically tell it to use the tokens and components. And I'm even going to add and styles from my design system. You can see the notification here for me at Claude because I've been using quite a few things for this session. I've already exceeded my $20 limit, but I have purchased something called extra usage, which is just $28 per month. That allows me to

[20:48] leverage those tokens when I need them. Hopefully, if you're working in an enterprise company, you will not have this issue because you will have a little more limit than $20, especially when you're doing this kind of work. You can see how it's searching the design system file. It's using the Figma integration and now the skill Figma use or use Figma is what's being triggered in order for the agent to start writing inside of your Figma file. There's two ways for you to see the progress always in claude. There is a preview option generally you can open and see what it's calling, what it's doing. But also the fun part about vibing to vector is inside the Figma file

[21:33] when Claude starts writing you will see it pop in right here. So my icon is right there you're going to see Claude will jump in as a second me and it will start writing inside the file. And here you go. Even before Claude is completely done here because it's still refining. I can already see in the contact form page. Look at all these options that were generated on my behalf. There is clean and minimal option where there's a single column. Ask me anything. Drop it here. It's definitely using my design system. It created black option for my form where it's darker and it used that version of my design system and then it created a stepbystep form where it's about you, questions,

[22:19] details. I mean, is it perfect? No. There are still a lot of things that can be enhanced. But what's wonderful about all this, I already have so many options to get started from and this is the beauty of vibe to vector. This is what my designers have been finding very powerful for them because it's getting them started rather than starting from a blank slate not knowing where to get started. You already have three options to compare. You start from these options, then you pick one solution that you want to refine further or maybe combine multiple of those solutions. And the beauty is once you've done that, like let's say I like the black form right here,

[23:01] but I do like this three-stepper process. I can come right here and copy it and paste it in this design because this is Figma and I do have full vector control. And this is where we have been finding incredible power in still getting access to a world where we can move things around. In my experience, even though I'm somebody who loves Claude and I love what it generates for me, but there is a limit to how much I want to chat to get somewhere. There are times and moments which other designers have echoed the same feeling where we just want to do things ourselves. Please tell

[23:40] me. I would love to hear your input. How is it for you? Are there moments when you want to do something yourself rather than just ask the LLM to do it on your behalf? If you are in this category, then Vibe to Vector is definitely a very powerful asset for you because once you've refined things, this is where you can have a final version. You can build once again in HTML. You can enhance and iterate. I hope you found this tutorial helpful. I know there's a lot to still cover and as soon as I'm learning new things, I am sharing them immediately with you. So hopefully it is helping

[24:15] your process as well. If you're interested in getting these tutorials as soon as I share them with you, make sure to hit that notification button and select all notifications so they appear on your feed as soon as I release them. You're welcome to also join our community. I'm creating a space where designers can have their custom needs addressed and I can be there to support them define and solve for their workflows. And as always, I love to hear from you. So, please share with me in the comment what's your experience with this tutorial, what

[24:47] else are you trying to learn, and where you're at. Thank you so much for sharing my journey.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt