# From Figma to Claude Code: The AI Workflow Designers Are Missing

## Метаданные

- **Канал:** Design Pilot
- **YouTube:** https://www.youtube.com/watch?v=Ni0cXeSkSdI
- **Дата:** 27.04.2026
- **Длительность:** 1:12:33
- **Просмотры:** 2,655

## Описание

🚀 Learn to Build Full End-to-End Products in Cursor: https://learnproduct.design/cursor

🔥 Get 50% of your first month on Cursor — https://cursor.com/referral?code=BQ7HMBSGJSH4

In this tutorial, I'll show you how to build an AI-powered design workflow by integrating Figma with Claude Code or any Vibe Coding AI Tool of your choice. I'll explain the roles of the Figma MCP and Figma Console MCP, detailing how to use tools and skills to automate design tasks. You will learn how to set up the Figma Desktop Bridge, configure design tokens, and perform parity checks between Figma designs and code.

🔗 COMPLETE GUIDE TO AI-POWERED DESIGN PROCESS: https://youtu.be/idPrScvnSro

🧰 AI Designer Starter Pack
— Get 50% of your first month on Cursor — https://cursor.com/referral?code=BQ7HMBSGJSH4
— Prompt Faster with WisprFlow: https://ref.wisprflow.ai/chethan-kvs-2fot
— Create an account on Mobbin for free: https://mobbin.com/?via=chethan
— Which AI Vibe Coding Tool to use in 2026: https://youtu.be/_MXdrajtg2U
— Ultimate GitHub Guide for Beginners: https://youtu.be/1iiq__N1SYk
— Free AI Code Reviewer — https://www.cubic.dev/invite/design-pilot
— Easiest to use Backend Service — https://convex.dev/referral/CHETHA8049

🔶 Chapters
0:00 Introduction to AI-powered design workflows
0:54 Understanding MCPs: Tools vs. Skills
3:18 Comparing Figma MCP and Figma Console MCP
4:15 Exploring official Figma documentation
10:37 Setting up Figma Console MCP
16:07 Creating a Phased Implementation Plan
24:24 Cleaning up and applying Variables
48:54 Building + Testing the email row in code
---------------------------------------­----
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3

Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8

Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi

Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1

After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk

UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW

Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9

Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv

eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)

## Содержание

### [0:00](https://www.youtube.com/watch?v=Ni0cXeSkSdI) Introduction to AI-powered design workflows

— Hey everyone, hope you're all doing well. Welcome back to another video on the channel. Now, this video is a small part of a 4-hour long video, which I recently released on my channel, which is all about creating AI-powered design workflows. Now, if you want to watch the whole 4-hour long video at a stretch, go ahead, check out the link in the description, and watch the entire video. But, I'm making these small videos so that it's easier to grasp concepts and it doesn't feel too overwhelming. So, in this video, I'm going to help you understand how to take what you have in Figma and convert that into code so that you can then use that for various purposes. I'm going to talking about how you can use the Figma MCP and the Figma console MCP hand in order to make sure that you prepare the designs in a way that makes it easy for you to convert it into code. I'll also teach you how to do a parity check so that you can check whether what's implemented in code matches your design. So, there's a lot to cover in this video, and so without any further ado, let's get

### [0:54](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=54s) Understanding MCPs: Tools vs. Skills

started. Now, before I go ahead and talk about MCPs, I'm going to explain a concept of why MCPs need to exist and what is it that they actually do. And understanding this is super important. Now, let's take an example where let's say you want to cook some food for yourself, all right? Now, in order for you to cook food for yourself, you're going to need the recipe. You're also going to need a few items, and utensils. Now, if you have these three things, you can then go ahead and cook food for yourself. But, let's say you don't have time and you're quite busy and you want to hire a cook to do that for you. So, the cook is going to come over to your house and cook the food. You will provide the recipe, the items, and the utensils. Now, you don't want to eat the same food every single day. So, what you do is you basically ask the cook if the cook can make Indian food sometimes or Italian food sometimes or even desserts, let's say it's a festival or you're craving something sweet, you want to eat a dessert. Now, essentially what the cook needs is the recipe, items, and utensils, but the cook also needs to know how to use this to make Indian food, Italian food, or desserts, for example. And this is what we call as tools versus skills. Tools are essentially the actual raw ingredients that it needs, which is the recipe, the items, and the utensils, and skills is what you do with these tools. So, you could use the same tools to make Indian food, you can Italian or desserts. So, if we have to bring this into the world of AI, AI will use tools and skills in order to do a particular job for you. Now, tools are provided by the actual MCP. So, anytime you use an MCP, tools come along with that MCP. And skills are essentially normal plain text files called. md files, also known as markdown files. They are just plain text files. That's about it, right? And tools come along with the MCP. And I'm going to show you the examples of all of this very soon. One more difference is that the MCP is actually given by the provider and also the tools that come along with it. And these skill. md files are usually prepared by you because these skills can be customized to whatever needs that you have, and these skills will then use the tools to execute your actions. Now, sometimes the MCP providers also provide skills.

### [3:18](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=198s) Comparing Figma MCP and Figma Console MCP

Now, we will be using two MCPs in order to create stuff that we want. The first one is obviously the official Figma MCP, and the second one is called the Figma console MCP. That's the name of the MCP. The Figma MCP is the official one, and the Figma console MCP is a third-party MCP, which is created by a company called as the South Left. Now, the Figma MCP comes with 16 tools, but the Figma console MCP comes with 94 plus tools. And this is a massive difference. And this is the number at the time of making this video. Both of these companies could extend the number of tools later on. And of course, I'm going to show you these tools and how these tools look like very soon. But, just because the Figma console MCP has 94 plus tools, doesn't mean that you always have to use that. And I'm going to explain to you why it's not obvious that we should use Figma console MCP just because it gives 94 plus tools.

### [4:15](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=255s) Exploring official Figma documentation

