What are components?
Components are a feature that lets you register and manage elements you want to reuse and control together as "shared parts" within a project. When you edit a component, the changes are automatically applied to every place where that component is used.
Tip: You can also customize individual instances by using the properties feature.
Key features of components
Reusable: Place a component you've created in multiple locations.
Bulk editing: Edit a single component, and the changes automatically apply to every instance.
Customizable: Use the properties feature to individually customize each instance of a placed component.
When to use components
Turn elements that appear throughout your site into components, such as headers, footers, and navigation menus.
Create a component
On the screen or in the Layers panel, select the element you want to turn into a component.
Convert it into a component using one of these methods:
Right-click and select [Convert to Component]
Use the shortcut ⌘+J (Ctrl+J on Windows)
Enter a name for the component.
Check any elements you want to turn into properties. Elements set as properties can be customized individually for each instance of the component.
Click [Create Component].
View and place components
In the left navigation of the Design Editor, click the Components icon
.The Components panel opens on the left, showing a list of all created components.
Select the component you want to place, then add it to the screen using one of these methods:
Drag and drop
Click to place
Edit a component
Select the component on the screen.
Double-click the component, or select it and press Enter to switch to edit mode.
In edit mode, you can:
Add or delete boxes
Edit layout, appearance, position, and more
Add or edit properties
Areas that are registered as properties can be edited directly without entering edit mode.
Detach a component
If you want to treat a component as a regular box, you can detach it by following these steps.
On the screen or in the Layers panel, select the component you want to detach.
Use the shortcut ⌘+Shift+J (Ctrl+Shift+J on Windows) to detach the component.
When you detach a component, the element remains on the screen as a regular box. The original component and other instances are not affected.
Delete a component
In the left navigation of the Design Editor, click the Components icon
.The Components panel opens on the left.
Select the component you want to delete from the list.
Click the "×" to the right of the component name to delete it.
When you delete a component, any instances placed on the page are automatically detached and remain as regular boxes.
Use properties with components
Normally, you can't set different data or designs for each instance of the same component. But by using properties, you can switch the data or design for each instance individually.
For an overview of properties and detailed setup steps, see Use properties to vary the data and design of the same component across instances.
component 紫 パープル 紫色 フッダー ｺﾝﾎﾟｰﾈﾝﾄ