Code → Figma — This Changes UI Development

Sending your designs from Figma to code is everyday thing already. But what if I could take your existing code, generate a design from it, fix it in Figma, and then send it back to your project pixel perfect with the code automatically updated. And that is something new thanks to the latest update from Figma and Claude Code. This workflow is finally possible. In this short tutorial,

I will show you exactly how to set up Claude Code on your computer step by step. Then we'll run Figma MCP, generate UI directly from the terminal, and send it to Figma, make some design changes, and then sync those changes back to the original code. I believe this might completely change how

designers and developers collaborate. So, let's get started. And by the way, if you're new to this channel, my name is Sergei. Here I talk about Figma, framer, vibe coding, and AI. So,

don't forget to subscribe if you haven't already, and like the video if you like it. All right. So,

first things first, you need to install um cloud code to your computer. And there are several ways to do it. We'll start with the most common way is installing it through a terminal.

For me as a designer, um to tell you the truth, I hate terminal because I think it's more for developers, but times are changing and we as designers, we need to know how it works. So,

let's go to code.clude.com clot.com docs quick start and here we'll need to find installation guide the step one is here I'm using a Mac OS so I will use this command so I'll need to copy

it and now I need to run my terminal how to do that it's really easy I need to press F4 on my keyboard or search and search for terminal app and launch the terminal app here I need to paste my own command that I just got from from the docs and I just press enter. And now I will run the

command of installing Claude code to my computer. And I have it already installed but I will do it again just for you to see how it works. So basically now so after cla is installed to your computer you need to run a claude command. So it's basically the step two here. you need

to log to your account. So, let's run claude. And uh we'll see this kind of cartoony style.

Welcome. And now I need to choose the type of mode I want to use. I want to use the dark mode. Okay,

dark mode. And now I need to connect it to my account. So I'll need to press enter and I go to my to my account and I need to click authorize. I see that login is successful. So I press enter and yeah and that's it. So we're done. We have the cloud code installed installed to our computer.

After you have installed cloud code and logged in uh you need to open the folder of your project.

This is the same thing as you do for example with Cursor or if you use uh cloud app. Um you need to open the folder for your project. So this is like the first step. Um and this is how you can do it.

Um I don't like to paste things and uh type in the terminal again as a designer. So I just go to my folder that I've created and here uh in the bottom I have uh the link uh to my folder and I just click open in terminal. And now I I've opened my folder in terminal. I can close this folder and

I just type claude here. I'm located in the in the side of the folder and here I just run it and you can see that I've opened um my code uh and I actually I uh installed it and now I run

code inside of my folder. Next what we need to do we need to connect it to the MCP Figma MCP server and this is how you can do it. uh you go to codeccloud.com docsm and mcp uh I will leave all

the links in the description below don't worry and here you need to find you just copy this command you go to your terminal with your cloud running and you just paste your command here and you press run here we can see that it asks us to have the approve and yes I click approve proof that I want

to run it. Now it's running the plug-in. You need to restart cloud code for the new MCP. It's taking

effect. Once connected, you will be able to use it with Figma URLs. All right. So I will restart cloud code and here I can click Ctrl C for Windows or command C for Mac. So I'll click command C and

run. All right. So it's done. So it's running. Let's start a new terminal just in case. So I will

run. All right. So it's done. So it's running. Let's start a new terminal just in case. So I will terminate this. After you connected the Figma MCP to Claude code, the next step is to install Figma

terminate this. After you connected the Figma MCP to Claude code, the next step is to install Figma plug-in. And here you need to open your folder again. And now you need to run a command which is

plug-in. And here you need to open your folder again. And now you need to run a command which is looks something like this. Claude plug-in install Figma uh at cloud plug-in officials. I will leave the link to this in the description below. again. So you don't need to uh search for it. And now I

just press enter. And uh here we can see that uh successfully it installed the plugin. After you

have installed the plugin um you just type in here slash plugin and this will come up. Uh here you'll need to use your arrows on the keyboard left and right and you want to select installed. And here

you will be able to see local and you will be able to see Figma remote MCP. And uh this is the sort of like error message that we saw earlier that we need to authorize uh and um log into our Figma uh profile. So you select it uh and click enter. So basically you can see like the little arrow on

uh profile. So you select it uh and click enter. So basically you can see like the little arrow on the left and click enter. And now we'll need to authenticate. And I just press enter. And

we'll see that my browser just opened. And here I need to allow access to my Figma account. So I

need to agree and allow access. Authentication is successful. And here we can see in the terminal that everything is okay. Congratulations. So we have completed the installation process of Claude code through the terminal and just a quick note how you can do it another way you can go to Cursor

for example if you use cursor and uh you will need to go to this uh plugins uh section and search for extensions in the marketplace and you'll need to find a cl code for vs code and you'll just need to install it. I have already installed it to my cursor. So you will need to install it here. Uh

and then after it is installed uh you will be able to see it through this chevron over here. So you

just click on it and you'll see extensions and you will see Claude code and when you launch it here you will launch the cloud code inside of your uh cursor. So but you will need to log to your um cloud code account. So it is separate from the Cursor. So, uh, just to keep in mind that, um,

you don't need to pay for cursor at this moment because you're using cloth code inside of cursor.

But if you're going to be using cursor for editing and you'll be using agent mode in Cursor, you will need to pay for all the tokens. Um, or you can of course try to do it in the free mode. And one

more way to use Claude code is to install the official uh, Claude app. Uh, here it is. So you

