Variants

Native usage of Figma Component Variants

Overview

Figma supports the use of component variants, to achieve animations, transitions, or simple UX states for the app.

Use Cases

States

Use variants to handle different app states such as menus, transactions, or status.

Carrousels

Use variants to scroll between elements in a carousel fashion style.

Interactions

You can use variants in components to simulate mouse-over or mouse-click interactions in your app.

Using a variant in Figma

Create a variant normally in Figma and use the prototype settings to change the variant as you will normally do.