How Do You Detach Variants in Figma?

Figma is a powerful tool used by web designers and developers to create user interfaces. It has a number of features that make it ideal for creating complex layouts and designs.

One of the most useful features is its ability to detach variants. Detaching variants allows you to work on a design with multiple versions, each containing the same elements but with different properties or styles.

The process of detaching variants in Figma is fairly simple. First, you will need to select the element or group of elements that you want to detach from the main design. You can do this by clicking on the element in the canvas or using the selection tool in the top left corner of the screen.

Once you’ve selected your element(s), click on “Detach Variant” located at the bottom right corner of Figma’s interface. This will open up a new window where you can choose which properties and styles you want to change for your variant. Select the properties and styles that you want to adjust and click “Create Variant” when finished.

Your new variant will now appear in Figma’s layers panel located at the right side of your screen. You can edit, rename, delete or duplicate any variant by selecting it from this list. You can also combine multiple variants into one single version by selecting them all and then clicking “Merge Variants” at the bottom right corner.


Detaching variants in Figma is a great way to work on multiple versions of a design without having to duplicate each element individually. All it takes is a few clicks and you can quickly create, edit, rename or delete any variant with ease.