have a basic chat window like a regular one where you can chat like using chat GPT for example. So

this is just uh regular um agent mode and there is a thing called code. So basically this is the the prompting uh where you can use it and um no no need to go to the terminal. So you can basically type stuff here. You can connect it to your folder again uh and or you can connect it uh

to the GitHub or use it as a as cursor basically. Uh and again you don't need to go to terminal.

We're back in um our terminal with cloud open in my folder and here let's try to prompt something.

I will use this prompt. Build a dashboard for home electricity monitoring. And I'll just hit enter.

And now we can see that it is working. Recommends to install a GitHub app. So we can use it connect it to our GitHub account. But again, this is for terminal. And if you use for example like an app uh the cloud app, you connect everything here using extensions inside of your app. Uh again,

you need a pro account for this. And same thing for um a cursor. All right. So, uh here it asks me to uh proceed. All right. So, press enter and let's wait for this demonstration. Uh let's use

plain HTML. All right. So, we can see that it created um the HTML code already. And now I can

plain HTML. All right. So, we can see that it created um the HTML code already. And now I can uh press yes because I want to create index html file. So I press yes and it should save it to my

folder. And here's my folder. It already saved. So everything is nice here. And yeah. So let's

folder. And here's my folder. It already saved. So everything is nice here. And yeah. So let's

launch it. And let's preview it in Safari. All right. Here it is. So it looks pretty good. We

can see that it's live. It works. You see we have some uh information here. the dark mode.

It's pretty nice and also it is responsive. So, the result is pretty cool, right? Um,

yes, it looks pretty generic, but this is from a super simple small prompt. We from the terminal, we got our designs. And now the most interesting part is to send the designs to our Figma file and to work on them in Figma and then update them and send them back. So, let's try to do it.

So basically um I'll tell them put the designs in Figma file and I have my Figma file opened over here. Probably you noticed it and I'll just copy the link to it and I go back to terminal and I'll

here. Probably you noticed it and I'll just copy the link to it and I go back to terminal and I'll paste the link to my Figma file. Now it asks me what I want to do. I just want to click yes and

proceed with the next step. All right. So let's check it out. Uh we see that it opened uh this new file over here again. Uh and we see that there is some navigation on top and we can send file to Figma uh entire screen select elements. So we can actually like work around and see like

uh select different elements and then we can open the file here but I don't need to do it because I have it already opened. So this was the link to the the Figma file that I uh pasted. And here we can see our designs that we just created in our terminal. And now we have them in Figma. This

is like super cool guys. This is amazing. For example, I want to change the background. Yeah,

like this or white. Let's do it this way. And let's change the colors of this thing. Change

it to something like this. And this one is going to be lighter. All right. So, I prefer to use dark background over here. So, I'll just do it this way. And that's it. For example, right? And here

we'll use darker version. And here I'll use light. Okay. And here for example I will use something like this darker version. Here I will use again dark. Let's do it in black like this. And here

again I want to use darker. All right. So let's say I did some changes right and I want to push it back to my code. For example, as a designer I made some changes and now I want to push it to the production or to the stage um for the developer, right? So I need to select the frame. Now go to

copy and paste and copy link to selection. And now I go back to terminal and I'll tell him update the designs or the design from Figma file. We're based in Figma file. But let's let's see how it's going to work. So let's check it out. Yes, I want to proceed and let's see how it's going to work.

to work. So let's check it out. Yes, I want to proceed and let's see how it's going to work.

All right. So, it found the differences and now I need to click yes to update the index html file.

Yep. And here it is. We just updated the designs in Figma and pulled all the designs into our production. So, into the code and also we can see like the little summary of what we did. And that's

production. So, into the code and also we can see like the little summary of what we did. And that's

ready. So, it's responsive, looks really cool, and everything is updated based on the Figma file.

Just a quick reminder that if you want to learn more about Figma, framer or AI and Vibe coding, be sure to check out the link in the description below to my courses and my newsletter. And now,

a quick demo of using cloud app with a code mode. Basically we can do the same thing as we did in terminal but maybe in more visual uh pleasing way. So I have my uh folder opened here uh with my HTML file that we just uh created. Let's uh update something here. For example, we'll uh we'll change

the colors of these things. Uh and let's uh change them to red for example or like this color. And I

will just copy again the link to it. And copy the link. And now I will go to the app and here I will uh paste uh the prompt update design from sign from the Figma file. Yep. And that's it. And

basically this is what we did in the terminal. And we'll just need to wait for our um load app.

So this is update. And now we need to yep update the the page in our browser. And here it is. These

are our new colors over here that we just updated in Figma. Isn't that cool? That's That's crazy, guys. This is like crazy times we're living in. Completely new flow of using Figma and Claude

guys. This is like crazy times we're living in. Completely new flow of using Figma and Claude with your UIs. This is for you to think about how you want to use it. You want to use it in the app or you want to use it in the terminal. It doesn't matter. Works both ways.

and terminal is more like for pro users but I personally like the the app more just for visual sakes. Thank you so much for watching this video. I hope now you understand how you can send

visual sakes. Thank you so much for watching this video. I hope now you understand how you can send your designs from code to Figma, update them in Figma and then send them back to the code pixel perfect. So don't forget to subscribe to my channel to learn more uh about bip coding Figma

pixel perfect. So don't forget to subscribe to my channel to learn more uh about bip coding Figma and AI tools and like the video if you like it and I'll see you in the next one. Bye-bye.