Ultimate Crash Course Claude + Figma | Generate Designs | Build fully interactive screens

I'm sorry I had to use that thumbnail.

But now that I have your attention, let me show you what we are going to do today. We are going to connect Figma

today. We are going to connect Figma with Claude so that Claude can design for us. Claude can develop for us. So

for us. Claude can develop for us. So

basically Claude can do everything based on just a few screens you design. For

example, I'll show you what I did. So

these are the screens that I have designed inside Figma like including this. I have designed these screens.

this. I have designed these screens.

Then I sent this screen to claude so that it can train on my design style and later claude gave me this based on my requirement. I just told give me a

requirement. I just told give me a screen where where I can enter passenger details and it gave me this screen and it did not just give me this screen by the way this it gave me a working

example working prototype just front end but still working. See all it this is working completely and I just needed to push this back to Figma so that I can

edit it inside Figma however I want and this is built with auto layout and later I just did not stop there by the way I went one step ahead and built the entire

app using that st same guideline see I'm going to show you from the start this is built on this design guideline there are some mistakes but that is okay so see

this is completely working front end only but still working.

I can I can work it out.

See, all of this is made from just four different screens. Uh starting with four

different screens. Uh starting with four different screens. See, and I think you

different screens. See, and I think you can use just start with one screen also should not be a problem. Let me show you how to do it. Uh see, I can enter everything.

I'm even payment mode is included in this. See? And now we have the complete

this. See? And now we have the complete flow just from these screens which is mindblowing. What I'm telling you is

mindblowing. What I'm telling you is don't just become a designer. Become a

designer who can ship. You don't need to have any coding knowledge. Claude will

do everything for you. So what we are going to do today is basically we are going to have two different uh ch uh AI agents. One is charg and the other one

agents. One is charg and the other one is claude. Claude is going to do the

is claude. Claude is going to do the heavy lifting here and charge GPT is going to give us prompts. We are not going to give prompts to claude because it's too much. So maybe we'll just ask

Charg to give us detailed prompts and that we are going to enter into claude and claude will execute stuff for us. So

let's get started. Okay, first things first, you need to install Claude onto your system. And how do you do that?

your system. And how do you do that?

It's very simple and I even made a guide for you. You will find the link to this

for you. You will find the link to this guide in description. What we going to do is we're going to copy these commands uh one by one and paste inside uh your

terminal. Just go to uh search and

terminal. Just go to uh search and search for terminal terminal.

And we have the terminal here. You can

choose uh whatever folder you want, but I'm going to start with the desktop here. Uh and we I'm going to paste this

here. Uh and we I'm going to paste this uh command. Pasting this command and hit

uh command. Pasting this command and hit enter, it will install claude onto your system. I'm not going to do that because

system. I'm not going to do that because I already installed uh you just need to copy this step by step. That's it. After

once you install claude, how do you call claude is basically you're going to say claude and it'll open claude for you on the system. I'm going to give the

the system. I'm going to give the permission of this folder. Yes. and

cloud is now open. So what we're going to do now is we are going to install Figma MCP server inside cloud code. So

again just copy this command and paste it inside cloud code. See I'm not going to do this again because I've already installed and uh you're going to exit

cloud after doing this.

I just need to exit cloud and restart it.

So again give the permission. Now I have claude here. Now what we're going to do

claude here. Now what we're going to do is this is very important. Uh we're

going to say forward slashmcp and this is going to manage our MCP servers. Here if you see my Figma is

servers. Here if you see my Figma is already connected but yours is going to look something like this. See needs

authentication. You'll see the yellow triangle beside Figma. Basically means

it is not yet authorized. So you cannot go forward. You need to authorize Figma

go forward. You need to authorize Figma so that it can write and read from Figma uh designs. Okay, after doing that again

uh designs. Okay, after doing that again I'm going to hit escape but uh if you hit enter authentication uh it'll it is going to open that uh Figma link onto a browser and just there will be a pop-up

authorize cloud to use your Figma designs. You just need to say yes. Again

designs. You just need to say yes. Again

one more very very important thing is uh this will not work on a free plan. You

need COD uh you need claude pro plan uh which comes at $20 per month. But yeah,

this is very very much worth it and you definitely need to try it at least for a month. Let's start with training claude

month. Let's start with training claude on your designs. So what I'm going to do is I'm going to create a new Figma file so that I can do it from scratch. So

I'll just paste these same designs uh until here. I'm going to paste the same

until here. I'm going to paste the same designs inside this test file and also uh I will create a new folder so that Claude will uh not use any existing

knowledge. If you see I've created a new

knowledge. If you see I've created a new folder and I'm inside that folder here in terminal also. If you see I said cd space basically go to this folder and

now I'm inside that folder and I'll call I'll call claude inside that folder.

Now claude is inside that folder is I'm going to copy link to this uh design.

What I'm for that you need to press command L or you can right click and say copy link to selection. Here what we're going to say is we're going to say read

