Creating and Managing Components in Figma

Key Concepts

• Master Components: The base template from which all instances are created.
• Instance Components: Duplicates of the master component that can be customized.
• Overrides: Customizing instances without affecting the master component.
• Component Variants: Different states or variations of a master component.
• Component Organization: Structuring components for easy access and management.

Master Components

Master Components are the foundational elements of your design system. They serve as the base template from which all instances are created. By defining a master component, you ensure consistency across your design. For example, a button master component might include default styles like color, size, and text.

Think of a master component as a cookie cutter. The shape of the cookie cutter defines the basic form of each cookie, ensuring uniformity. Similarly, a master component defines the basic structure and style of each instance.

Instance Components

Instance Components are duplicates of the master component that can be customized. Each instance retains a connection to the master component, allowing for updates to be propagated across all instances. For example, if you create a button instance, you can change its text or color without altering the master component.

Consider instance components as individual cookies made from the same cookie cutter. Each cookie can be decorated differently, but they all share the same basic shape. In Figma, each instance can be modified to suit specific needs while maintaining a link to the master component.

Overrides

Overrides allow you to customize instances without affecting the master component. This feature is crucial for maintaining consistency while allowing for flexibility. For example, you can override the text of a button instance to display "Submit" instead of the default "Click Me."

Think of overrides as decorating individual cookies with different toppings. Each cookie can have its own unique decoration, but the basic shape remains the same. In Figma, overrides enable you to make specific changes to instances while keeping the master component intact.

Component Variants

Component Variants represent different states or variations of a master component. For example, a button component might have variants for different states like "Default," "Hover," and "Disabled." Variants allow you to manage multiple states of a component within a single master component.

Consider variants as different outfits for the same character. Each outfit represents a different state or variation of the character, but they all belong to the same character. In Figma, variants help you manage different states of a component efficiently.

Component Organization

Component Organization involves structuring your components for easy access and management. Use folders and subfolders to categorize components based on their function or type. For example, you might have a folder for buttons, another for forms, and a third for navigation elements.

Think of component organization as arranging books on a bookshelf. Each book (component) is placed in a specific section (folder) based on its genre or topic. This makes it easy to find and manage each book (component) when needed.