How to Create a Component in Figma (Ctrl+Alt+K)

Ctrl+Alt+K on Windows, or Cmd+Option+K on Mac, converts the currently selected layer or group of layers into a reusable master component — the foundational building block behind any Figma design system. **What changes visually**: the converted layer gets a small purple diamond icon in the layers panel, distinguishing it at a glance from an ordinary frame or group. This diamond marks it specifically as a main component, the authoritative source that instances elsewhere in the file (or across other files, once published to a shared team library) reference and stay synchronized with. **Creating an instance from a component**: once a main component exists, dragging a copy of it from the Assets panel, or Option/Alt-dragging a duplicate directly from the canvas, creates an instance — a linked copy that inherits the master's structure and default styling but can also carry its own local overrides (a different text label, a swapped icon) without breaking the underlying link back to the master. **What propagates automatically and what doesn't**: editing the master component's structural properties — its base layout, its default fill colors, its default text content — propagates that change to every instance that hasn't specifically overridden that particular property locally. If an instance has a local override on, say, its text content, editing the master's default text won't overwrite that instance's specific override, since local overrides are considered more specific and take precedence over the master's defaults for that particular property. **Building a component set with variants**: selecting several related components (a button in its Default, Hover, and Disabled states, for instance, each built as its own separate component first) and combining them via Figma's Combine as variants feature groups them into a single component set, letting instances switch between those states through a variant property dropdown rather than needing to swap between entirely separate unrelated components. **Alternative methods**: for a genuinely one-off element you never intend to reuse, skipping component creation entirely and just working with a plain frame or group is simpler and avoids the overhead of maintaining a component that has no actual instances anywhere. **Related shortcuts**: Ctrl+Alt+B (Cmd+Option+B) detaches an instance from its component entirely, the deliberate reverse of this relationship. Right-click > Go to main component navigates from any instance straight to wherever its master lives, useful once a library file has grown large enough that manually locating a specific master component would otherwise mean searching through several pages. **Mistake to avoid**: creating a component from a selection that still contains hardcoded, overly specific content (a placeholder name like "John Smith" typed directly rather than using clearly labeled placeholder text) makes every future instance start from that same specific, potentially misleading default — it's worth using clearly generic placeholder content when building the master component so instances make it obvious at a glance which text is meant to be edited per-use. **Nesting components within components**: a component isn't limited to simple shapes and text — a card component commonly contains a nested button component, an avatar component, and an icon component all inside it, each maintaining their own independent link back to their own respective masters. This nesting is how larger design system pieces (a full card, a complete form) stay in sync with smaller foundational pieces (a button, an input field) simultaneously, since editing the foundational button component propagates that change up through every card that contains an instance of it. **Component properties beyond variants**: newer Figma versions support component properties beyond just variant switching — boolean properties (show/hide a specific layer, like an optional icon), text properties (edit a specific text layer's content directly from the instance without digging into nested layers), and instance-swap properties (let an instance's user choose which other component fills a specific slot, like swapping which icon appears in a button). These give an instance considerably more configurable flexibility directly from the right panel than variants alone would provide, without requiring an ever-growing combinatorial explosion of separate variant options to cover every possible configuration.