these designs and form an understanding of design language end to end.

So we're going to say read these designs and form an understanding of design language end to end. Uh we're going to paste that link. Uh I pasted this link

again. I'll paste this link again. Go to

again. I'll paste this link again. Go to

this and copy link to selection. Uh

paste it. Paste it here. Again do the same with this. Copy

uh space paste. Do this one too.

Paste it. And lastly this. So what we are doing is we're basically training claude with our uh own design style. So

after that I'll hit enter and it is going to take some time uh to analyze all these designs by going into Figma on a component component level and it is going to form an understanding and come

back with uh come back with an understanding of the design language that we have created. It is going to uh tell us what font we have used, what colors we have used and all that stuff.

So it's going to take a minute and so if you see here uh it has given us uh or it has read all the font preference uh color preference and everything and it

gave us this. Now uh Claude has Claude has an understanding of our design style and now we can ask it to design a next screen that we have not designed. To do

that I'm not I'm not just going to say design a passenger uh details entering screen. I'm going to use charg to so

screen. I'm going to use charg to so that we can get a detailed prompt. So I

don't have time to write uh lengthy prompt. So I'm going to use charg to do

prompt. So I'm going to use charg to do that. So what we're going to do is uh

that. So what we're going to do is uh create a new chat. Going to tell charging so that it has an idea. And now it is going to give us a detailed prompt. If

you see I have told charg same thing.

I've sent the screenshots here and uh told it what we are doing. And after

that I've asked it to give me a detailed prompt where passengers can enter details. See it gave us uh this result.

details. See it gave us uh this result.

What we going to do is we are going to uh copy this till here inside terminal uh where cloud code is running. We're

going to say using the same uh design guideline or design style using the same design style design

uh and then I'm just going to paste this. Basically, it has passenger detail

this. Basically, it has passenger detail screen and everything. I'm going to paste that. And I'm I'm also going to

paste that. And I'm I'm also going to say uh make it interactive.

All the buttons and all the buttons should work and it should

also have also have micro interactions micro animations wherever

needed. I'm going to say that I'm just

needed. I'm going to say that I'm just I'm just going to hit enter. So it took 9 minutes to do that task. You need to have patience. Without patience, it will

have patience. Without patience, it will not work and you might not get good results at the start. You need to train your uh clot to uh work better way. But

anyway uh it has given us uh or it has written that file and it will be inside uh the directory wherever you give permission. Uh you can also ask it to

permission. Uh you can also ask it to run that file so that it opens your browser and uh you know runs that file basically. So what I'm going to do is

basically. So what I'm going to do is since I already know that it is inside this file, I'm going to open that uh double click on it. It'll open the passenger detail screen. Now this design

is made on a design system or design style that you trained cloud on. Now how

do you paste this back onto cloud? I'll

show you back onto Figma. I'll show you.

So if you see all this is completely interactive and all the things if you give this to dev devs will be very happy. Again, you can you can always ask

happy. Again, you can you can always ask changes right here, but we're not going to do that. We're going to paste this back to Figma. To do that, I'm going to say push this

design to Figma. So, if you just say this, it's

to Figma. So, if you just say this, it's going to paste on the first page somewhere at the end. But let's say you have many pages and you want this to paste somewhere specific. You're going

to copy that pages link. Like for

example, copy link. Click on share and copy a link and paste this here. Now

push this push this design to Figma. I'm

going to say and I'm going to hit enter.

Now what it is going to do is it's going to create a temporary capture uh tool which is going to capture this design and paste inside Figma inside that page

where you gave the link. So uh one more cool thing I can show you is uh again give all the permission it is asking.

So as it is working uh you can ask questions to it. You can just hit forward slashbtw and say what are you doing?

So it is going to ask it is going to answer you whatever it is doing it you can ask uh like how much time it will take for example let's say uh I'm going

to ask it again btw what's the ETA so it's going to return with whatever time it's it thinks it will take

1 to 2 minutes fair enough so again I need to run this and now it's going to uh have a capture thing on top of here I'm just going to wait for it again.

Give all the permission. It is asking it open. Now it should see it is saying

open. Now it should see it is saying sending it to Figma and it is going to send it here. I'm going to show it live.

See Figma has come up and the design is here. Superb. Now we're going to take

here. Superb. Now we're going to take this design and see if it is editable. See this is completely editable and built on top of

auto layout. See although it has not

auto layout. See although it has not used the font uh it is it has used the font but there is some mistake but which should be okay. I'm going to replace the font. Um

font. Um but yeah this this is pretty good.

Replace on the whole page again. There

is some mistake. I don't know what is that but I'm going to fix it. There are

some mistakes like this which is okay. I

mean this is interactive design. It

pasted something uh what it got. But if

you see my results where I wasn't planning on a interactive design uh but I just asked it to design based on the design system and it gave us a pretty good result at that time. Anyway, uh one

more thing is you can keep an eye out on the usage. For example, um I'll just

