Components and Variants in Figma
Key Concepts
- Components: Reusable elements that maintain consistency across your design.
- Variants: Different versions of a component that share common properties.
- Master Component: The original component from which variants are derived.
- Instance: A copy of a component that updates with the master component.
Detailed Explanation
Components
Components in Figma are reusable elements that you can use across your design to maintain consistency. For example, a button component can be used multiple times throughout your wireframe. When you update the master component, all instances of that component will automatically update, ensuring consistency across your design.
Variants
Variants are different versions of a component that share common properties. For instance, you might have a button component with variants for different states like "Default," "Hover," and "Pressed." Each variant can have unique properties, such as color or size, while still maintaining the core structure of the component.
Master Component
The master component is the original component from which all instances and variants are derived. Any changes made to the master component will propagate to all instances and variants, ensuring that your design remains consistent. For example, if you update the text color of the master button component, all button instances and variants will reflect this change.
Instance
An instance is a copy of a component that updates with the master component. When you create an instance, it inherits all the properties of the master component. If you make changes to the master component, the instance will automatically update to reflect those changes. This allows for efficient design updates and ensures consistency across your wireframe.
Examples and Analogies
Components
Think of components as LEGO blocks. Each block (component) can be used multiple times to build different structures (designs). If you change the shape of a block, all structures built with that block will reflect the change.
Variants
Consider variants as different flavors of ice cream. Each flavor (variant) is a version of the same ice cream base (component). They share the same basic structure but have unique characteristics like color and taste.
Master Component
Imagine the master component as the original recipe for a cake. If you change the recipe (master component), all cakes made from that recipe (instances and variants) will follow the new instructions.
Instance
Think of an instance as a printed copy of a document. If you make changes to the original document (master component), all printed copies (instances) will reflect those changes when reprinted.