Components: Full Workflow  🔗 **Source:** [Components: Full Workflow](https://www.youtube.com/watch?v=U7ZN6gVzMss) Today let's see how to create components from a scratch and then turn them into variants. So let's create for example a new select component. So I'm start creating a board it settings also I'm going to select my color token background secondary and I'm going to add flux layout settings eight of gap 32 the same radius as padding add a new text and I'm going to use from my assets library a new icon for example this chevron down change it color to color text secondary. So now I'm going to turn it into a component. Right clicking you can create component or using the shortcut Ctrl K. Now it is available from our library. I can reuse it. And also you can see that if I change for example the color of the background, it will propagate the the properties for its copies. So I'm going to generate new variants for the component. To do that again double click and create variant. And here I have by default a new property. So I'm going to switch the property to state. This is going to be the hover state and this is the normal state. So I'm going to change the color token background. So this is my hover state. And also you can add or create variants using name convention for a component. For example, I'm going to duplicate this component, detach it. This is going to be the disabled state and create it as a component. And in the name, I'm going to use the same name convention table. And if I add it to my variant container, as you can see, now the state is disabled as I name it. And here I have the normal, the hover and the disabled. If I use a copy of this select, I can change between hover and disable. We have other way to create new components and varants. Doing this manually is fine for few components uh new ones. But it's terrible when you need to automate or you need a speed. And this is where the penotency comes in. Instead of building everything by hand, you describe what you want. Something like uh create new component variance based on the existing input component ensuring fully consistency with the current design system. So I want to expand this new uh component with new component varants uh like a new drop-own select, new email input, etc. Let's see what it generates. Okay, so here's the result. As you can see, agent generates the new variance of my input component following my instructions and also the most important thing is that it also applies my color tokens. If we check the variant, we can see that now we have also password, email and select type of component and the state is the same. So if I use a copy of this component, I can switch between my password input, my email input and also use the proper states. It's, Components: Full Workflow, YouTube, 01ktcghwbaw7hshvpy6qysr7nb.