Components

A component is a layer you reuse. Its instances follow every change to it and keep only what differs.

Components and instances

A component is any layer with reusable: true. An instance is a ref layer whose ref is the component's id. The instance draws the component's whole subtree and stores only its overrides, so when you change the component, every instance follows.

In the app, select a layer and click Create component in the Inspector (⌥⌘K). The same button reads Remove component on a component. The Components tab in the left sidebar lists the document's components: click one to place an instance in the middle of the canvas, or drag it onto the canvas.

An agent makes a component by inserting a layer with reusable: true, then places instances with type: "ref". Copying a component with Copy also creates a connected instance. In the snippet below, heroCtas is a frame saved by an earlier call.

btn = Insert(document, {type: "frame", name: "Button/Primary", reusable: true, x: 2000, y: 0,
  gap: 8, padding: [12, 20], alignItems: "center", fill: "#4F46E5", cornerRadius: 8})
btnLabel = Insert(btn, {type: "text", name: "Label", content: "Button", fontSize: 15, fontWeight: "600", fill: "#FFFFFF"})
Insert(heroCtas, {type: "ref", ref: btn, name: "Start trial",
  descendants: {[btnLabel]: {content: "Start free trial"}}})

An instance inside a layout frame is placed by that layout. Anywhere else, give it both x and y.

Overrides

• Properties set on the ref layer itself override the component's root.
• descendants overrides layers inside the instance. Its keys are a child's id, path or unique name. For nested instances, join ids with / in one flat map.
• An override that includes type replaces that descendant with the whole tree you give. This is how a card component takes different content.
• An override changes only the layer it names, not its children.

After an instance exists, address a layer inside it with an instance path, instanceId/childId. Update on that path becomes an override, and Delete disables the child in that instance only. In this example, sales is an instance and label and icon are ids of children in its component, saved by earlier calls.

Update(sales + "/" + label, {content: "Sales"})
Delete(sales + "/" + icon)

Variants

A component set is a frame with componentSet: true. Each child is one variant: a reusable: true layer with a variant map such as {"Size": "Small", "State": "Hover"}, named after its values. Every variant has the same properties. An instance refs one variant, and Update(instance, {ref: otherVariant}) switches it; its overrides follow layers with the same names.

In the Inspector, Add variant turns a component into a set. On an instance, the variant menus switch between variants.

Component properties

A component, or the set its variants share, can define properties of three kinds: text, boolean and instance. A layer inside binds to one with bind: {content: "Label"} for text, {visible: "Icon"} to show or hide it, or {ref: "Glyph"} to swap a nested instance. An instance then sets values with properties.

Update(btn, {properties: {"Label": {type: "text", default: "Button"}}})
Update(btnLabel, {bind: {content: "Label"}})
Insert(heroCtas, {type: "ref", ref: btn, name: "Sign in", properties: {"Label": "Sign in"}})

A missing or wrong-kind value uses the default, and descendants overrides still win. In the Inspector, use Add property on the component.

Detaching

Detach instance (⌥⌘B) replaces an instance with a plain copy that has its overrides applied and new ids. Nested instances are detached too. Prefer overrides to detaching: a detached copy no longer follows the component.

Something unclear, missing or broken? Write to feedback@anaknegeri.dev.