To add variants in Figma, effectively building out a component set where new variants often appear to the right (or below) the existing ones, you can use one of several straightforward methods directly within the Figma interface. Figma automatically handles the layout within the component set grid.
Adding variants transforms a standard main component into a powerful Component Set, which is a collection of related variants. Variants within a set share properties but have different values for those properties (like State=Hover or Size=Large). When you add a new variant, Figma places it within this set's grid structure. While you don't explicitly tell Figma "place this to the right", new variants are typically added to the next available spot in the grid, which is often to the right if space allows on the current row, or the start of a new row below.
Here are the primary ways to add a variant:
Methods for Adding Variants
You can choose the method that best suits your workflow:
-
Using the Toolbar:
- Select your main component.
- Click the Add variant icon (often represented by a plus sign or similar) located in the toolbar at the top of the screen.
-
Using the Right-Click Context Menu:
- Right-click directly on the main component you wish to add a variant to.
- From the context menu that appears, select Main component > Add variant.
-
Using the Properties Panel:
- Select your main component.
- Look at the Properties section in the right sidebar.
- Click the "+" icon or the text option, often labeled Variant.
- This method creates a new variant property and automatically turns the main component into a component set if it isn't already one.
Each of these actions achieves the same goal: adding a new item to your component set grid. Once added, you can select the new variant and modify its properties (like colors, text, size, etc.) to differentiate it from others in the set.
Figma then arranges these variants within a visual grid. As you add more variants, they will populate this grid, automatically flowing to the right or wrapping to a new row below as needed, making it easy to see and manage all variations of your component.
