LiveDemo - Open-source alternative to Storylane, Navattic, and Arcade | Product Hunt

How to Create Variants in Figma



How to Create Variants in Figma: step-by-step guide

  1. Inside your Figma design canvas, find and click the component you wish to use.

  2. After that, head over to the right-side panel and click the 'More Actions' button.

  3. Select 'Add Variant' from the list of options.

  4. After completing these steps, a variant of the selected component will be created instantly.

Quick answer: To create variants in Figma, select the desired component on the canvas, open the More Actions button in the right-side panel, and choose Add Variant to instantly generate a component variant.

About this Figma tutorial

Generate component variants in Figma quickly by selecting a component and using the Add Variant option in the right-side panel. This guide shows how to create Variants in Figma in 4 steps, starting with "Inside your Figma design canvas, find and click the component you wish to use" and finishing with "After completing these steps, a variant of the selected component will be created insta...". The interactive demo above is a click-through copy of the real Figma interface, so you can rehearse each step before doing it in your own account.

Frequently asked questions

How many steps does it take to create Variants in Figma?

4 steps. Each one is listed in order above, and the demo highlights exactly where to click.

Can I try it without changing my own account?

Yes. Clicking through the demo doesn't touch your Figma data or settings. Once you know the flow, repeat it in your own workspace.

This tutorial is filed under Figma. Related guides: How to Crop an Image in Figma, How to Curve the Text in Figma and How to Detach an Instance in Figma. Last reviewed 05 Oct 2026.

LiveDemo - Open-source alternative to Storylane, Navattic, and Arcade | Product Hunt
🚀

Create your first interactive demo in minutes

No credit card required • Start building today

Start free→

This website uses cookies to enhance the user experience.

AcceptDecline