Components: One Master, Many Instances

WHY IT EXISTS: Before components, designers copied and pasted the same button or card across dozens of screens. If the brand color changed, someone manually hunted every copy, which guaranteed missed instances and an inconsistent UI. Components create a single source of truth for repeating elements so one edit propagates everywhere automatically.

THE MENTAL MODEL: Think of a component as a rubber stamp. The master is the physical stamp and every instance is an impression. If you carve a new shape into the stamp, every future impression changes, but you can still use a different ink color on each impression without destroying the stamp. In Figma, the stamp is the master and the ink color is a local override.

HOW IT WORKS: You build a master component, usually on a dedicated page, and place instances throughout your designs. Each instance stays linked to the master. Edit the master's geometry, spacing, or shared color styles and all instances update instantly. You can override specific properties on any instance, such as text labels, nested image fills, or auto-layout padding, and those local changes persist while the underlying link remains intact. Override too many properties and the instance becomes a static shell in practice even if it still appears linked.

WHEN TO USE IT: Use components for any element that appears more than once and must stay consistent. Buttons, input fields, navigation bars, cards, and icon wrappers are canonical examples. They also help when handing off to engineering because the structure mirrors how front-end teams build reusable React or Vue components.

WHEN NOT TO USE IT: Do not turn one-off hero sections or highly bespoke art into components unless they truly repeat. Avoid nesting components ten layers deep purely for organization; the override panel becomes unreadable and file performance degrades. Resist detaching instances to make quick fixes. Once detached, the copy is orphaned and stops receiving master updates, which silently fragments your design system.

ONE CANONICAL EXAMPLE: Imagine a primary button used across forty screens. The master defines sixteen by twenty-four padding, eight pixel corner radius, and a brand blue fill. On the checkout screen, you place an instance and override the text to read Pay Now. On the settings screen, another instance says Save Changes. When the brand refreshes to a darker blue, you update the master once and all forty buttons shift color automatically, but the text overrides remain untouched.