Skip to main content

How to

Component Variance Authority 🐊​

The CVA plugin automatically generates variants for your components. Variants are generated and named according to a set of rules. Understanding these rules is essential to use the plugin to its full power and ensure no time is wasted.

How to use CVA​

  • 🥳 Install it from figma logoFigma Community
  • 🍔 Create a component using other components (Cascading Components)
  • 🪄 Run CVA and click “Generate!”

Cascading components​

To take the most out of CVA, designers must create their components by combining subcomponents. That style is called Cascading Components and is explained at length in the article below.

Cascading Components:

A different way to organize Figma variants

Subcomponents

For simplicity, we'll call "instances of components used inside your component" simply “subcomponents”.

Rule of Thumb

Break down what varies in your component into other components and them as subcomponents.