Figma MCP + Cursor — Full Tutorial

Figma recently released a new feature which is called MCP server which means now you can finally transfer your designs into code in just like several clicks. And this is so huge you can't even believe it. Uh in this video I'm going to show you how to set up M MCP server and how to

transfer your designs from Figma to code. Hi my name is Sergei. I'm a creative director and visual designer and also I love to teach Figma and framer. So if you're new to this channel, welcome and please subscribe if you haven't already and like the video if you like it and thank you so

much for your support on my last video. I got lots of positive feedback. Thank you so much and I'm glad that you liked it. So what the heck is the MCP server? Basically, uh it's a tool or a script

that allows you to transfer some data from one source to an LLM um app. Uh which basically means that you can transfer your in in our case transfer your designs. uh so get them get the data from

Figma and send it to a app which is AI app like so it can be a corser or chat GPT anything like that so basically these are all LLM um software we're going to use Corser and I recommend it to you because it's the easiest one on the market I think first of all you need to do some preparation

work and we'll Start with Figma. Uh I'll show you an example of this calculator uh which I built using outer layouts. This is very important to use outer layouts for creating your designs in Figma currently. And also it's very important to use variables. Uh these things that you need to learn

currently. And also it's very important to use variables. Uh these things that you need to learn if you if you're not sure how to use them. Uh you can check out my other videos on the channel. I

already have set up uh variables here. Let's check them out. So basically what I did um I have two groups. I have groups for colors and I have groups group for spacing. Basically it's spacing I'm

groups. I have groups for colors and I have groups group for spacing. Basically it's spacing I'm going to use in my designs. So basically anywhere where I have a number I will use variable. So

let's check it out. For example this u button this is a component. This is very important also to use components. Here I selected the button and check this out. I have the gap you see I set up the variable eight and also I have these uh paddings it's 24 um left and uh left and right

padding and also top and bottom padding over here is 24 as well uh also I have set up the colors so basically this is my button color and uh the text color is also here this is the text color for the second button also the same thing every um number here also the corner radius you see I have set up

to variables as well same thing for the calculator itself uh all the colors are in variables and all the numbers here are also in variables you see all the spacings everything I use variables so next what I need to do I need to go to Figma settings um actually it's called preferences

and here I need to check this thing over here. Enable dev mode MCP server. Um, currently I'm using Figma Beta. So, you can get it from official Figma website. Just uh Google it, Figma Beta. As

far as I know, um, currently you can use it in the free plan, but I'm not sure about this because I have a paid plan. Uh, but check that out as well, but I think it's free and beta right now. So,

this is it. This is all you need to do uh, in Figma. Now we need to open a our browser and there's uh a special um like a blog post on Figma website the article that tells you how to set up a

uh MCP server and here we need to click on cursor here because we're going to use cursor and we'll need this code over here you see this is the configuration we need to copy it Now we go to cursor website cursor.com. We download the app. We register there if you're not there yet. Then

we just open the app. Here I open the app. And now I need to go to settings over here. And I need to look for tools and integrations. And here if you just open the cursor and this is your first time setting up MCP server, you're not going to have this. But let's set up a new one. So I just like

press plus and here you need to paste your code from the Figma's website. We just copy it, right?

So we copy it and I paste it over here. So you see save it. Just close it and wait couple of seconds and it will load up. You see it loading tools. You can like test it like this. Yep. You see

it's ready now. So everything is ready. You see variables here, some get image, blah blah blah.

This is all good. So basically now you're all set up. Now you need to just create a new file.

Uh I have a folder open where all my files are for the cursor. So it's cursor files. And now what we need to do guys, so this is the the beginning of the new era. We open our Figma file again.

I select the frame where my design is design of the calculator. I just select it like this. I go

to cursor again and now I uh text the prompt. So basically I wrote the prompt. It's really

simple. So let's check it out how it's going to work. I have no idea but let's check it out.

Um important thing that I'm not pasting anything in the in this uh prompt field. I only opened my Figma file. So basically I just selected the file here and that's it. Uh just in case check that

Figma file. So basically I just selected the file here and that's it. Uh just in case check that your your file is in can view mode. uh because I notice sometimes cursing doesn't see the the file

