Skip to main content

Components and instances

A main component is the layer you edit; its instances follow it. You need this page when you create, copy, delete or detach one: a main component reacts to those commands differently than other layers. Also called: symbol, master (main component).

Creating components​

Where: right-click the selection → Create component (Ctrl + Alt + K) or Create multiple components.

  • A single plain frame becomes the component itself. Its children, layout and constraints stay as they are.
  • Any other single layer — a shape, a text layer, a group or an instance — is wrapped in a new component the size of its bounding box, which takes its name. Several selected layers are wrapped together in one component.
  • Wrapped layers are set to Scale on both axes under Constraints, so they resize with the component.
  • Create multiple components makes one component per selected layer by the same rules. It exists only in the context menu, with two or more layers selected.
  • Components don't nest: both commands are missing while the selection sits inside a component. A component inside the selection is moved out onto the page, to the right of the new component, and an instance takes its place.

How instances come about​

There is no insert command and no component library panel. An instance comes from copying a main component.

  • Duplicating (Ctrl + D, Alt-drag) or copy-pasting a standalone component yields an instance of it, never a second component.
  • Inside a component set the same commands yield another variant, and a component pasted into a set becomes a variant of it.
  • Alt-dragging a variant out of its set yields an instance of that variant. A plain drag out of the set moves the variant, which stays a component.
  • Cut and paste moves a main component. Its instances keep following it.
  • For an independent copy, duplicate the component, detach the instance, then run Create component on the frame.

The component icon button in the Properties panel header (tooltip Go to main component) selects an instance's main component.

Deleting and restoring a main component​

Where: select one instance → Properties panel → Restore deleted component. The same link appears on the Interactions tab when the instance inherits interactions from the deleted component.

  • Deleting a main component hides it instead of destroying it, whether or not it has instances. Its instances stay instances and keep showing it. The same holds for a variant and a component set, and for every component inside a deleted frame.
  • While the main component is hidden, Go to main component is disabled.
  • Restore deleted component puts the component back into the parent it was deleted from and selects it. When that parent is gone, it lands in the nearest surviving parent, failing that on the current page. A component whose whole set was deleted comes back with the set.

Detaching an instance​

Where: right-click an instance → Detach instance (Ctrl + Alt + B), or Properties panel header → the three-dot button (tooltip More actions) → Detach, offered while one top-level instance is selected. The context menu and the shortcut detach every selected instance.

  • The instance becomes a plain frame with ordinary layers. The layers keep what the instance showed, overrides and input values included; nothing stays bound to an input.
  • Interactions and object behaviors inherited from the main component are copied onto the frame and its layers, next to the instance's own (→ Interactions on instances).
  • Instances nested inside stay instances and keep their overrides. An instance inside another instance can't be detached on its own: detach the outer instance first.
  • Content held in the instance's own slots becomes ordinary layers.

Components belong to one document​

A component and its instances live in one document: there is no shared library, and nothing links a component to another document. Components and instances pasted into another document are independent copies that never sync with their source.