Creating and organizing Variants

Variants bring a range of new possibilities to components and scalable design systems. At first glance, creating and organizing variants might seem like more work. While there is some effort for the designer creating the component set with variants, the end result for anyone using the component is a simpler and more delightful experience.

Easier component browsing - A designer no longer needs to sift through multiple variations of the same component in the asset panel, or wonder which one is the right one.

Reduced complexity of instances - Easily select or adjust properties without changing the entire component.

Preserved overrides - Nested components and styles overrides are preserved when switching between variants.

Compatibility with existing work - Variants automatically replace any existing components so migration for existing files is a breeze.

This guide will cover some useful tips and practical examples for getting the most out of variants. If you have existing components you'd like to convert to variants, check out the Prepare for Variants guide. And try out the playground file for a hands-on learning experience.