Now, this is the official Figma documentation, and what you see here is that it says the Figma MCP server provides the following tools. So, all the tools that you see over here are created by Figma in order to do a very specific task, right? So, for example, this tool called generate Figma design generates the design layers from interfaces. You have something called as get design context. So, this is the name of the tool, which basically gets the context for a layer or selection. So, depending on the task you want to do, these are all the tools that basically allow it to do a certain thing. And knowing what these tools are is extremely important anytime you're using an MCP, right? And one of the things that was very recently released, well, maybe not recently, it was the most recent one that was released, is something called as the use Figma. This is essentially a general-purpose tool for creating, editing, inspecting any object in the Figma file. So, use Figma pretty much behaves like a designer who could create things, edit things, or even inspect things in a Figma file. All right? And when you click on each of these items, there is a detailed description of what exactly happens and what is it that it does, right? Now, it's a good idea to actually go through this slowly and you know, in your own sweet time. But, one of the things that I want to talk about is this use Figma because this is one of the most important ones. So, when I click on this, you can see we end up over here. So, you can see here it says this is a general-purpose tool for writing to Figma, which means it is used to edit, create, delete, inspect any object, all right? And it can do this to pages, frames, components, variables, variants, styles, text, images, and more. So, it's pretty much like this all-in-one tool that does a lot of things, which a designer also would do. When relevant, the agent will first check your design system for existing components to reuse before creating anything from scratch. So, as a designer, this is how we would think. Anytime we have to create a design, the first thing we think about is that do we have a component for this? Is this something that we can reuse, right? And that's what the agent is also going to do. So, Figma has basically set up this tool to behave like a designer. And I'll give you an example. Here it says you can ask it to create or modify designs, which is adding a new frame, add a button component to use the correct fill color, set up tokens, build or generate component or various systems and variant systems, fix layout issues. So, it can fix the auto layout spacing, which is pretty amazing. These are all the things a designer actually does. Now, all of these things are tools. Now, one of the things you see here is that the use Figma tool is best invoked with the Figma use skill. Now, don't get confused with the naming. This is just use Figma, which is the name of the tool, and Figma use is the name of the skill, right? So, they've just interchange the wording. Now, when I click on this, or you can actually come down over here into the skills section, when I click on the Figma use skill, we will actually come to this skill section, right? So, this has This is the Figma skills for MCP. Now, these skills are provided by Figma itself. Now, ideally at the end of the day, these are just markdown files, and I can show you that also very soon. These basically have instructions on how a tool is supposed to be used. Now, it can still be a little complicated to understand what is the difference between a skill and a tool, but as you go through this video, you will realize the actual differences between tools and skills. Now, the main important thing about skills is that you can see here, this is probably the most important thing as to why we need skills. Without skills, you'd need to describe each step yourself every single time. Now, if I have to show you an example of what this means with the cooking example we were talking about, so let's say in this case, every time you want the cook to cook some Indian food, you don't have to tell the cook to make it spicy. When you say Indian food, the cook is going to understand that this is supposed to be spicy food. And that's typically how a skill is set up. The skill basically says that when you're making Indian food, always make it spicy. It's all of understood. Now, for the Italian example, if you're making pasta, maybe there's a specific type of pasta you want the cook to use. And so, you don't have to tell the cook to use the specific type of pasta every time. The instruction that you give when you say make Italian food means to use the specific type of pasta. Similarly with desserts, if you're asking the cook to make some dessert, and it can have multiple flavors, the default flavor the cook should always use is chocolate flavor. So, if you want to make a cookie or a bread or a cake or whatever it is, if it can be made with any different flavor, the cook should automatically know that chocolate flavor is the expected flavor. You don't have to tell the cook to make a dessert with chocolate flavor, right? So, that's the point of having skills because you don't have to give these tiny details and instructions every single time, and all you have to do is just say Indian food, Italian food, or cakes, desserts, pastries, whatever it is, right? So, hopefully all of this makes sense. So, now you can see here that Figma actually provides around six to eight skills over here that we can use. And these have very specific instructions, and the MCP server will know when to trigger these skills automatically, all right? Now, let's take a look at the Figma use skill, all right? Now, this is a skill that triggers the right to canvas feature. This is essentially used with the use Figma tool. And when you want your assistant to create or modify context directly in Figma, such as building frames, placing components, etc., this skill makes that possible. And so, there's a lot of information in this skill, and so let's actually take a look at how this actually looks. So, now come down over here and click on this MCP server guide directory. And now, if I come down here to the skills section, we see we have all of these various skills, and we're going to click on Figma use skill, and then click on the skill. md And this has basically all the instructions on what the tool needs to do in order to get the job done properly, right? So, you can see here that there are a lot of rules and instructions for it to follow and we don't really have to understand or go through any of this, but this is going to be done automatically by the AI and it's going to understand what it needs to do, right? And so, there are workflows and you know, there are even, you know, troubleshooting cases where in case something goes wrong, how this needs to be fixed, right? So, depending on what the task is, the AI is going to pick the respective skill and apply that skill along with the tool so that it knows what it needs to do with the tool and how it needs to use it. Now, with that being said, let's move on to the Figma console MCP. Now, in the Figma

### [10:37](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=637s) Setting up Figma Console MCP

console MCP documentation, you can see here this is the official website and there's a lot of information over here. What we will do is we'll come down over here to the tools reference section. Here you can see that for every single tiny action, they actually have a tool that does a specific task. So, for example, even navigating pages is going to be done by the Figma navigate. And they've ordered it into various categories, which is debugging, design system related. So, for example, even for design systems, they have so many specific ones. For components and for variables, this is crazy. For creating variable, they have one tool. For updating, they have one. For renaming, they have one. And deleting, they have one, right? So, the reason they have all of this split out is because this one is sort of more specialized and not a generalist tool because this will result to a higher chance of execution. And the goal with this is that if these tools are given very specific tasks, they're less likely to make mistakes. But with the Figma official MCP, because they are um general purpose tools, they have the skill files which sort of help guide them. So, it's either creating individual tools which are specialized or you take a general purpose tool and you combine it with a skill to get the job done really well. They also have a tool called as design parity which basically checks the parity between specs and code. And we will see an example of this in this video. You can definitely compare what you have in code base and what is there in Figma and make sure if there is proper parity or not, all right? Now, the question is which one should you use? The Figma MCP or the Figma console MCP? And so, to do that I'm going to come over here. Now, there's a lot of information over here, but at a high level you can see that the Figma MCP and the console MCP can all do the exact same thing except for this one case which basically says execute arbitrary plugin API JavaScript. Now, this is not relevant for us right now, but in the rest of it is. And because for all of these things like creating frames and tools, creating components, modifying auto layout, they have dedicated tools, the use Figma tool by Figma MCP can pretty much do everything, which is why it is accompanied by the Figma use skill which has instructions on how the tool needs to be used. So, now with this, the question still arises, when should you use what? So, the answer to that is at the very bottom and they've given a very nice detailed breakdowns you can check this out when you have some time. But I'll come down over here to the product designer section. So, you can see here it says, "For designers managing design systems, Figma MCP is useful when you want an agent to create a design from code references. " Now, this could be either from taking the code and constructing a design and pasting it into Figma or it could still be generating any design that you have from a reference as well. That also works. And the Figma console MCP is better when you want to manage your design system, need to do batch operations, want real-time awareness of what is happening in your file, score and lint your design system, design to code audit, you want to read annotations and post review comments. So, anything that has nothing to do with generating designs, the console MCP is better equipped to do that and the Figma MCP is specialized for doing the actual grunt work that designers actually do, right? So, this is the difference between the Figma MCP and the Figma console MCP. Now, the one thing you need to do is you want to install the console MCP and how do you actually do that? So, you want to come here to the setup guide and there's a lot of instructions and details over here. So, what I would do is take your time and try to figure out how to set this up. It's not really rocket science. It's just that there are too many ways to do this. Now, the one thing that you want to keep in mind is make sure that they have multiple setup methods like you they have something called as the local git, they have cloud mode and remote. You want to make sure that you choose this option because this gives you the maximum number of tools. Now, I'm not going to the depths of what is local versus cloud, what is remote. It's going to be too complicated to explain all of that right now and it's also not relevant at this point. So, instead just focus on this because it has 94 tools. And you want to choose your AI tool which is if you're using the Cloud Code CLI, use that. If you're using Cursor Antigravity, use that. Cloud Desktop is what we will be using, so you can use that if you're using Cloud Desktop. They also have one for Codex, so you can choose that as well. Um it should be somewhere over here. Let me see if I can find it. There should be something over here. I'm not sure where it is, but you can see here they have a Codex setup. So, if you're using OpenAI Codex, you could use that as well. Now, once that's done, there's one more thing that you have to do is you need to install something called as the desktop bridge plugin. This plugin is a plugin that, you know, works like any other Figma plugin. Now, there's a lot of instructions, just go ahead and follow that. But in short, what you would want to do here is come to this documentation over here and this is the official website. And if you click on this, you'll basically come to the main landing page. Click on code and download the zip file. And once you download the zip file, you can find this folder called as the Figma desktop bridge. You want to click on that and then you will find this file called as the manifest. json. And this is the actual plugin file. So, when you open up the plugin in Figma, use this to open that up. Open it with this and the bridge plugin is going to be open. This bridge plugin essentially is like a door that allows or closes the entry for AI agents. So, when this bridge is active, it means that the AI can come in, inspect, edit. When this plugin is not turned on, that means nobody can enter the Figma file and do anything. So, hopefully all of this makes sense. So, with that being said, let's go ahead and jump into Figma and let's get started. All right. So

