Component properties

Component properties allow designers to define parts of a component that can be modified. All editable properties are displayed in the right sidebar, making it easy for collaborators to edit instances with component properties.

Motiff supports four types of component properties: variant property, boolean property, instance swap property, and text property.

• Variant property: Used to create components with different sizes, states, or colors, such as creating a button with several different states.
• Boolean property: Used to show or hide a layer or toggle between two states, such as a button with or without an icon.
• Instance swap property: Used in scenarios where you need to change icons, images, or other components, such as replacing the icon inside a button.
• Text property: Used to mark editable text content, allowing quick text updates in the right sidebar.

In the example, a button's component set has 24 variants, including 2 types (primary button and secondary button), 4 states of each type (default, hover, pressed, and disabled), and the button has two positions (left and right).

By using component properties, only 8 variants need to be created.

Variant property

Variant property allows you to organize similar components into a single frame, making it easier to manage components with different states.

They are used to create components with different sizes, states, or colors, such as creating a button with several different states.

Boolean property

Boolean property acts like a switch, with only on and off states.

They are used to show or hide a layer or toggle between two states. For example, a button with an icon.

Create from the component’s child layer

1. 1.Select a child layer within a component or a variant.
2. 2.Click in the Layer section of the the right sidebar.
3. 3.Enter a property name and set a default value (e.g. button icon, show).
4. 4.Click Create property. The Layer section will show the corresponding properties.

Create from a component

Two steps involved in this process include creating a Boolean property and applying this property to a child layer.

1. 1.Select a main component or a component set.
2. 2.Click in the Properties section and select Boolean.
3. 3.Enter a property name and set a default value, then click Create property. The Properties section will show the corresponding properties.
4. 4.Select the corresponding child layer to apply this property. Click in the right side of the Layer section and choose the property.
5. 5.The Layer section will show the corresponding properties.

Instance swap property

The instance swap property allows you to display nested instances directly in the right sidebar, making it easier for collaborators to switch them quickly.

They are used when you need to replace icons, images, or other components, such as replacing the icon inside a button.

Create from the component’s child layer

1. 1.

   Select a nested instance within a main component or component set.

2. 2.

   Click in the instance section of the right sidebar.

3. 3.

   Enter a property name and set a default value.

4. 4.

   Additionally, you can select preferred values to set a default swap range, making it easier for users to switch quickly.

5. 5.

   Click Create property. The created property will be displayed in the instance section of the right sidebar.

   

Create from a component

Two steps involved in this process include creating an instance swap property and applying this property to a child layer.

1. 1.

   Select a main component or component set.

2. 2.

   Click in the Properties section of the right sidebar and select Instance swap.

3. 3.

   Enter a property name and set a default value. Select preferred values to set a default swap range, making it easier for users to switch quickly.

4. 4.

   Click Create Property, and the Properties section will show the corresponding property.

5. 5.

   You need to select the child layer to apply this property. Click in the right side of the instance section and choose the corresponding property.

   

6. 6.

   The instance section will show the created property.

Select preferred values

The Preferred values feature for instance swap properties allows you to customize a list of replacement options. This helps users quickly find suitable instances for replacement, improving design efficiency.

You can set Preferred values for instances using the following steps:

1. 1.Open the Create component property panel.
2. 2.Click next to Preferred values.
3. 3.In the component library menu, select the instances you want to add as preferred values.
   • Reorder: Select one or more instances and drag them to the target position to change their display order.
   • Remove: Select the instance you want to delete and click next to it.

Text property

Text properties are used to mark editable text content, making it easy to quickly modify text within components.

After creating text properties for a layer, users can edit the text content either in the right sidebar or directly on the canvas.

Create from component's child layer

1. 1.Select a text layer within a main component or component set.
2. 2.Click in the Text section of the right sidebar.
3. 3.Enter a property name and set a default value.
4. 4.Click Create property. The Text section will show the corresponding properties.

Create from a component

Two steps involved in this process include creating a text property and applying this property to a child layer.

1. 1.Select a component or component set.
2. 2.Click in Properties section of the right sidebar and select Text.
3. 3.Enter a property name and set a default value, then click Create property. The Properties section of the right sidebar will show the created property.
4. 4.You need to select the child layer to apply this property. Click in the Text section and choose the corresponding property.
5. 5.The Text section will show the created property.

Simplify alI instances

Motiff supports the Simplify alI instances feature. When an instance is selected, only the component section is displayed in the right sidebar, allowing collaborators to focus solely on the component without other properties.

You can simplify an instance using the following steps:

1. 1.Select a component or a component set.
2. 2.Click next to the component name in the right sidebar.
3. 3.In the Component configuration panel, check the Simplify alI instances.

Expose the properties of nested instances

Motiff can expose the properties of nested instances. This allows designers to edit the properties of nested layers when selecting a component.

For example, when creating a card component, if you set the nested avatar and button to expose the properties of nested instances, the nested instances will be displayed in the Property section.

When using this component and selecting the top-level frame, all properties of the nested layers will be displayed in the right sidebar. This process allows you to edit the instances at once.

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

Choose properties to expose

1. 1.

   Select a component or component set that contains nested instances.

2. 2.

   Click in the Properties section in the right sidebar and select Nested instances.

   

3. 3.

   Check the instances you want to expose in the top-level frame.

4. 4.

   The Property section will then display the nested instances.

Manage component properties

Adjust order

By default, component properties are displayed in the following order: Variants, Boolean, Instance swap, and Text.

Variants appear above other properties. You can adjust the order of variants or reorder Boolean, Instance swap, and Text properties.

1. 1.Select one or more properties.
2. 2.Drag them to the desired position to change the order.

Edit properties

1. 1.Select a component or component set with created components.
2. 2.Hover the cursor over a property and click on the right.
3. 3.You can modify the Name and Values.

Delete properties

1. 1.Select one or more properties.
2. 2.Delete the selected properties using the or the shortcut key Delete .