Figma Components: Main vs. Instance

WHY IT EXISTS Components solve the problem of inconsistency and repetitive work in design. Without them, changing the color of 100 buttons would mean editing 100 separate objects. A component system ensures that when the master design changes, all copies update automatically, saving time and preventing errors.

THE MENTAL MODEL A main component is a blueprint or a master template. An instance is a live, linked copy of that blueprint. You can have one main component for a button and hundreds of instances of it across your application mockups. If you update the blueprint, all the copies instantly reflect that change.

HOW IT WORKS The main component defines the core properties of an element. When you create an instance, it's a copy that remains linked to the main. You can apply local changes to an instance, like changing a button's text label—these are called overrides. However, fundamental properties inherited from the main component, like color or corner radius, will update across all instances when you edit the main. This allows for both consistency and flexibility.

WHEN TO USE IT Use components for any element that appears more than once in your designs. This is essential for building a design system. Common use cases include buttons, icons, form fields, navigation bars, cards, and footers. Any element you want to manage from a single source of truth is a candidate for a component.

WHEN NOT TO USE IT Avoid creating components for truly one-off, unique elements that will never be reused. For example, a custom illustration for a single marketing page doesn't need to be a component. Making it one adds unnecessary complexity to your file without providing any benefit of reusability.

ONE CANONICAL EXAMPLE Imagine you design a primary button with a blue background and white text. You designate this as your main 'Primary Button' component. You then create three instances and override their text to say 'Sign Up', 'Confirm', and 'Submit'. Later, you decide the brand color should be green. You edit the single main component's background to green, and all three instances instantly update to a green background while retaining their unique text labels.