### [16:07](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=967s) Creating a Phased Implementation Plan

let's go ahead and finally get started. Now, let me give you a quick preview of the Figma file that I have. So, what I have here is the email row component. We've got a couple of states over here and various possibilities. And I also have the various icons and atoms that we will be using inside the email row component. Now, I also have annotations. So, if I open that up, I have got some annotations added over here which we will take a look at a little bit later. And what I have here is basically the various possible customization options for the text. So, for example, the sender name variants is This is how it would look if it's a single message or a single reply and then if it have more than two, more than three, and truncation rules, all of that. And then we also have this option to sort of show the category. So, if I can come here and say catego- uh show category of the email. All right. We can show this pill. Then we have our title variants as essentially how this would look where it is truncation, the maximum width and things like that. Then we also have the trailing icon button and label. All right. So, we have the icon button and the label over here. I've got some specific rules also. For example, the icon button can be a paper clip or a calendar icon. You can have up to two labels and here you could have both an icon button and labels. And then here for the date, we have just some uh date formats, right? So, there's quite a few rules. This is how it looks in dark mode. And then I also have the section header. Probably going to go ahead and say section header. And section header. All right. And then with this section header, we are then going to go ahead and have this inbox template where we have the slot component that I created and we essentially will be able to take the section header and also the email rows and put that over here. And of course, AI is going to be doing this for us, right? And so, we essentially need to give this template to AI so that it can use that template and paste the design here in Figma. All right. So, I'm going to be breaking this down into multiple phases because this is going to be a complex workflow and we're going to see how to set all of this up. So, the first thing is if we're going to be cleaning up the color and typography variables. Now, what you see over here is I have my text styles that I've added, but they they're not really mapped or assigned to tokens. And if I come here to my variables section, you can see I have my raw colors, but then I've actually used the correct colors, but they're not really organized very well over here. And then I also have my semantic colors. This is something that I've organized to an extent, but then you have content, surface, border, and fill, but these are not named correctly, right? That's something that I want to do. Then we have our size which I only have one right now and we will probably add more. We also have radius over here and also these are not named properly. And we also are missing our paddings and our spacing tokens. And for that, we're essentially going to ask AI to do that. So, in phase one, we're going to clean up the color and typography variables and we're going to ask it to not include any business logic in the variable names, right? The goal here is to ensure that it does not include any business logic and it feels very out of the box. Number two is we are going to review the email component and extract the sizing and spacings. And then we're going to create variables using whatever we know and then create proper token names and apply it to the component, right? So, for example over here, if I click on this row, you can see here that we are using values, but these are not assigned to any variables, right? So, pretty much anything over here. And these are really properly constructed with auto layout over here, all right? Then phase three is where we will build the email row in code and we will create a preview website where we can customize the settings on the website and test out the component with various configurations, right? So, it's going to be like a playground for us. And to do that, we are going to first ask it to create a global tokens that will match Figma. And then, we will use those global tokens in order to create the component in code, all right? And then, we are going to read the annotations and we're going to ask it to read the annotations to get details on specific rules. For example, all these annotations over here. And then, we're going to create a Next. js project where we will create a preview website and interact with it. Then, phase four is once we have the code, once we have this working really well, we're going to create a skill that basically creates an email row for us and paste that into Figma. Now, we're going to be making it to paste a single row and we're going to start off with that. And then, phase five is we're going to update this to create an entire table of emails along with section headers and not just one email row. Then, phase six is where we'll update this again to now create an entire screen and fill in the emails inside, right? The last phase would then be to use this inbox template and it's going to create those emails and paste that inside over here, right? Now, we're going to go ahead and start off by doing all of this, but we also have a couple more things. Once this is done and everything works perfectly, we're going to go ahead and create what we call as a god skill that allows anyone to execute these phases, right? Maybe three, four, five and even probably six here. For any other pattern or component such as drawers, probably, or forms, menus, whatever it is or Kanban boards, whatever it is that you want to do or maybe even chat interfaces. Okay? So, we can apply create a god skill that can create all of this for us. Then, phase eight is we're going to learn to create interactive prototypes because we would have everything that we need in code. Then, phase nine is to document the component specs in Figma using Uspec by Uber and Uspec was a documentation workflow that Uber recently came out with. I'm going to show you how to use that. And then, phase 10 is going to document all of this on a website as an interactive component so that it feels pretty real. Now, let's go ahead and finally get started. Now, I'm going to be using Claude code over here. I have this empty folder called as Figma workflows and we're going to go ahead and get started. Now, before we get started, we can come here down to connectors and we're going to have to check that the Figma MCP and the Figma console MCP are connected. So, as you can see here, I have the Figma console MCP selected, which is perfect. And if I come down here to the customize section, here I have my personal Figma official one selected and that's also installed. This is the official MCP server. So, we're going to be using both of this. All right, perfect. So, now I'm going to come back over here. We're going to start off in a new project and I also am going to go to Figma and we have this Figma desktop bridge plugin ready. So, you can come here, go to plugins, you can come here and choose import plugin from manifest and then you want to choose the Figma console MCP and you want to come down and choose the Figma desktop bridge and click manifest. json. This is essentially the plugin file, all right? And then, this is going to open up over here. So, go ahead to Claude code and I'm going to say check Figma status with Figma console MCP. All right, so there's a little bit of a hiccup and so I finally fixed it now and now we can see that we are connected finally over here. All right. So, now I'm going to go ahead and select Opus, all right? And in Opus, I'm probably going to choose the effort high and I'm going to come here and choose the plan mode, which is over here. Now, we're going to go ahead and actually explain to Claude what is it that we really want to do over here. And we're going to go ahead and try to explain all of this in a simple way. Now, I'm going to be using this dictation tool called as WhisperFlow and you can go to the link in the description to check it out and use my affiliate link. I'd really appreciate that. All right, so let's go ahead and get started. Let's go ahead and make a plan for a couple of workflows which allow me to prompt and use a skill that creates a design and paste into Figma. All right? We're going to go ahead and do this. We're going to start off by testing this with an email row component for an email app.

