You can create a component out of parts like headers and footers for reusing in your project.
After creating a component, any edits made to one of them will automatically apply to all instances where they are used. This makes it easy to create and manage consistent designs throughout the project.
Additionally, properties can be added to components.
Properties let you vary each component instance you place. For instance, you can modify the design or assign different links to each instance.
Creating Components
Select the box you want to turn into a component, right-click, and choose "Convert to Component." Alternatively, you can press ⌘+J (Ctrl+J on Windows).
Give a name to the component, tick the checkboxes for the data (e.g. text, image) you want to add as properties, and click "Create Component.”
The created component will be found under the Component section as part of the Add panel on the left side of the Editor.
Placing and Editing Components
From the Component section in the Add panel on the left side of the Editor, drag and drop or click to place the component you want on the page.
To edit the placed component, double-click it to enter the editing mode. In this state, you can add boxes and edit styles.
Note: For properties you have added when creating the component, you can easily edit them by simply double-clicking, without entering the editing mode.
Properties in Components
Component properties are useful when making edits to individual component instances. For data added as properties, you can use different variations for each component instance.
Types of Properties
There are five types of properties that can be used within a component:
Text
Image
Number
Boolean
URL
Note: By adding properties, you can create custom conditional styling.
Property Settings
When you select a component and open the Layers panel, you'll see a new property settings section.
Creating New Properties
You can also add properties after a component is created. Double-click the component to enter editing mode, then click the "+" button in the property settings section.
For properties added, you can edit the associated data from the Layers panel.
Additionally, when you add text or image boxes within a component in editing mode, an “Add Property” option will be displayed. Clicking on it will turn them into properties.
Linking Newly Created Properties to Data or Styles
For properties newly created, link them to data within the component by using the connector from the blue circle next to each property.
Numeric properties can be linked to style settings for the component, such as padding and width. Note, margin or border are not yet supported.
Editing Property Names and Deleting Properties
Click on a property name to edit its name or delete the property.
Detaching Components
To revert a placed component back to a regular box, press ⌘+Shift+J (Ctrl+Shift+J on Windows).
When you detach a component with linked properties, it will remain as a regular box in the state just before it was converted to a component.
Deleting Components
Click the "X" in the component list to delete a component.
When you delete a component, the placed components on the page will automatically be detached and remain as regular boxes in the state just before they were converted to components.
