Variants and Instances in Figma
Key Concepts
- Variants
- Instances
- Creating Variants
- Modifying Instances
Variants
Variants in Figma are different states or versions of a component that share a common structure but have unique properties. For example, a button component might have variants for different states like "Default," "Hover," and "Pressed." Each variant maintains the core structure of the component but can have different colors, sizes, or other properties.
Instances
Instances are individual copies of a component that can be placed throughout your design. When you create an instance, you are essentially creating a reference to the original component. Changes made to the original component will automatically update all instances, ensuring consistency across your design. However, you can also make overrides to specific instances to customize them without affecting the original component.
Creating Variants
To create variants in Figma, first, create a base component. Then, duplicate this component and modify its properties to represent different states or versions. For example, you can create a "Default" button component and then duplicate it to create "Hover" and "Pressed" variants. Each variant will be a separate component within the same group, allowing you to switch between them easily.
Modifying Instances
When you place an instance of a component in your design, you can modify its properties without affecting the original component. For example, if you have a button component with a "Default" variant, you can place an instance of this button and change its text or color. This customization is specific to that instance and will not affect other instances or the original component.
Examples and Analogies
Think of variants as different outfits for the same character. Each outfit (variant) maintains the character's core identity but has unique features like color, style, or accessories. For example, a superhero might have a "Casual" variant and a "Battle" variant, each with different clothing and accessories but still recognizable as the same character.
Instances can be compared to multiple copies of a blueprint. Each blueprint (instance) is a reference to the original design, and changes to the original blueprint will update all copies. However, you can make specific adjustments to individual blueprints without altering the original design. For instance, if you have a blueprint for a house, you can create multiple copies and modify the color of the roof on one copy without changing the others.