You already know that components are reusable building blocks. Variants take this a step further by letting you group and organise different versions of a component into a single container, known as a component set. Instead of having separate components for a button's default, hover, and disabled states, you can have one button component with three variants.

Variants are defined by properties. A property could be 'State', 'Size', or 'Colour'. Each property then has different values. For example, the 'State' property might have values like 'Default', 'Hover', and 'Pressed'.

Each unique combination of these property values creates a specific variant. A button could be 'Primary', 'Large', and in its 'Hover' state all at once. This system allows you to manage dozens of component variations without cluttering your library.

Let's apply this to a common UI element: a button. To create a component set, select your initial component. In the Design panel on the right, you'll see a 'Variants' section. Clicking the plus icon adds a new variant and automatically creates a component set, which is shown with a purple dashed border.

Now, you can define your properties. For our button, we'll add a property called 'State'. Select the first variant and, in the Design panel, name its state 'Default'. Then select the second variant and name its state 'Hover'. Style the hover variant differently, perhaps with a slightly darker fill colour.

The real magic happens in Prototype mode. Select the 'Default' button variant. Drag a noodle from it to the 'Hover' variant. In the Interaction details panel, set the trigger to 'While hovering'. Now, when you preview your design, hovering over the button will automatically show the hover state.

Variants are not just for simple hover effects. Consider a form input field. It needs several states: default, focused, filled, disabled, error, and success. You can manage all of these within a single 'Input Field' component set.

With these properties, you can create a variant for every situation. An input field can have the state 'Filled' and the validation 'Error' simultaneously. This is done by styling the variant with a red border and an error icon. You can then use prototype interactions to change the input from 'Default' to 'Error' based on certain user actions, making your mockups much more realistic.

By combining multiple properties, you create a robust system that can handle nearly any UI state you can imagine. This approach makes your designs more consistent and scalable, saving significant time during development and future updates.

Mastering variants is a key step in moving from static designs to dynamic, interactive systems within Figma.