### [24:24](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=1464s) Cleaning up and applying Variables

Let's build this plan, which includes multiple phases. Phase one is basically going to look at the Figma variables, specially the typography and the color variables, and organize them and come up with proper naming conventions for them. All right? So, this is going to be phase one, all right? Uh and actually, we can actually bring this down and here we're going to say phase one. Okay? And if I come here to Figma, we want to make sure that we uh have this, all right? And I'm also going to say when naming these color variables, do not include any business logic into it. For the raw color values, ensure you have two sections, which is neutrals and accent colors. All right? That's fine. Then, moving on to phase two, I want you to review the email component and identify the paddings and the spacing and any corner radius values. Once you identify these values, I want you create variables in Figma for those values and then apply those variables to the email row component. All right? So, this is going to be phase two, all right? Now, one thing to note here is that we also have these items that we need to apply tokens to. So, I'm also going to say when you are reviewing the email row component, it will also have items that are used inside the component. I want you to apply the spacing, paddings and size tokens to the main atom master components as well. All right? So, there we go. We're going to apply that over here as well. Now, coming to phase three, we're going to ask it to build the email row component in code and a preview website where we can customize the settings on the website and test out the various possible component configurations and create global tokens and all of these things. All right? And we'll come here down to phase three. All right? In this phase, I want you to build the email row component in code and also the various atoms that come along with it. Then, build create a file with the global tokens that we have from Figma. Make sure it's a very close match. Apply these global tokens when creating the atoms and the compo- and the email row component in code. Do not hardcode any values or create component specific tokens. Make sure that all tokens are being used from the global tokens. We have that and then, I'm going to ask it to sort of read the annotations and create a Next. js project for the preview website. I'm also going to say a few more points here. Ensure to read the annotations that I have added to the instances to understand various behaviors and customization options. All right? And then, create a Next. js project where I can preview this email component on the browser and have customization options that allow me to play around in this playground that you create. Now, there are actually a couple more things that I want to add, but that's essentially for phase four, five, six where we basically go ahead and create a skill. Now, what I'm going to do here is in this plan, I'm going to tell it what are the next phases are going to be, but then, I'm going to sort of keep it as a pending state and when we come to these specific phases, we're going to dive deeper into it, all right? Now, I'm going to come here and say the next phases, phase four, five and six are going to be all around creating a skill that when triggered will create the design referencing the code files that are created in the project folder. Create a design and then paste that into Figma. Keep this as an open point, but phase four is going to be about creating an individual email row item. Phase five is going to be about creating a set of emails along with section headers and phase six is going to be about taking these email groups and adding it into a template which also has elements such as the sidebar and filters. I will provide more details when we come to this, but for now keep it as an open point, but keep this in mind when creating the current plan. Now, proceed to create the plan. Feel free to ask me any clarifying questions that you want to get more information. Do note that ideally, this is not just for the email row component. While this for this project will be the email row component, this system can be applied for making other patterns such as drawers, forms, chat interfaces, etc. All right? So, we're going to go ahead and now run this and we're going to see what is going to happen. I'm actually going to actually probably stop this. We're going to go ahead and actually copy all of this. Paste. Now, there's one more thing I actually want to say. I want to say create a checklist that you can refer to and check off items as and when you complete them. All right? And what I'll also do is I'm going to give it access to the Figma files over here. So, I'm going to go ahead and copy this and say email row. Paste that over here. I'm going to copy this. I'm going to say components, I'll say atoms and icons. All right? And then, I'm also going to add this. This is basically going to have instances of the email row that has the various customization rules. And text rules. Right. Now, we're going to go ahead and run this. Right. Now, the great thing about Claude is that you can actually see a lot of details about what it's actually done. And you can see here that it's first gathered all the design token data from the files. And so, it's Oh, okay, it actually closed all of that. It actually ran three sub agents. And sub agents are agents that have their own context window. So, they can be given dedicated tasks to do. And they have their own context window. So, it's not going to be distracted from a lot of unnecessary things. So, the first sub agent is going to explore the variables. The second one is going to ex- explore the email row component. And the third one is going to explore all the instances annotations. And then it's going to have like a complete high-level view. And then it's going to pass on all of this to the main primary parent agent. And that parent agent is going to have all the information to create the plan. So, you can see here that I now have a thorough understanding. Let me uh launch a plan agent to synthesize all the findings and create a dedicated plan. So, now it's going to create a new agent, which is basically going to design the implementation plan over here. And we can also check this out a little bit more. So, you can see here that there are some development notes. This is fine. Component styling, this is fine. Then customization rules, so it's actually looked at pretty much all the annotations. All right. And it's figured out pretty much everything. Annotations found, as you can see over here. Pretty cool. And then the variations over here. A lot of details. These are all the component properties that we have. So, it's done a like a very thorough job and it's done it pretty quickly as well. So, that's a pretty good. So, for the spacing tokens, it's actually asking which naming convention do you prefer? And [snorts] this is so great because I actually tested this with cursor and with Codex. And they didn't really care about these things. So, here it's basically asking base unit index. So, for example, spacing {slash} zero {slash} one, where you can add four pixels, six pixels. You've got basically like this uh multiplier. Then you have pixel value name, which is spacing four, spacing six. And here you have t-shirt sizes. Now, depending on what is your preference and what makes sense for your design system, you can think about that. I'm going to go with t-shirt sizes over here. Now, for the Next. js project, which styling approach do you want to prefer for components? It's asking CSS, Tailwind, and plain CSS. Now, if you don't know the difference to this, that's totally fine. You can use the recommended one, and that should be fine. Then, it's asking which font uh is it included or should I use is the Monotrust font available as a file I can include in the project or should I use a fallback, right? And so, basically it's asking which one to use. You can say that I'll supply the file and load it wherever it is. And I can provide the font files. So, I'm going to go ahead and add that as well. And then for the raw naming coloring, should the collection stay as {dot} raw colors or be uh renamed? So, it's basically asking what it needs to be called. So, for example, if I come down here to Figma and I come to my variables, I've called it {dot} raw colors. It's basically asking me what to call it, too. And uh we can come here and say, you know, uh rename it to uh primitives, and I think that's uh fine. All right. Now, a couple of things that we can do before when it's creating the plan is that it actually did a ton of work. And it's actually It's really fascinating how it does so much work. So, I'm going to close this up. For the implementation plan, it did a lot of work. So, it got all the colors. And then it's preparing a list of plans, prerequisites, open questions. And it's basically revisited and done a ton of work, as you can see over here. There's a lot of things that's happening over here. All right. And it's actually gotten a ton of context as well. Then it's also going ahead and capturing screenshots. So, for example, it actually got the screenshot of this, which makes sense. It also got screenshot of this. But then, it's also coming here. And you can see that it's actually taking a screenshot of the template file, also, which I actually never gave. So, you can see that it says, "Let me also capture the inbox template and section headers for phase four to six context and check for annotations deeper down in the tree. " So, it's actually doing a lot more than we did it. And it's behaving essentially like a very senior experienced designer. All right. And then it ha- It found a couple of critical information regarding annotations. That's uh totally fine. And then um it created this plans. file. All right. So, this plan that you see over here. And then it loaded a couple of tools for asked me a question. And now we basically have this over here. All right. So, you can see here that we're building a reasonable design-to-code workflow system, starting with a Notion mail email row component. The system bridges the Figma design tokens to production codes and includes skills that generate the Figma designs from code references. While this project focus on the email row, the architecture is designed to generalize any UI pattern. This is pretty much very important. All right. So, it has a link to the Figma file. This is essentially the node. And then we have a checklist over here. Phase one, phase two, phase three, phase four, phase five, and phase six. All right. So, I'm going to come here and I'm going to close this up. All right. say, "Can you save this PRD, this plan in the current project folder? " All right. Now, the reason I'm doing this is because I don't want to execute using Opus. I essentially want to use something like Sonnet and set the effort to low because for the phase one, it's just going to be basic, simple editing of the Figma variables. All right. So, you can see here it saved it to plan. md. And now I'm going to go come here and say, "Do nothing. " Because I just want to get rid of uh this area. So, all good. Now, one thing I'm going to do here, I'm going to come here and type in {slash} and type in context. And now, when I run this, I'm going to just going to go ahead and choose Haiku for this. It's basically going to go ahead and identify how much context have we already used. So, for until now, you can see that we have used in this entire chat conversation only 40%. Now, for at least phase one, I'm going to continue using the context window over here because it's only used 40% and we're not going to use a lot more for phase one. So, I'm going to come here and choose Haiku. And because we're going to be only editing things in Figma, Haiku is should be more than enough. I'm going to come here and say, "Can you execute phase one of the implementation plan? " All right. And uh of the plan. All right. And go ahead and run that. So, it's trying to connect to Figma and it has all the variable data. It's going to now rename all of this, as you see over here. It's going to go through that list and it's going to keep checking things off this list, which is one thing which is pretty great in Claude Code because you can see this visually changing over here. So, that's pretty good as well. All right. So, let's take a look. So, phase one is completed and we can go to Figma and quickly take a look at that. All right. So, in Figma now we have our primitives, which is our alpha colors, which is fine. Our neutrals, which is also fine. It's not yet organized in the correct order, so I'm going to quickly do that because AI doesn't have the tool to order these things. And so, we have to do this manually. And so, then we have our 850, and 800, and then we also have our 950. Then we've got our blues. Then we have our yellows. Then we have our uh browns over here. All right. Browns, blue, green. And then move this also. And then we have a yellow as well. So, this is fine. Oh, this is fine. All right. Perfect. Now, we come here to our radiuses. We have two. It has added 252. We have small. And then we also have our colors, right? Now, for some reason it's not updated the colors. So, we're going to go ahead and um ask it to fix that. So, I'm going to come here and say, "The semantic color tokens collection has not been renamed with appropriate names. Right now, they're still using the placeholder names. Can you look into this, please? " All right. I'm going to go ahead and "Ask me any questions, if any, for more clarification. " All right. Go ahead and run this. All right. So, now here you can see that it's missing. So, it's asking us how do we want to rename it, right? So, we have content primary, semantic text primary, or semantic content primary. Or should the semantic tokens indicate their theme, which is color light, color dark. That's fine. Or do you want to reflect the design intent? All right. So, text primary, text secondary, text muted, border weak, right? So, I'm going to go ahead and uh say option three. All right. So, it's going to ask clarifying questions. Yeah, it's basically intent-based. All right. For background and surface colors, what would you prefer? We could keep the current naming convention. And for unread and fill colors, we could probably use uh badge. We could use that. Uh that's fine. So, for this one we could probably use uh business logic. All right. So, for the state-based color, hover, selected, should they be renamed to indicate the state, stay separate? I guess we could go with option number two over here. So, you can see that it's also going to update the plan and then get my approval for this, which is actually very nice. And we can click here to see what is it that it's actually doing. So, it's basically marked everything as complete over here, which is uh pretty nice. And then it's added a couple more things, which is also fine. All right. So, here it's showing us a summary. So, the new name is going to be uh text primary, text secondary, text accent brown. Now, there are a few adjustments that I have to do because these colors actually are a part of the tag system badge, all right? Our part of the badge over here. So, I'm going to do this myself. So, I'm going to come here and say yes, there are a few adjustments that need to be made, but it's okay. I can do this myself. Go ahead and update the names based on what you have recommended to me now. And I'm going to go ahead and run this. All right. So, now let's go ahead and quickly verify this in Figma. And you can see here it's done all of this, but it's not really put it into proper groups. But uh that's fine. We can do it ourselves. So, I'm going to quickly pause the video and do this myself and come back. Right. So, I've gone ahead and cleaned this up. So, now we have our surface tokens, our content tokens. And here I also have the checkbox under content, but that's like I'm making a small exception. Then we have our fills. And this is essentially going to be for the notification dots. I've kept it separate. And then here we have our borders. And then for the tag button, we have our content buttons content colors. And for the tag button, the surface colors as well. So, now obviously this is in a much better shape. And I think everything else looks pretty fine. All right. Now, with that being said, we can move on to phase two, which is the spacing layouts and all of this. And you can see here the last step is also a visual verification. So, I'm going to go ahead and say do nothing. Now here, I'm going to be using Sonnet because I want a little bit more brain power over here. So, I'm going to go ahead and choose Sonnet. And in Sonnet, I'm probably going to choose medium over here. Execute phase two of the plan. All right. Um and we can say oh ask me any questions at any time if you need more clarification. And I'm going to go ahead and let it run this. All right. So, it's gone ahead and updated everything. Phase two is complete. Let's go ahead and quickly verify all of this in Figma. So, we're going to open up variables and you can see we have some size tokens, which is fine. We have two radius tokens and mainly important are spacing tokens. It's also created one for zero, which makes sense. So, let's go ahead and take a look at the tag button first of all. So, you can see here it's applied that padding of 6 pixels. So, all of this is actually pretty good and working fine. All right. Now, we can look at the action bar. Now, in the action bar, it forgot to add that gap. So, here um we can actually add this ourselves. So, I'm going to go ahead and set this to two. We are actually missing one, which is interesting. So, it didn't really consider this. Probably it missed it out. So, I'm going to go ahead and create a new one. I'm going to go ahead and call this mini. And I'm going to make this two. All right. And then I'm going to click on this and add this two over here, spacing two. And also spacing two over here, which is a pretty good. And the corner radius is also added. That's nice. And then over here, if we come here, we can see that it's added the paddings or actually the tokens everywhere. And over here, we've got paddings again, the gap. Here, we've got um here there's nothing really, so that's fine. Over here, we've got a gap of 40. Over here, gap of six. And uh things are looking fine. Here, everything seems to be pretty good. Uh there are also size tokens. So, for example, if I click on the checkbox icon, you can see we have 20 pixels size that it has added, which is nice. And even for the uh notification dot, um you can see here that it's added a size. So, I think all in all, I think phase two is pretty good. And so we can to an extent mark these off as done if we really want. That's fine. And then mark this off as also done. So, proper names and applied to the component all of this is done. Now is where things get pretty interesting where we're going to execute phase three. Build the email row in code and preview website where you can customize all of this, create global tokens. Now, before we do this, I want to create a plan just for phase three. And then we can execute that plan. So, I'm going to come back down here to um Claude. And let's look at phase three. So, scaffold the Next. js project. Extract the final token values from Figma. All right. And then build the global CSS files, which is fine. Implement atom components. Implement email row component with variants and properties. And then build an interactive playground. And then visual parity check against Figma screenshots. All right. So, I guess maybe this is fine and we don't really need to give further instructions. So, you know what? I'm just going to go ahead and set this back to Sonnet. And here I'm going to choose probably high this time. And I'm going to go ahead and say execute phase three of plan. md. And to be honest, maybe let me go ahead and look at the plan again. For phase three, we can actually review the s- project over here. So, phase three implementation. So, build a Next. js project. Email row all of this is fine. So, the key decision from annotations is that the sender info width, which is fixed at 16 VW. All right. So, that basically means here that in Figma this text or this area is going to be 16 times the viewport width or 16% of the viewport width. All right. So, let's consider that. Date formatting, the action bar appears on hover only overlays the date area, which is fine. The trailing section can have an icon or both. Um icon button or labels both, right? So, we've got the project structure, which is fine. We can quickly take a look at this as well. So, if we've got the fonts, which is fine. We've got the playground view, which is also fine. In the email row, we have the email row files. So, this is essentially this email row. tsx is going to have the actual code for the email row. Utilities is essentially the logic for the date formatting. And now then we have components. In components, we would have checkbox, tag button, icon button. And then we would also have a list of all the icons over here. And then we can then come down to the spacing token. So, then we would have all of this. So, I guess this is fine. It's not really terrible. And if you don't understand any of this, this is actually fine. You don't really have to worry too much about this. And so, the global tokens will live under the global tokens with CSS properties, uh which is fine. And component styles use the CSS modules for scope class names is also fine. All values reference tokens. All right. So, as you can see here, it says padding with the variable uh spacing. md. All right. Never hardcoded like this, which is great. All right. And then font loading, which is pointing to the user provided mono trust sans file. So, we'll obviously add that. And then for the we also have a colors. raw file, which is for the primitives. All of this is fine. Semantics, spacing. Um and then we have all our email row properties. So, uh the sender is going to have a text. Subject Date is going to be in a date format. It's not a string. It's just going to be a separate date format. And is read, is selected, show count. This is pretty much everything that it got from Figma, which is fine. Hover state is okay. Date formatting is based on this utilities using the annotation rules. This is fine. And playground light and dark theme. Uh this is essentially the playground that we're talking about. Preset demos is replicate 20 plus variations from the Figma variations light screen. So, I don't know what it's going to do. I don't know if it's going to create 20 plus variations, but it's going to be interesting to see. And then responsive preview. Adjust the width of the test sender to 16 viewport based on behavior. So, what this means is when we reduce the size of the viewport, the size of this also reduces. So, which is fine. And then execution steps, this is okay. And so, we can go ahead and say we can execute this. All right. Let's go ahead and run this. All right. So, phase three is done, but there are a lot of things that we actually have to fix to make things work. So, we're going to first look at the entire code files that it's created for us. And there are a couple of atoms and then the email row. And as you can see here, it also automatically opened it on localhost. And localhost is essentially opening up the website on your browser without needing any internet connection because it's just opening the files that are present in your project folder, right? So, that's called um localhost. And you can see here it says that it's live over here. And I just need to add the font files, which I'm going to do that. And then we are ready for phase four. Now, there are a lot of issues over here. Now, to in order to see this better, I've actually opened it up on my browser over here. So, we can look at things a little bit more better over here. And now the goal here is to actually find a bunch of issues and give this to AI because AI is going to make a couple of mistakes over here. Now, before we actually do that, I'm going to open this up in cursor because I actually want to see the code files. So, here I am in cursor. And I have this file called as the notion mail components. And everything regarding the mail components are um sort of extent are over here. Now, we have the font files. I need to add the font files over here. And so, the first thing that I'll actually do is I'm going to come over here back to Claude. And I'm going to drop in the font files. So, these font files over here. And I'm going to say these are all the font files. Can you add it to the folder? All right. I'm going to go ahead and choose um Ico for this one cuz it's a small task. And we're going to run that and wait for it to finish. And I'm going to allow this project over here. All right. So, I

