How to Rearrange Variants in Figma?

Based on the provided reference, one way to rearrange variants in Figma involves selecting a component, identifying a specific variant, and clicking an icon that appears to automatically sort all items within the variant set.

Understanding Variant Rearrangement

Figma allows you to organize your design components efficiently using variants. This makes it easier to manage different states or versions of a component (like a button's hover state, a checkbox's checked state, or an icon's different styles). While there are several ways to manage variant order, the method described in the reference focuses on an automatic sorting action triggered by an icon.

Rearranging Variants Using the Sorting Method (Based on Reference)

According to the reference, this specific method for reordering or rearranging your variants uses an automatic sorting function:

Step-by-Step Guide

Here’s how you can rearrange (sort) variants following the process described:

1. Select a Component: Start by selecting the specific component set on your page. This helps you locate it more easily in the Layers or Assets panel.
2. Identify the Variant: Within the selected component set, locate the particular variant you intend to reorder or use to initiate the sorting action.
3. Click the Icon: Click on the icon that appears next to the variant you identified. The reference indicates that clicking this icon triggers the sorting process.
4. Automatic Sort: Once the icon is clicked, Figma will automatically sort all the items (variants) within that component set.

Process Summary Table

This table summarizes the actions and outcomes as described in the reference:

Action	Detail	Outcome
Select	A specific component set on the canvas.	Component is located.
Identify	A particular variant within the selected component set.	Target variant found.
Click	The icon that appears next to the identified variant.	Sorting initiated.
Figma Action	---	All variants are sorted.

This method, as described in the reference, focuses on an automatic sorting feature rather than manual drag-and-drop rearrangement of individual variants or their properties. Clicking the designated icon triggers this sorting process for the entire set.