Okay, so how to look at where I currently am. Behind the scenes, I've continued the workflow that we followed in the last episode. Yeah, so pick a section. We have AI analyze it and extract as much data as it can find, CSS properties, margins, spacing, colors, font weights, backgrounds, things like that. And then it updates the layout to match, right? It's slow, it's incremental, and it's very, very tedious, but it's also maybe a limitation of what we might call

It's slow, it's incremental, and it's very, very tedious, but it's also maybe a limitation of what we might call like image based AI design, right? At the end of the day, it's an image. It can't really tell what the font size was or what the font family is. It'll do its best, but it doesn't have that data, right? It just has an image. But wouldn't it be cool if this were designed in Figma, for example, and we could extract the exact data

But wouldn't it be cool if this were designed in Figma, for example, and we could extract the exact data that was used to build it? Well, if we're using Figma, and if we're on a paid plan, it's just a reality, we can do that. And I'll show you how in this video. Okay, so have a look. I've switched over to my Figma account, and you can see all the designs for this section, right? So here, if I zoom in, is the main dashboard.

and you can see all the designs for this section, right? So here, if I zoom in, is the main dashboard. If I scroll over here, we can see the various dialogues. So for example, maybe we wanna work on this section right here. Well, we can see if I select anything here, I can extract all of the important data, right? What is the font? What is the weight? What is the size? What is the line height?

What is the size? What is the line height? What is the stroke? Stuff like that. So now what we can do is we can register a cloud skill and also pull in the Figma MCP server so that it can fetch this data and understand how to convert it into our layout. Let's go. All right, first step, add the MCP server.

Let's go. All right, first step, add the MCP server. You're just gonna Google it and that'll take you to the documentation where you can either reference it through the desktop server or remote. Either one works, we're gonna use remote here and we'll see instructions for whatever client you want. In this case, I'm using cloud code and all we have to do is run this command.

In this case, I'm using cloud code and all we have to do is run this command. Let's go. I'll paste that in and now we have it. So now if I boot up cloud and I run MCP as a command or skill, if I scroll down, let's hit space bar or enter to enable it and I'll probably need to authenticate. So let's do that as well. Yeah, requires authentication. All right, I grant permission.

Yeah, requires authentication. All right, I grant permission. And now if I run it again, we should be all set. Figma is now connected. Okay, next though, they also include a skill. Now the skill is not the replacement for the MCP access. It just provides more context and guidelines for how the AI can take that data and then gather what it needs. So let's pull that in as well.

and then gather what it needs. So let's pull that in as well. Now I can paste in the installation here, NPX skills add and it's the implement design skill that we want. However, though, if you don't know what that skill is or how to install it, another option is to boot up cloud and you'll see there is a built-in find skills skill. So that can be used to locate exactly what you want. So that would work as well.

So that can be used to locate exactly what you want. So that would work as well. Okay, let's go ahead and run this. And now this is available for any agent you use. Okay, cool. So once again, let's boot up cloud. If I run skills, we should see implement design and we do right there, we're in business, cool. So now we have the MCP server added, we have authenticated, we have a skill, I think we're ready.

So now we have the MCP server added, we have authenticated, we have a skill, I think we're ready. Here's the next step, check this out. Imagine we're working on the assignment dialogue which still needs some work. Actually on that note, let's have a look at where we currently are in terms of that work. Back to our design, let's scroll down to the assignment section, new assignment and yeah, this still needs some work.

to the assignment section, new assignment and yeah, this still needs some work. So for example, let's go to that one screen, it's okay, but it doesn't match what we have right here. So select series, select series, yeah, there's just endless little differences here. For example, where's the little button here that we see scrolling down. Where are the buttons here? Well, back assign, not quite the same, you get the idea.

Where are the buttons here? Well, back assign, not quite the same, you get the idea. Okay, so here's what we'll do. I'm gonna select this section right here and I will right click and choose copy link to selection. This will give us a URL to that specific node and then I can feed that to cloud. And now it knows that it can interact with the Figma MCP server to fetch all of the data for this. Okay, for example, can you access this Figma link?

with the Figma MCP server to fetch all of the data for this. Okay, for example, can you access this Figma link? Now, once again, while this is working, I wanna remind you, if you have a free guest account, I'm pretty, pretty, pretty sure this is not going to be available to you. This is something that would require one of the monthly paid accounts. But if you're on a team and you use Figma as part of your workflow, then likely you are

But if you're on a team and you use Figma as part of your workflow, then likely you are on a team account or a paid account. But otherwise, unfortunately, this is not gonna work and you'll have to defer back to something like an image based design. Okay, so anyways, yes, it can access it. It can read all of the various data. I can even say, can you access the various design, tokens and font sizes and families?

I can even say, can you access the various design, tokens and font sizes and families? And of course it can, but just to show you. And yes, we can. So notice it has access to the line hides, the font sizes, the families. Now, it knows the exact font that's being used. Excuse me, if we scroll up, it knows all of the various CSS variables, you get the idea.

it knows all of the various CSS variables, you get the idea. Okay, so now we're gonna say, update four teams show page, the new assignment dialogue, step two, to closely match that Figma link. Consider the Figma link to be the source of truth. Okay, so yeah, think about the difference between this approach and the image approach. With the image approach, it's just taken a look

between this approach and the image approach. With the image approach, it's just taken a look and it's like, okay, I can kinda see that. Oh, that's space between the image there in the checkbox. That's probably 12 pixels, but maybe in reality, it's 18 pixels. Now, using this approach, it's just going to be that much more exact because it has access to the specific values as you see here. All right, so if we refresh, yeah,

because it has access to the specific values as you see here. All right, so if we refresh, yeah, I can already see many things have been fixed. So for example, the series title now matches up. We have the arrow here. It fixed the line height here. I can filter to find what I'm looking for. These are aligned to the center, but I will note it's still not perfect. So even when it has access to the Figma file

but I will note it's still not perfect. So even when it has access to the Figma file and the tokens and the data, it will still just make mistakes and that's where we currently are. So this is why just as if you were writing back-end code, you need to have systems in place to remind it, but when you're done, load it in the browser, take a screenshot, compare that against the original design. Do they match up?

take a screenshot, compare that against the original design. Do they match up? If not, continue the load. So even with Figma files and an MCP server, it can still make mistakes here and there. so you got to stay on top of it. (squeaking)