### [48:54](https://www.youtube.com/watch?v=Ni0cXeSkSdI&t=2934s) Building + Testing the email row in code

went ahead and asked it to update the font files, which it did. And also the filters were not working, so I asked it to fix that. So, now we can see here that we have all of these various options. And now we need to actually go ahead and polish a lot of them. Now, this is going to actually take some time. So, I'm going to do this on my own, but I'm going to show you how to do this yourself. So, the first thing I'm going to do is I'm going to come here, click on inspect. And then you can actually see all of this over here. And it's important that you are able to review the code. So, you can open this up and you can click here and then click on some of these elements. And then you can pretty much view all of the uh element details over here, right? So, first of all, I'm going to make sure that I choose the topmost one. And you can see here that it has a border radius of eight, which is not really relevant right now. That's the that's totally fine. And technically this border will not exist. Right now it's only there for the sake of showing it over here, but that probably won't be there. Here is their main email row. So we have all our padding set up. We have all of this set up here as well. All of this is fine. Now I know here that the color is incorrect. So if I click on this and click on this piece of text, you can see here that it's using color content tertiary, which is this. But in Figma, it's not that. It's probably something else. It's content secondary, right? So it's made a mistake over here. So that's definitely one thing that we need to fix. So if I come back and click, let's try this again. Yeah, there we go. Okay. The hover state is also to an extent incorrect. All right. Because the hover state is probably a bit too strong. So what I'm going to do now is going to come back over here to Claude and we're going to ask it to do one more pass at all of this. And then if it still makes some mistakes, I'm going to go ahead and correct the nitty-gritties over here, right? So I'm going to start off by coming over here to Claude and let's go ahead and just say I'm going to search for context and let's see how much has been used up. All right. We're on 19%. So I guess that's fine. Now I actually just realized this is not the total context. I guess this is 19% and if we come back up here again, this is around 38%. So that's already 60% and I think we already utilize some over here, which is a little bit more. So I think we're already exceeding a lot over here. So what I'm going to do now is going to open up a new chat conversation. All right. I'm going to go and choose this and I'm going to come here set this to Sonnet. And this time I'm probably going to choose it to high. And I'm going to say there are a few UI inconsistencies between what is added in code and what is there in Figma. Can you do another pass again and review each of those variants one by one and fix them. All right. Now it doesn't look like it can actually access these individual items. So what I'm going to do here is I'm going to go ahead and just probably move this down a little bit. All right. And I'm going to take a copy of all of this, bring that down, and I'm going to create a new section over here. Or let's create like a frame. Maybe a frame is better. All right. And I'm going to increase the size of this. And then probably choose the same colors and then move this to the back and then select all of these items. Command X and then paste that inside over here. And this is just going to be variants. All right. So I'm going to come over here, copy the link over here, and paste it over here. And I'm going to say I've created a new frame with instances of all the variants, making it easier for you to actually access and view the specs of the email row. All right. Now I can also point out a couple of mistakes that I already see. All right. And in fact, what I'm going to do here is going to open up Claude and open up the preview as well, which I don't think I can do right now anymore because I guess that was in a previous conversation. But I'm going to come here and say I see a few issues already and I'm going to point these out to give you a head start. The color of the date is incorrect. The body copy is truncating very quickly. All right. Maybe we can break these down into a list of items. So 1 2 3 very early. Maybe that's the better word. Let's see what else we have. And then here in this, this is fine. So over here the opacity value is not correct, but we can fix that. Over here in the category, we have work and we should only use the neutral variant, right? So someone come here and say the category tag button should always use the neutral variant and the rest of the color variants can be used for the labels. All right. So that's fine. And the count, I think this is also incorrect. I'm going to come here and say a few Yeah, the subject the color of the date is incorrect as well as is the number count. What else? Let's see what we have. With labels, this is to an extent fine. And you can see here the labels disappear on the hover state. So I'm going to fix that. The labels actually disappear on the hover state, but that should not happen. All right. What else? And the past due date, this is fine. Now another thing that I could also probably do here is I can come back down here to Figma and I can actually take an example over here. Probably this for example. All right. Copy that. Paste that over here. All right. And then make it a little bit easier for AI to understand everything. Paste and then we also need to turn on the numbers. So I'm going to come here and turn on the count. So this is going to be let's say seven and then seven and seven seven and seven. All right. And then the description, we're going to probably make this a little bit bigger. So I'm going to copy this and paste that over here. And maybe take a few more. Yeah, let's just go ahead and try to get this done properly. All right. And then this one, I'm going to copy this. Paste this over here. Let's replace everything. Okay. And I'm also going to add some icons over here. So we're going to show the trailing assets. So maybe two labels. Trailing assets maybe with an trailing button. And here we're going to I'm going to update this to use the paperclip icon. Paperclip icon, that's fine. And then we're going to choose content secondary. That's okay. And over here as well, maybe just a single label. Right. And I can change the variant of this label to be a different color or maybe we just make this brown, I guess. Right? And the same thing over here, make this yellow. And I'm going to make this green, for example. All right. Couple of examples over here, this is also fine. And I guess this should be enough essentially, right? And so this is fine. I'm going to go ahead and now let me know if you have any questions. All right. Yeah, I don't know how to move this to another line. Let's see. There we go. Okay. That's perfect. Right. So this is fine and we're Sonnet high. Let's go ahead and make sure we use a lot of power for this and run this. All right. So it's gone ahead and made a few changes and it's also taken a couple of screenshots, but it's actually not perfect. It's gone ahead and made a few changes where the category is now neutral colors. It was previously a different color, but this category can only be a neutral color. So it's gone ahead and fixed that. It fixed the date as well. It's now secondary. Before it was tertiary. And the subject no longer truncates early. So I think I'll have to find an example for that. And also the labels on hover, it is the date is just hidden and not the whole container. So if we can quickly take a look at this in the browser, if you see over here, if you start over here, this looks fine, but then here again it is truncating very quickly. And ideally, we don't really see the background over here. There is something weird going on. And essentially this entire thing needs to take up the entire width over here. And then here you can see that it's not following any of that because the opacity and the color is obviously not correct. So what I'm going to do now is I'm going to take some time and just point out some of these issues because it's not able to really figure this out and sort of spoon-feed a little bit so that we get it pixel perfect exactly the way we want. And I'm going to come back and I'm going to show you the final result once that's done. All right. So I spent a good time trying a lot of the details and now it's in a state that I'm really happy with. So if I come over here, you can see that now it really matches our design perfectly well. And it can also scale and behave the correct way. So I'll show you a couple of examples. So first of all, I can actually click on these items and now they actually have the correct colors, the correct states, and pretty much everything that I need. So it works really well. Then we have some resizing rules. Now one of the resizing rule over here was that this actually takes up 16% of the viewport width, which means if the browser width decreases, so is this area. And then we also have this truncation over here. And the logic here was that this actually takes up three times the size of this. So if we take the width of this and multiply this by three, that would be the width of this. And all of this is actually real time. So if we can go ahead and choose inspect element. And over here, if I now maybe you can pay attention to this part. And maybe I can even show you the code first quickly. So if I click on this, you can see here that the width is actually 16 VW, which is the viewport width. And this area actually shrinks as and when I actually reduce the width. And you can see that area is actually shrinking. Now the same thing is happening here as well. As the browser width decreases, this area and this area is essentially a 3:1 ratio. And you can see that actually happening in real time. So, 3:1 ratio. So, if we take this width and multiply it by 3, we get this. And this is actually the logic that we want. And this is going to help us when we're a prototyping. All right? And you can see here that things truncate really well, and it's perfect. Now, if I close this up, you can also see we have this hover state where it is exactly sort of clipping where we want it to. Now, we can take a look at a couple of other examples. So, this one is items that are red but don't have any labels. So, because they are red, the notification dot doesn't exist. And then everything else looks exactly as it is. That's totally fine. We have unread with a category. So, the category can only have gray color neutral tags over here. So, we have that as well. And I think everything else also looks pretty good. We have unread with count. Now, here it actually messed up the logic. So, I asked it to fix it. So, when we have two messages, we would see the number two. Three message, we'll see number three. And when we have five, we would actually see one, two, and finally the last one, the third one in the list. All right? And again, if I come down over here and click on inspect, and if you can pay attention to this part over here, as I shrink, all right? And as it gets closer, you can see here that it starts truncating the text over here. And this essentially we're trying to maintain — [snorts] — the last sender name. So, we always want to show that. And that's the rule that we actually want to follow. All right? That's uh perfect. And then here we have with labels. So, you can see here that this one is getting truncated because these actually have a maximum width. We can have two. We can also have one with an icon button over here. You can see we have this nice hover state as well and also have hover states as well. All right? So, we're already, you know, at a pretty good stage of prototyping this if we want. But we obviously need to do a little bit more work. And then here we also have something with the dates. All right? So, if any uh email is in the past, it would show 2024. And right? And here if it is also, obviously we're in 2026. So, any date before 2026 would show the uh year. Uh but then anything else, so this is probably today's time. Uh and here this is April 12th means that this is for the current year of 2026. All right? And so, all of this is actually proper real logic. All right? And this is looking pretty good. So, now that this is done, we can now finally go ahead and build a skill that allows us to create these designs and paste that in Figma the way we want. All right? And even dark mode one also works pretty good. I can sort of show you that. The dark mode one is also done pretty well. And so, no problems here as well. Now, one of the things that I noticed here in dark mode is that this is actually using the wrong color, and actually a very bright color. It looks fine in light mode, but in dark mode it's supposed to be a little bit more lighter. Now, I actually went ahead and checked the code, and it was actually a mistake from my side. So, I went ahead and in Figma I updated it. So, now this one is actually using the correct color. And what we have here is in the variables, we actually had this token that we're using. So, if I click on this, you can see here that we're using this thing called tertiary alternate. And we were it was actually using the wrong token. And so, I created this token called as alpha white 20, which is the correct color token that we want. But now, our code doesn't actually reflect that. All right? So, what we're going to do now is we're going to come here to Claude code. All right? And I'm going to come here and say, "Can you run a parity check between the variables in or let's say color variables in Figma versus what is implemented in code. Use the Figma parity check tool. All right? And we're going to basically use this tool, which is a part of the Figma console MCP. So, if I come into the documentation of the Figma console MCP and I come here to the tools reference, you can see here that under design system, we actually have something called as the Figma parity. Not super sure where exactly it is, but it should be here. Right? So, I guess Yeah, so we have something called as the Figma check design parity, Figma generate component doc. So, this is what essentially what we want to do, compare the Figma specs versus code and implementation. So, I'm going to go ahead and copy this and then come down here to Claude code and just maybe paste that over here. All right? And we'll come here to Figma, make sure that the Figma desktop bridge plugin is there. So, just go to plugin, go to development, and choose the desktop bridge plugin. Um make sure that it's open. And then I can come here and do that. And now we should be able to find that mistake that I corrected in the variables but not in code. All right? So, you can see here that now it's using this tool called as the Figma check design parity. We're going to go ahead and give it some permissions for it to take a look. And uh it's looking pretty fine. So, it's gone ahead. And as you can see here, it's fetching all the tokens uh that it's found. That's pretty good. And let's see how it actually does the parity and check how this works. It's going to be pretty fun. All right. So, it's here with the summary. And uh you can see here that it actually gave us it did a parity really well because this is the exact one that I was talking about, which was tertiary alternate. And in Figma, we have this thing called as the alpha white 20, which is the new one that I added. So, if I were to quickly show you a recap of that, let me quickly open up the variables. You can see here that I added this alpha white 20, which is the new one that I added when I saw the mismatch. But then you can see here in code, it's completely different. All right? And so, now the fix is that we have to go ahead and add in the dark theme, we need to go and add that token. All right? Now, I actually don't know if it actually did it. And you can see here it's asking if we want to make the fix right now. So, that's one thing. The second thing is the missing primitive, which is exactly this one. So, this is the raw value that's missing. And then we have to then apply this raw value to this content tertiary alt in dark mode. All right? And we also see there's a another issue, which is the tag button content neutral. And this seems to be something that's not related to what we were talking about, but we can quickly take a look and sort of look at this and understand. So, here it says that the code defines color tag content neutral. So, light and dark mode. And I think what it's talking about is essentially this piece of text over here. All right? So, this tag button, all right? This is exactly what we're talking about. It's using the tag content neutral. All right? But there is no tag button content neutral variable in Figma collection. So, either Figma is missing it or it's an unused token in code. Now, we can also go ahead and quickly check the colors over here. So, if I come down over here to variables, and I can come down to this section, wherever this is being used, which is the secondary alternate. All right? So, here we have I break this for a second, we see 9C9C9A, which is not the same. And then we have this one D3D3D3, which is also not this. So, I'm not entirely sure what is going on over here. And so, if we were to actually fix this value, let me actually quickly see what this is. So, 1D1B16. All right? So, I come down to the primitives. Let's see if we can find that. So, I don't even think that sort of exists over here. Right? Yeah, 1D1B16. This is 900. All right? And then F1, which is this one. So, we have a 900 and then we have a 100. I don't even know where that's being used. All right? So, we have content primary, and then we have neutral 100. So, that's actually the primary. So, what I can do here is I'm going to say, "For now, let's go ahead and fix finding number one and two. " And to be honest, this is also something that we can do in code ourselves. So, if I open up cursor, we can actually come down over here. And in the alpha colors, we can add another line. So, this is something that we can do ourselves. It's not really rocket science. So, in the colors raw section in the tokens, I can add this piece of line myself, which is not really rocket science. And then we also need to find the semantic version of that. And that is probably somewhere else. So, over here, of course, the color semantic. We can come down over here. And in the dark mode section, we just need to replace this secondary alternate with the actual token. But now that I see that none of these are actually using the raw tokens. Right? We have this raw, but then the semantic ones aren't really using that. And so, we're obviously going to have to fix that right now. So, what I'm going to do is I'm going to go ahead and make sure we set this to Sonnet uh 4. 6 high cuz we're going to need some brain power here. I'm going to say, "Fix finding number one and two. " And then also, I see that if I tag the file, uh which is color semantic. css, color semantic. css is not using the raw variables or tokens, as we call it, from colors raw. css. All right? The semantic colors should not be hardcoded. All right? And uh we can add this over here. And we can also run this out. And then once it replies back, we can actually check for all this tag button, what are all the values that it is currently using. And you can do a quick investigation there as well. All right. So, it's gone ahead and fixed everything. And now you can see here that the color is a lot lighter, which is perfect. And you can see here that in dark mode it's using the tertiary alt, which now has the correct token value, which is white alpha at 20%, which is perfect. It's also taken a screenshot to verify it and everything looks good. And all the semantic tokens fully de-hardcoded and referencing raw variables. So, if I come back down here to cursor, you can see that now in our semantic colors all of them are using our raw tokens, which is from here, which is exactly the way it needs to be. So, pretty good. All right. Now, the last thing that we want to do is we're going to go ahead and fix this parity issue. So, what I'm going to do here is I can actually come here in the code itself and in this tag button, this is where our components are. You can see here we already have the various tokens over here. So, we have our background, we have our colors and everything over here. So, it's actually pointing us out to an issue, which is the tag color neutral, all right, with this content neutral, which is there, but there is no tag button neutral in Figma in the variables collection, right? So, in the neutral, I'm actually using the color content secondary alternate, which is fine, and that is also what I'm using in Figma. So, if I come down to tag content, I actually don't even have that over here. I'm actually using the main content over here. So, I for the tag buttons, I had like the content section and the surface section because essentially we have different colors and I think for this one I'm just using from the main content, which is why I think I probably ended up removing this one in code, which we don't need. And so, now this is actually being unused. So, either in Figma it's missing or it's an unused token in code. Now, we can leave this as it is because it's an extra piece of variable that exists, but we're not really using it. We can actually go ahead and quickly check that out as well. So, if I come down over here to our tokens and we come here to our raw variables, hopefully or maybe semantic variables, you should see here, right? So, we have the tag content neutral, right? This is the one that we don't have in Figma. So, what I could do here is I could just delete this from here or we could still keep it and you can see here it's just a warning. So, that's totally fine. So, we're going to go ahead and leave that as it is and save and I think everything is pretty good to go. And now we can finally move on to the next phase of this. So, we can come over here, and phase three is finally done, which is great news. So, all that's pretty good. — [snorts] — And now we're going to move to phase number four. So, that's it for part one and in the next video, I'm going to show you how you can take what you have in code and create designs in Figma using that or how you can use AI to take control of your design system and generate designs for you using that. So, that's pretty much it for this video, guys. Thank you guys so much for watching. Hope you guys really enjoyed it. If you did, let me know in the comment sections down below. Make sure to leave a like and subscribe to the channel for more amazing awesome content and I'll see you guys in my next video. So, until then, take care and bye-bye. —

---
*Источник: https://ekstraktznaniy.ru/video/52343*