A Component is a master copy of a reusable piece of UI — a button, an input field, a card. Every place that button is used elsewhere in the file is an Instance — a linked copy that automatically updates the moment the original Component changes.
Select any layer or group and press Ctrl+Alt+K (or right-click → Create component). The layer gets a purple diamond icon in the Layers panel, marking it as a Component. Dragging it onto the canvas again, or copy-pasting it, creates an Instance rather than a duplicate Component.
Without Components, fixing a typo in a button used on 40 screens means finding and editing it 40 times. With Components, editing the one master Component instantly updates every Instance across the entire file — this single feature is why design systems are practical at all.
A button rarely has just one look — it needs a default state, a disabled state, maybe primary and secondary versions. Rather than creating four unrelated Components, Figma groups related Components into a single Variant set with named properties, so a designer picks "State: Disabled" from a dropdown instead of hunting for a separate disabled-button Component.
Select two or more Components with a consistent naming pattern (e.g. "Button, State=Default" and "Button, State=Disabled") and combine them into a set. Each property (like "State") becomes a dropdown in the Design panel wherever an Instance of that set is placed — the same button, switchable between every state it was designed for, without ever leaving the panel.