Component system

The Component system has three parts.

• Main Component: Primary element that defines the properties of the system. Distinguished from other system parts by the 4-filled-diamond icon on both the canvas and in the layer panel. Can be a single component element or multiple, called a component set.

• Variant: Variations of an element in a component set that share common properties. Distinguished from other system parts by the filled-single-diamond icon in the Layer panel, where it's nested within its Main Component.

• Instance: Linked copy of a Main Component that can added to a design in multiple places. The properties of Instances automatically update when its Main Component is modified. Distinguished from other system parts by the single-empty-diamond icon in the Layer panel, but with no icon or text on the canvas.

How to create

Main Component

Components can be created out of an existing element or group of elements by selecting it on the canvas and clicking the “Create component” button in the center of the menu bar at the top of your screen.

Variant

To add a new variant to a main component, right click on another Variant, open the Main Component sub-menu, and select Add variant. A Component will be automatically converted into a Component set once a second Variant is added.

Instance

To create an Instance, duplicate any of the variants in the component set to another part of the canvas using either drag/drop or copy/past.

After an Instance is created, it can be swapped for any other variant in the component set by toggling to another Variant's property in component section of the design panel.