Creating Reusable 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.

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.

Examples and Analogies

Imagine you are designing a website with multiple buttons. You create a master button component with default styles. Then, you create instances of this button for different sections of the website, such as "Sign Up," "Log In," and "Learn More." Each instance can have its own text and color, but they all share the same basic button design.

Another analogy is a clothing brand that designs a basic t-shirt. The master component is the basic t-shirt design. Instances of this t-shirt can be customized with different colors, logos, and sizes, but they all retain the same basic t-shirt structure. Overrides allow for these customizations without altering the original t-shirt design.