Components

A component is a piece of layout you design once and place many times: a navbar, a card, a pricing tier, a footer. Each placement is an instance. Edit the component and every instance on every page updates.

Create a component

1. Select what should become reusable

   Select a frame and its contents on the canvas or in Layers.

2. Create the component

   Press ⌥⌘K or choose Create component from the context menu. The selection moves into a new component and is replaced by an instance.

3. Edit it on its artboard

   The component gets its own artboard on the canvas. Edits there flow to every instance live.

Place instances

Drag a component from the Components tab onto an artboard, or use Insert instance. The instance section of the inspector picks its variant, lists its overrides and jumps to the main component.

Variants

Variants are named versions of a component, like light and dark or small and large. Styles can be set per variant, and each instance picks one. The component artboard shows every variant side by side.

Overrides

Double-click into an instance to edit its text in place. That change is stored as an override on that instance only; the component keeps its default. An override can change a child’s props (text, link, image), its styles, or hide it. Instances never copy the component’s tree, so updates to everything you did not override always reach them.

"n_nav": {
  "type": "instance",
  "props": {
    "componentId": "c_navbar",
    "variant": "dark",
    "overrides": {
      "cn_cta":   { "props": { "text": "Sign up free" } },
      "cn_promo": { "hidden": true }
    }
  }
}

Classes or components?

Use a class when many elements share a look. Use a component when they share a structure: the same children in the same order, with a few texts or images that change.