Extending components with variants
As you've seen, components are incredibly powerful, especially when they are nested or combined with other features such as styles. However, they can do even more to improve your design and make your workflow more efficient. At this point, you have created a few components, and they were quite easy to implement in your layouts. But when you are working on a more complex project or creating an entire design system, the number of components immediately begins to grow very fast. This means that your Assets library will be full of similar components, and it will be very difficult for you to navigate them. To solve this problem, Figma has another great feature called Variants. In this section, you will learn everything about this amazing function by implementing it in our app design!
Why use variants?
You can think of variants as a set of components that share similar properties and are used for the same purpose. Usually, all the components...