The New Figma Workflow - Code to Design & Vice Versa

All right, everybody. This is a big one because if you're a Figma user, you've been waiting for this ability for a long time. They just updated the ability from yesterday with the MCP server in skills to go from code to design in Figma and it will automatically extract all your design system like your tokens, your variables, and implement them in a 1:1 ratio in Figma itself. Let me show you exactly how to get started. First, I'm going to link this document right here in the description. And you have to ask yourself, you know, what are you using? I'm using cloud code. So, I'm going to click cloud code right here. And then this right here is what you want to paste into your your terminal right here. Now, I've already done it. So, if I go here to my terminal and I type in for/mcp, you'll see right here we have this integrated. Now, you may have to update yours if you already had the previous one installed. So, just to make sure everything's working, go ahead and send this prompt. tell me about the Figma MCP server and its capabilities and skills. And it should spit out something similar to this where it shows you all the various tools that it has. And if you have this, you're ready to rock. So the first step is go ahead and get a document up and and open in here inside of Figma itself. And you can see I just have a page where it's completely blank. And then go ahead and spin up a dev server based on your project that you already have. See right here I have this one. It's called landscape. This is actually a part of a course that you can gain access to right now via early access and it's just a I'm showing people how to create a SAS that's AI infused within Cloud Code. So, we're we're handling everything. This is a landscaping tool uh that landscapers or homeowners can use to kind of just reimagine their landscaping. Now, this design right here, this layout has been completely vibeed designed, meaning I haven't had any input in the design. I've let the AI do whatever it wants. So in this context, I want to elevate the design because I'm a designer. So this is the perfect use case for, you know, this whole Figma MCP server setup. So I'm going to copy the URL of this layout specifically because this is the layout that I want to, you know, use to enhance. All right. So this is what we're going to be using right here. Here's the URL. I'm going to say use use Figma, not generate Figma design. I'll I'll talk about that in a second to create this page in my landscape Figma file, which is already open in Figma. rebind design tokens from global CSS. Um, you don't have to say that specifically, but just make sure to say, you know, established design tokens, variables, etc. Um, and creating matching Figma variables. That's important. And build every frame with auto layout bound to those variables. Okay. So, the reason I said not generate Figma design is because that's what it used initially. And I think that's the older way because it didn't import any of the actual variables or anything. So it if that happens to you again you want to use something discreet like this in terms of your prompt. Now as you can see um it is actively recreating the design here in Figma. All right it's done. So basically if we uh select the frame one of the things to make sure that this worked is that you want to see uh variables right here. Now I don't know why some of them aren't in variables but most of them are at least. And you can also check by clicking off of here and then going to the variables section. Uh and you'll see design tokens and you'll see all of these right here. Okay. So now another thing you want to test is you know everything should be in auto layout and this is working actually perfectly. So good. I do want to update here and actually import the images myself. Okay. So here's the design and let's say you know at this point we can go ahead and start making adjustments to our liking. Now, this isn't going to be the final result because I'm just doing this very quick. But I just want to show how you can make changes and then bring them back into your codebase. So, maybe one thing that I'll change here if I go to variables is the background color. So, if I look at background, here's background. Um, I think I'll use something that's kind of like in the orang-ish yellowish tint and just give a little bit of a kind of a real just kind of cream color background. All right. So, as you can see, because it's already hooked up, it already updated to this background color for me. Now, maybe we'll take the fill. Now, the fill is also tied to the same background color, but I don't want that. I want to have a different fill for the navbar, and I want to make it white. All right. So, at this point, since I've introduced another color for specifically the header background, I'll go ahead and add this right here as an actual design token. So, I'll call this navbar id bg and it's white. Okay, great. Um, another thing I might do is maybe I'll get rid of the stroke that's been added here automatically that already exists in the code version, but I don't want that. So, I'm going to remove the stroke. So, I went ahead and made a number of different design changes. I'm I'm not 100% happy with this. I'm just trying to do it quickly so we can, you know, get this, you know, at least see what the heck it changes and if it does a good accurate job. So, what I'm going to do now is rightclick and copy right here. Um, link to selection. All right. And with that said, I can go back. All right. So, I've made a series of changes to the design. Ensure you use the proper skills associated with use Figma to accurately update our design system and the design changes itself from this Figma document to our project. Let's see if it works. All right. So, this is what I came up with. And I have to say this is actually pretty disappointing. Um, when I prepared for this tutorial, it did a much better job the first time around of actually translating what I wanted. So, I'm going to go ahead and be like, "What screenshots are you taking?" Because what it does is it takes screenshots to compare it to the other design. Obviously, it didn't import the background. It didn't uh change, you know, it made this border that I added like 100% black. Uh, so we're going to have to reprompt it and be like, "Hey, this isn't actually a 1:1 integration." All right, so here it is. It did a better job right here. It looks like it's a good 1:1 uh ratio of what I updated in Figma. Now, because of the non-deterministic nature of LLMs, I'm assuming that's why this happened. I had to reprompt it. Um, the first time I did it before recording this video, just as a test, it actually did nail it. I So, it's one of those things. It's not perfect. Um, but now that we have this, we can now go from design to code, code, design back. Definitely check out the course for this project, though. This is super cool. I'm having a lot of fun. I'm teaching Stripe integration. I'm teaching branding. I'm teaching UIUX. I'm teaching everything you need to, you know, learn how to use cloud code to create a modern AI SAS. So, definitely check this out. You can take it now for a discounted price because I'm currently recording it as well. And I will see you all very soon. Goodbye.