Web Design » Figma » How Do I Add a Variant in Figma?

How Do I Add a Variant in Figma?

Last updated on September 28, 2022 @ 9:33 pm

There are two ways to add a variant in Figma: by using the “Add Variant” button in the upper-right corner of the interface, or by right-clicking on a component and selecting “Add Variant” from the context menu.

When you add a variant, Figma will create a new instance of that component with its own unique set of properties. You can then edit these properties to create a different look for your component. For example, you might want to create a variant with a different color or font size.

PRO TIP: If you are not careful, adding a variant in Figma can result in losing your work. Make sure to save your work before adding a variant, and be careful when editing the variant.

To edit a variant’s properties, simply click on the component in the canvas and make your changes in the Property Inspector on the right-hand side of the interface. Once you’re happy with your changes, click the “Apply” button to save them.

You can also delete a variant by clicking on the “x” next to its name in the Property Inspector. This will remove the variant from your design but will not delete the original component.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.