Styles

Introduction to styles

In Motiff, styles for frequently used properties can be easily created for future use, which facilitates effective usage and enables uniform adjustment.

Styles in Motiff include color styles, text styles, effect styles, and layout grid styles. Each time you modify a style, such as adjusting the font size of a text style, Motiff will synchronize these changes to all text layers that use this style.

As with components, styles can be used locally or published as part of libraries and used in other files, which facilitates the establishment and maintenance of consistent styles within a team.

Color styles

Color styles can consist of one or more solid colors, gradients, or images. They can be applied to the fill and stroke properties of layers.

Text styles

Text styles are composed of font, weight, size, line height, letter spacing, and paragraph spacing in text properties. They can be applied to the text properties of text layers.

Effect styles

Effect styles can consist of one or more drop shadows, inner shadows, layer blurs, or background blurs. They can be applied to the effect properties of layers.

Layout grid styles

Layout grid styles can consist of one or more grids or columns. They can be applied to the layout grid properties of frames.

Create styles

You can create styles from the properties of a layer:

1. 1.Select the layer for which you want to create as a style.
2. 2.In the Design panel, click next to the property you want to create as a style, and open the style selector.
3. 3.Click in the top-right corner of the style selector.
4. 4.In the modal for creating a new style, enter the name of the style and click Create styles.

Use styles

Apply styles to layers

You can apply local styles or styles from the team component library on layers.

1. 1.Select the layer where you want to apply a style.
2. 2.In the Design panel, click next to the property where you want to use a style, and open the style selector.
3. 3.In the style selector, you can see both local styles and styles from the enabled team component library.
4. 4.Select the style you want to use on the layer.

Change styles

You can change the style of a layer that already has a style applied to it.

1. 1.Select the layer whose style you want to change.
2. 2.In the Design panel, click the color area to open the style selector.
3. 3.In the style selector, select the style you want to use.

Detach styles

When you detach a style from a layer, that layer will keep its existing properties. You can then make changes to those properties as needed.

1. 1.Select the layer where you would like to apply a style.
2. 2.In the Design panel, click next to the style you want to detach.

Manage styles

View styles

View local styles

Local styles are styles that exist in the current file. You can see local styles in the Design panel and style selector when no layer is selected.

View styles in the team libraries

To view the styles of other published files, you can check the style selector or view the styles in individual libraries in the Shared libraries modal.

Manage local styles

You can modify and organize styles in the file from the Design panel.

Group

To make finding and selecting styles easier, you can group them in the following three ways:

• Select the styles you want to group, right-click to bring up the context menu, and choose Add new folder.
• Select the styles you want to group and use the shortcut keys ⌘ Command + G / Ctrl + G .
• Create groups or add styles to existing groups by using / in the style names.

Sort

By default, styles are displayed in the order they were added. To make them easier to find, you can adjust their display order or the group they belong to.

1. 1.Select one or more styles.
2. 2.Drag the styles to the desired location to change their order or move them into a group.

Edit

You can edit local styles from both the Design panel and the style selector.

• Design panel: Hover over a style and then click on the right-side.
• Style selector: Right-click on a style and choose Edit style from the menu.

The Edit color style modal allows you to view and edit the specific properties of the style, including:

• View or edit the style name.

• View or edit the style description.

• View or edit the style properties.

  • Click or to add or remove properties from the style.
  • Click to hide or show properties in the style.

Delete

If you wish to delete one or more styles, you can do so directly from the Design panel and style selector.

1. 1.Select one or more styles from the local style list.
2. 2.Delete the selected styles using the right-click menu or the Delete key.

After deleting a style, you can no longer use it. Layers that use this style will retain their properties but are detached from this style.