From Figma to Cursor & Claude Code with MCP

Key Takeaways

All right, everybody. This is getting exciting. This is what the third or fourth video in the series where we're building out this project sidebling.com. The first video is an introduction to the idea which is very simple. You go to the site, you enter an interest or hobby that you have and it's going to help you through AI how to monetize your skills or your interests. So, um in the first or second video rather, we did this custom logo design. We also in the second video, the last video, we did this design right here, this UI design in Figma. And then now in this video, we're going to go ahead and hop into cursor with cloud code and we're going to use the Figma MCP server in order to get this automatically translated as close as possible to the browser. Okay. So, what we're doing now is one thing that you have to be certain of is if you come up here to the menu and you go right over here, you want to make sure it says enable dev mode MCP server. All right? You want to make sure that that is checked on. All right? Otherwise, it won't work. And next thing is um I made this fi Figma file available here in the description. Check that out. And you'll see that I I did do some updates since the last video just specifically in reference to the various names here. I really named all the layers as much as possible. So if we get the cards out here, these are all named up appropriately. And now what we want to do is we're going to go over to cursor. All right. So I have a new folder opened up called side blank. You can see there's zero files in it. We're starting from scratch. And over here we have our chat window. And one of the things that we're going to do first is install claude code. All right. So if we go to terminal or view rather terminal, we're going to find real quickly the installation command for claude code. All right. So this is actually simple right here. You're going to copy this code right here. If I zoom in, you can see what that says. And we're just going to rightclick and that will paste it. And now it's added a couple of packages. Now, if we just type in claude, this is what you should see. So, let me expand this up. So, do we trust the files? Yes, proceed. Hit enter. Welcome to Claude Code. Tips for getting started. All right. So, this is basically the starting point. So, you have to think about this instead of trying to oneshot the entire app through a single prompt. You don't want to do that. You really want to break down everything as much as possible into its individual parts. Now, I know because I'm already been a front-end developer and designer. I've been in this stuff way before AI for like 25 years, literally. I understand that I I already know what tech stack I want to use. Now you can perfectly go ahead and ask it either here in the chat in cursor or in cloud code. Don't ask it to write code. Just say hey what text stack should I use for my purpose or whatever this business is. But for me I know I want to use nuxjs. So what I'll say is create a project. Let me zoom up so you can see this a bit better. Create a nux.js JS project rather in the project root folder. And I think that's all we're going to need at this point. That's it's a straight simple forward thinking process. Nothing too crazy here. I'm not going to ask it to translate the design yet. I just want to get it installed. So now what it's going to do is ask you a bunch of uh follow-up questions. Do you want to proceed? Yes. And don't ask again for MPX commands in blah blah blah and no and tell okay what to do differently. So I'm going to go ahead and put two right there because what will end up happening is it will keep on asking questions um for being able to initiate certain commands. So now as you can see we have a next app folder in here cloud folder. It's working. It's showing you what it's doing. Next up, it's going to ask here I move Nux.js files to root. Okay. Yeah, that's fine. Hit enter. All right. So, here we go. Um, you can start the development server with mpm rundev. I'm going to hit plus right here for a new terminal and mpm rundev. Let's see what happens. So, local host. I think I already have something else running on 3000 port apparently. And here we go. So we have our little app up and working. Welcome to Nux. This means that the app is installed. We have it ready to rock. Okay. So now the next step here is you want to make sure within cursor if we go over here to uh the chat area and we go to open chat settings and we come over here to tools and integrations. This is where your MCP servers um exist. And you can see we have Figma right there. Also, Superbase, which we may or may not end up using for this project. We'll see. Um, but we want to make sure that this is installed. And if you want to know how to install it, um, I actually have a video already separately on how to install it. It's it's really quickly. It's just click add new MCP server and then there's like a little code you paste in. But anyhow, um, make sure that that is ready to rock as well. I'm going to actually use the cursor chat for this step um instead of the claude code terminal. Um and that's because I was having a hard time getting the MCP server working here on the Windows 11 um with Figma and Claude Code. So, it does work and it's connected with my chat up here. So, depending on when you're watching this, maybe it's an easier integration. Um but I'm going to specify the prompt right up here in the chat and cursor. I'm using agent mode Claude 4 sonnet. So, um, the first thing you need make need to make sure is go over here, make sure that the frame, the entire desktop frame is selected. All right, I'm going to just drag drag this off the side of the screen. And then over here, I'm going to go ahead and specify the prompt for it. So, essentially, I'm going to let's make this larger. I'm going to say I've selected a layout in Figma. use the Figma MCP server to accurately create the selected design. Now, another thing that's going to be important is if I come back over here is you can give it more specific instructions. Like for instance, let's say this right here where it says, "What is an interest or hobby that you enjoy?" We're going we're going to ask it to treat that as a floating label. So, a floating label is when you click on and focus in this text field right here. This will kind of move up and and kind of like get smaller. Um, that way you always see, you know, what's happening. So, with it selected still, I'm going to specify. And by the way, the name of that is called the hero. I'll be referencing the actual names like so like this is herocta, the CTA container, and then text field right there. So now I I'll go ahead and specify that little requirement. So I'll say um make sure that the text label inside of the text field is treated as a floating label. So when someone clicks or presses focuses on the text field that label will reduce in font size and shift no or animate above the text field something like that. Also, we'll say these cards down here should be bound to the VA bottom of the viewport or in other words, the bottom. They'll always stay to the bottom of the uh the web page or you know, depending on whatever device you're you're on. We we'll call it the viewport. Basically, it means browser. Um and so we can give it that instructions as well. Also make sure that the footer cards are bound to the bottom of the viewport. Okay, so with that said, I'm going to make sure that this is up. We want to make sure that frame is selected desktop when we hit enter. And let's go ahead and do so. Here we go. So now it's going to think about what to do. It's planning first. Need to check what tools are available to me related to Figma. So the Figma MCP server is enabled. It should have access to that. It's kind of looking at the overall um project structure. Ah, however, okay, so now what's bad is it's saying it doesn't have access to the Figma MCP server. So I'm going to go over here to chat settings because I did end up restarting this. Let's see here. Tools. Ah, there we go. So, I'm going to do this and then just turn it on and off. And then now I can click back up here and start that again. So, now I'll close this. And hopefully this time it's actually going to work. Uh, there it goes. So, it says calling get code right there. that means um has access to the MCP server. So get code means it's probably getting all the token information, the variable styles, all that stuff that we defined. Get image is a screenshot that it automatically generates. So now it's just saying it has access to all that. And pretty soon it might actually install something like Tailwind CSS, which is fine. I know I noticed it just said that real quick. Tailwind CSS is a very popular sort of um CSS library. Now it's starting to create the HTML markup along with the tailwind markup based on the selected design in Figma. And there we go. This is it. I Yeah, it's not perfect. There's a couple things that we need to definitely fix. Ah, look at that. That worked. So, if I zoom up right here, kind of see this a little bit more. So, that's the floating label that we told it to implement. And if we didn't tell it to implement it, then it would have done it, uh, chances are. So, that's very cool. Um, that works perfect. Um, this top up here is not centered. This this area again, we can enter a follow-up prompt. Let's see if these are bound to the bottom at all. They are. which is exactly what I wanted. So, so far so good. Of course, this is breaking because it's uh we have scroll bars down here because there's a bunch of those. Um what we'll probably do is end up removing um all of them except for one just for placeholders until we get real data attached to it. The logo obviously needs to be updated based on the logo that we have in Figma as well. It kind of literally just made its own logo, which is funny. Um so, let's get those few things fixed up. So the first thing is to get this centered, right? So we want the navbar section to be centered. So what I'll do is switch here to node. Please center the navbar. If I enlarge the viewport, let me get up a little bit closer here on a 4K monitor. The entire navbar logo plus menu stays fixed to the left. All right. So, let's go ahead and hit enter. What does that say? It says initially before processing it said pontificating. What is that? All right. So, what we can do is um look at this. Ah, there we go. Guess what? It's fixed. All right. So next up now we can go back to Figma. We want to select the logo and export it. So the logo SVG is the the actual layer. Come over here and we'll choose export. Make sure SVG is selected. Export logo SVG. Now when I do that, I'm going to go to my code folder. Side bling. I see here. trying to determine where I want to put this uh the logo in like the assets. I'll go back to cursor and I will ask what folder should I place assets such as a logo SVG. Don't make code adjustments. All right. All right. So, it's saying in Nux.js you place assets like a logo in a public folder at the project root. All right. So, let's just put in a new folder ourselves. Right click, new folder, public. And then we'll switch back to Figma. And there we go. So, that I did that step to show you if you're not sure about something, just ask you know the LLM. So, export. We're going to go to my code sideb bling public. We'll call this logo.svg all lowercase. Hit enter. All right. So now we can say replace the logo that is currently in the navbar with the logo inside of for/public logo. SVG. All right. So it has the logo now right here. Ready to rock. It's not clickable. That's something we could fix um afterwards. But yeah, this is a very good first uh start right here. Um I like the scale of everything. The scale looks good. Of course, we'll fix this. We'll make those um like a a rotating marquee of sorts. They'll slowly kind of scroll on by once we have actual data to work with. Um the the next thing that we're going to do is I want to in this video do a little bit of development work. I want to get open API integrated and then I also want to get this functioning this this little text field with the submit button so that once we click on it then it's going to give us some results. It's not going to be designed for yet because we haven't created the design. But I just want to see what type of results it's going to give us because I haven't built this yet. Like I have no clue. Hopefully it'll be able to do what we want. So what I'll do is go back here. And I had to restart everything because it froze after that previous uh logo fix attempt. So if I go back to Claude and I'll go ahead and specify um oh this would be a good time to run the init command by the way uh now that we actually have a project in here. So I'm going to hit init and this creates a claude markdown file MD file. So it's going to analyze the codebase structure and architecture and do all this other stuff. And essentially whenever you start a new chat, it's going to check that file. So it understands kind of what's happening with everything going on here. What's cool is it says it already knows like the purpose of the app based on the homepage. All right. So if we click on claude, this is the actual file project overview. Now we can edit this if we want right here or you can also do it through command um in claude code down here in the terminal. Okay. So now the next part is uh we want to we want to integrate open AI API so that we can then you know be able to start using that text field with the call to action submit button on hero section. So now I'm going to say um integrate open AI would be one such example. All right, let's hit enter. So, here's the tasks that Claude Code is breaking this down. Install the Open AI SDK dependency. Create API route for OpenAI integration environment variables. Update UI to display generated business ideas. Now the UI it creates we may not end up using. So now it's specifically focusing I already installed the open AI SDK create API route. So it's going through all these. So do you want to uh make this edit? Yes. And don't ask again. There we go. All right. It appears as though it is done. So now we're just going to go ahead and take a look at how we get the open AI API keys set up with the environment variables. All right. So I did exactly that. I renamed my environment variable from umample to justv. I put in the API key. This was super simple to follow the process. It literally takes like 60 seconds. Um, and then now it's time to actually test it. Enter an interest or hobby. Click show me the money. You should receive 8 to 12 business ideas. So, I didn't even test this yet. We're going to see if it works. Notice how this is already like grayed out. I didn't ask it to do that, by the way. Um, I don't know why it did that. I You wouldn't want that behavior. So, I would tell it to remove that. So, in interest or hobbies, let's just do I like reading romance novels and see what happens. Show me the money. generating. So, this is where I would normally kind of get rid of the UI right here and have like a loader of some sort, but ah, okay. So, there we go. It did exactly what we want. Yes, it's broken and ugly as hell, I know, but it did what we want. So for instance, romance book curator create a subscription box service that delivers curated romance novels to subscribers, a reviewer, writing workshop host, personalized romance novel writer, a book club or organizer, a podcast host, a novel editor, romance novel cover designer. So these are all a bunch of just, you know, different ideas. They came up with 12 of them. And now it's going to be up to us to uh format and structure this this data into a comprehensive UI that will then allow people to dig in further to each one of these ideas with another API call that will probably communicate with OpenAI but also other API services for instance like what if there's an API for different um jobs or like or per professions where they'll be able to hire people to help them to build that business idea. Or another idea would be to sell any type of products uh that have an API service like that would be relevant based on, you know, setting these things up. Or how about showing YouTube videos that are relevant that would help people set these ideas up. So there's a lot of ways that we could create a really useful app uh through AI. But right now, I'm happy with where we're at. That's a long enough video for now. In the next video releasing here in a day or two or three, we'll continue on probably step back into uh Figma in order to get the loading screen ready and perhaps also the screen that shows up after that that lists out all of the ideas. All right, so make sure to check out designcourse.com because I have other full projects that utilize AI in the full contest of design and code. And yeah, I will see you all very soon. Goodbye.