09. Components - Figma 101

Components are reusable building blocks that make your design process faster and more consistent. (light upbeat music) Some areas where components can be valuable include headers, footers, line items, cards, icons, buttons, input fields. Now this is not an exhaustive list by any means, it's just a starting point. So let's start off by talking about components and component instances. Components can be used to create consistency by using the same elements throughout your design, you can manage changes more easily and you only need to make a single change on your main component and all of the instances will be updated at once.

So let's start off by creating a simple button component. All we need to do is make a selection and hit command option K. We can also right click the selected objects and choose create component, but if you're using Figma regularly, this shortcut is super helpful to remember. This will create a main component and is represented by a diamond icon in the layers panel. Any copy of this main component is called an instance and it's represented by this outlined diamond icon, and any changes made to the main component also change in the instance.

Now, let's take a look at additional options we have for components called properties. There are four component properties: variance, Boolean, text, and instance swap. It's important to remember that there is a two-step process for creating and using any of these properties. First, you have to create the property, and then secondly, you have to assign the property. If you wanna change the physical appearance of a component like color, size, or shape, you're going to need a variant.

So let's create different variants of this button that show a default state and a hover state. So with our component selected, let's click the plus icon beside properties. We now have a component with a single variant called property one and our original component is now set as default. We can change these names at any time, but before we do that, let's go ahead and create our second variant. We'll duplicate our first variant by either selecting and hitting command D, or we can option drag within the bounds of the variant frame as indicated by these purple dashed borders.

I like to go ahead and slap some auto layout on my variant frame so that things are kept nice and tidy automatically. Let's make a quick visual distinction between these two by changing the background color on our second variant. Now you can see that if we option drag either of these component variants out onto the canvas, you can see that we now have the option to toggle between default and variant two in the properties panel. These are the default names for variance and we can change these at any time. Since this button is showing different states of default and hover, let's change property one to state by selecting our component name on the canvas, then we'll double click property one in the properties panel to edit and then type in state.

If we select our second variant, we can rename it to hover under current variant in the properties panel. Now we can test with our component instance and choose either default or hover from the dropdown. For simple variants that have only two options, we can alternatively change the property name to something like hover, and then change the variant names to either true or false, on or off, or yes or no. This will then create a toggle for our variant instead of a dropdown. How you decide to name and implement these variants can be one of the more challenging aspects of components and design systems in general.

Think of these as your first draft, and as you add more and more components to your project, you will likely find yourself constantly refining your naming conventions. Let's move on to a Boolean property, which is used exclusively for showing and hiding a specific part of a component. To show how this works, let's add a little rectangle icon to both of our button variants. Now let's select the component name on the canvas and go back to the property section to add a Boolean property. We'll call it icon and leave the value set to true.

Remember, anytime we're adding a property, we first need to create it, then assign it. This property will be useless until we tell Figma where to apply this property. So let's command click onto the rectangle in our default variant. Notice that there is now a new icon showing beside layer in the properties panel. This is the apply property icon.

Let's click this and choose our icon property. If we do this, it will add this true/false Boolean property to our default variant, but not both variants. In order to add the same property all at once, we can click this little icon to select all matching layers and then add the icon property again. Now if we test our instance, we can see that no matter if we're viewing the default or the hover state, the instance will respect the icon Boolean property. Remember that Boolean properties are always applied to a layer to toggle visibility on and off.

So what about a scenario where we might wanna use a different icon other than the square? This would be the perfect case for using the property called instance swap. Instance swap replaces one component with another component. Right now we don't have an icon component. We just have a rectangle that we've placed into this button.

So let's go ahead and create two different icon components for a rectangle and a circle. We'll name them icon/rectangle and icon/circle. This /naming convention will keep them organized as we navigate through our assets. Now we'll add an instance of this new icon component into both of our variants, but we'll have to reconnect our Boolean value to these new component instances. Now we can go ahead and add an instant swap property to the icons in both of our variants.

We'll use icon type as our name and choose icon/rectangle as our default. Now, if we look at the available properties of our component instance, we can test everything out. Notice that the icon type goes away if we hide the icon. All right, let's move on to text, our last component property. Now you can click directly into a text field of any component instance and override that default text.

And for a lot of simple components, this is perfectly fine to do, especially in your early creative explorations. But if you're creating a system of components and you want everything super organized, you may consider adding this text property. We can add this property just like before by selecting our component name on the canvas, then add a new property, choose text, give it a name like label, as well as a default value. Let's put label here as well. Just like with every other property, we've created the property, but we haven't assigned the property, so let's do that now by choosing the text in both variants in the property panel, click the apply property icon, then choose label.

Now going back to our component instance, we can see that now we have a full control panel for anything we wanna change. And if we wanna rearrange any of these items, we can do that by going back to the main component and dragging these up and down. Any changes we make will now be visible in all of the instances as well. If all of this seems a little confusing to you, you're not alone. I've been using component variants ever since they first came out and I still have a hard time keeping track of all of these nuances, but as you use them more and more, it will become easier and easier.