the usage. For example, um I'll just open my cloud. Give me a moment.

Here I can go to my usage and see how much credits we spent. We just spent 15% of the credit limit which is okay. Hey,

we can build the entire app uh in this session and I'm going to show you how.

Last time uh it took multiple iterations. So I even had to add this

iterations. So I even had to add this $18 beyond that current limit. So anyway

uh just an um tip, keep an eye out on the usage and try to give all your prompts at once instead of a separate prompt list. This is interactive. It

prompt list. This is interactive. It

might miss out on things uh like particular very very specific things which is okay. But if you just ask a plain design without any interaction or animation, it should give a proper

result that you can edit inside Figma.

Now what we're going to do is now we're going to build the whole app around this. So again go back to charg. I did

this. So again go back to charg. I did

this uh I did this previously and I'm going to do it again. So I think I can use the same prompt. Let's see.

Uh uh uh yes. So one more tip is anytime you run into an error always take a screenshot and send it to chargbt and it is going to help you to uh you know solve that problem for you. So uh you

see I've told now that you have full working ID of the app I want to build a mini app from login to anything details and everything uh and it gave us this lengthy prompt that we're going to paste

inside cloud and hopefully hopefully get it to work. So let's do it. I'm going to copy this prompt. Copy. Go back to

claude. Uh go back to terminal. Uh and

claude. Uh go back to terminal. Uh and

paste it here. 1 2 3. Now hit enter. So

I guess it will take 10 more minutes. So

we'll see you in 10 minutes. So since I asked for a very very large request, uh it somehow got into an error API error

which says it exceeded the response limit. Um which is not surprising by the

limit. Um which is not surprising by the way. But yeah uh you can take a

way. But yeah uh you can take a screenshot of this give it to charg and it will give you a fix. But for now I just told you how you can do this. Again

you need to have patience when you're working with claude because it is into very early stage and yet usable. And I'm

going to uh help you with one more tip.

For example, if you see in the design uh that we were working on that we pasted from the claude, it is not as perfect or as pixel perfect as we were expecting.

So what you can do in this case is you can just ask claude to fix the design.

For example, I'm going to make this uh existing screen into a pixel perfect screen.

So again, what I'm going to do is I'm going to copy the link to one of the screens. uh copy link go back to

screens. uh copy link go back to terminal uh paste this screen's uh path or you

can just copy the name of it should be fine the name is passenger details so I'm just going to copy the name

so I'm just going to paste this this screen is not up to the mark not up to the mark

and is not pixel perfect compared to my Figma design.

Please follow the same design style, spacing and everything

to match to match my design style. So, I'm just going to say this uh and paste link to Figma

say pasting link to my Figma screens again and say paste this and one

more. I'm going to just paste this one.

more. I'm going to just paste this one.

I guess it will have that memory but again it's just a recall thing. So I'm going to send it. Okay. So it is rewriting that

send it. Okay. So it is rewriting that uh passenger details screen. As you can see uh whatever is inside red. No, it is going to be deleted and replaced with

something inside green. Just so you understand. I think it'll take like one

understand. I think it'll take like one more minute. So okay, cool. So it has

more minute. So okay, cool. So it has given us the file. It has rewritten the file. I'm going to copy link or open

file. I'm going to copy link or open link.

Okay. So it's not bad. It is very similar uh to what we were expecting but yeah uh if you see it has taken four passenger list and it is very close. Now

let's push this back to Figma again.

Just say push this to Figma.

So it has uh reritten that file with fixing minor errors but uh I also told it to push it to Figma. Uh I'm just going to say yes. Uh if you see this is

like slightly better than the previous version and very very close to what we were designing. So it says send to

were designing. So it says send to Figma. So it will be here. This is

Figma. So it will be here. This is

slightly closer to what we were doing.

Followed the same exact same process. Uh

on Friday also I followed the exact same process and today also it gave me a a different result because it is it is not very perfect at the moment. Now you have

to have that patience or retry it many times. But yeah, even though it is still

times. But yeah, even though it is still workable and it is completely fine. See,

it is working per uh it is looking totally fine and I can work with it. Uh

that's all for today. Uh I hope you like this video. Uh you you can find that

this video. Uh you you can find that installation guide in the description and do give me feedback on how was this video, what can be improved so that I can improve myself for the next video. I

usually don't have such patience. I sat

around 11:30 and it is 1:36. uh the

setup was on uh for the complete duration. So a self appreciation to

duration. So a self appreciation to myself for having such patience. I

usually don't have such patience. So do

give me feedback so that I can improve myself and uh if you if you if you run into an error anytime just ask Charg or ask any other AI agent and it'll help you solve that. It is super easy. Do not

hesitate to reach out to me on my Instagram and I'll try to answer. I'm

not an expert but I'm still figuring it out but I'll try to help you out so that you know you can also learn. So

hopefully this entire video is not so lengthy and you could watch in one go.