logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Design systems/Components/Edit instances with component properties

Edit instances with component properties

Component properties allow designers to centrally modify specific properties of a component in the right sidebar, such as toggling the visibility of an icon or editing text content.

When you use an instance with component properties, an instance section will appear in the right sidebar, displaying all editable component properties.

Edit component properties

  1. 1.

    Select an instance with component properties.

  2. 2.

    In the Properties section of the right sidebar, you can switch based on the property type:

    • Variant property: Toggle various variant attributes, such as state or color.
    • Boolean property: Use switches to show or hide layers.
    • Instance swap property: Switch between different instances from a dropdown menu. If a preferred value is set, the menu will display a custom list of instances by default.
    • Text property: Directly edit text content in the right sidebar.
  3. 3.

    When component properties are changed, the instance on the canvas will update simultaneously.

Notes: Text properties do not support rich text formats, such as ordered or unordered lists.

Editing text that includes bulleted or numbered lists through the component property may lose the styles of the list. To retain these styles, it is recommended to edit directly on the canvas. To retain these styles, it is recommended to edit directly on the canvas.

Component properties set to simplify all instances

When a referenced component is set to Simplify all instances, the instance section in the right sidebar will focus on displaying editable component properties.

You can click Show more properties to expand the hidden information.

'Component Properties Set to Simplify all instances.png'

Tip: If you want to restore the Simplify all instances state, deselect the layer and then reselect it to return to the original state.

Expose the properties of nested instances

When the referenced component contains nested instances and is set to Expose the properties of nested instances, the right sidebar will show the properties of the nested instances. This allows you to directly adjust the properties of nested layers without needing to select each layer for editing.

Note: When hovering over a property in the right sidebar, Motiff will add a colored outline to the layer using that property on the canvas.