just in case check it but it should work without it but just just to check um so here I have anyone can view right so I select the frame with my design I'm not copying anything just go here so I

just wrote the prompt I use agent clot 3.5 sonnet on free plan And now I press send. And let's see what's going to happen. You see generating understood what I want to do. And now it asks

me that it's calling a function a get code. So I need to um press run tool. So I agree with that.

You see we have a check mark. So everything works. And now it wants to get the image like the visual references basically. I guess this is the the part where it collects all the data of my styles and all that stuff. And now it begin to generate the code. So basically it generates the

index html. You see it's right here. And now it generates CSS file. That's basically the

index html. You see it's right here. And now it generates CSS file. That's basically the styles. So this is the code. This is the layout and the HTML. And now it generates the styles.

styles. So this is the code. This is the layout and the HTML. And now it generates the styles.

And if I open uh my folder with the project, I can see here already two files, the index html and style CSS. I also can see them over here.

So these are the styles got from my variables.

And now it generates the the most interesting thing. It's crazy. It generates a script, a JavaScript to make it interactive. So this is so cool guys. This is amazing. And now it wrote

some information what it's done and I press accept all. And now let's see what happened.

So I just opened my file and as you can see we got the layout we got our design from Figma to code we can inspect it so we can see that this is real code you see everything is there proper naming all the divs everything looks pretty cool yes I understand that it's not exactly

in the same style that we had in Figma you see here it was kind of more interesting thing. Uh,

but let's see if it works. So, let's check it out. I press AC. So, I like cancel it the numbers. You

see? And now I can click on for example 10 plus 5 equals to 15. Can you imagine that it actually works? So, it's not just a prototype, it's a working code. a working calculator. Um 10 for

works? So, it's not just a prototype, it's a working code. a working calculator. Um 10 for example multiply by 3 equals 230. It works. This is so amazing. Can you imagine that? I can't. We

just got the real code of the calculator in like several minutes. Uh so let's try to fix it. Yep.

So let's let's send this prompt and let's see what's going to happen now. And now it gives me an error. Um when I was testing I saw this error a couple of times. It means probably that a

error. Um when I was testing I saw this error a couple of times. It means probably that a lot of people are trying to use a cursor right now and um it's overloaded. But I waited like

few minutes and tried it again. So don't worry, it's going to work. All right. So I finally got the results after a few hours. Uh and here uh what I got. So basically I told him that there's a problem in the buttons design and it fixed it. And then I said that there was a

um an issue with the inner part of the button. It was really small. So I told him that you should make it 80 by 80 pixels. and it did some changes in the code and this is what I got. So this is

it and now it looks really cool. Do you agree with me? So it works perfectly. The buttons look almost exactly as in the design. So here is the design and this is the the code and it looks almost

identical. Well, I have a problem with the zero, but I'll need like few more minutes to fix it.

identical. Well, I have a problem with the zero, but I'll need like few more minutes to fix it.

In any case, I believe this is the really cool example and uh the most important thing that it actually works. So, it has the logic and you can actually use this calculator to count your incomes

actually works. So, it has the logic and you can actually use this calculator to count your incomes from your clients. So basically this is what I was waiting for so long and um I guess couple of years ago I thought of it that someday it's going to come when designers will be more like engineers

and we're not going to wait for a front-end developer to develop our uh website or our designs. Now designers will be able to do that by themselves. And I'm not talking about transferring

designs. Now designers will be able to do that by themselves. And I'm not talking about transferring your designs from Figma to for example a no code tool like framer or web flow. We're talking real code like HTML, CSS, JavaScript. And this is so cool because for example personally I don't

code. I like know some of it basics of coding but I can't and I don't want to code uh the whole app

code. I like know some of it basics of coding but I can't and I don't want to code uh the whole app or the whole website right and now I can do it because of this feature and I can transfer my

designs from Figma to uh cursor and create an app or website. Thank you so much for watching this video. I hope you like it. So, please don't forget to hit the like button below and subscribe to my

video. I hope you like it. So, please don't forget to hit the like button below and subscribe to my channel if you haven't done already. And in the comments, please tell me what do you think of the MCP server and what do you think of these things happening. And uh I wish you luck in setting up your MCP servers and turning your designs into code. And I'll see you in the next one. Bye-bye.