Variants and Instances in Figma
Key Concepts
- Variants
- Instances
1. Variants
Variants in Figma are a collection of related components that share a common base but have different states or attributes. For example, a button component can have variants for different states such as "Default," "Hover," and "Pressed." Variants help maintain consistency and streamline the design process by allowing you to manage multiple states of a component in one place.
Think of variants as different outfits for the same character. Just as a character can wear different outfits for various occasions, a component can have different variants for different states or conditions. This ensures that the character (component) maintains its identity while adapting to different scenarios.
2. Instances
Instances in Figma are individual copies of a component that inherit properties from the master component. When you create an instance, any changes made to the master component will automatically update all instances, ensuring consistency across your design. Instances are useful for maintaining a unified design system and reducing the time spent on repetitive tasks.
Imagine instances as multiple copies of a blueprint. Just as multiple buildings can be constructed from the same blueprint, multiple elements in your design can be created from the same component. Any updates to the blueprint (master component) will be reflected in all the buildings (instances), ensuring they all remain consistent.
Example: Creating a Button Component with Variants and Instances
Let’s create a button component with variants for different states. Start by creating a master button component with a "Default" state. Then, create variants for "Hover" and "Pressed" states by duplicating the master component and modifying its appearance. Next, create instances of the button component and place them throughout your design. Any changes made to the master component or its variants will automatically update all instances, ensuring a consistent and efficient design process.