# 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. !['Color styles.png'](https://static.motiffcontent.com/public/resource/cms/image/6p299gnce.png) ## 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. !['text styles.png'](https://static.motiffcontent.com/public/resource/cms/image/vs5h8693v.png) :::wk-block{.tip} Tip: Text styles do not include text alignment or resizing properties, so you don't need to set these two properties for text styles. Instead, you can customize them in each text layer where the style has been used. ::: ## 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. !['Effect styles.png'](https://static.motiffcontent.com/public/resource/cms/image/fx59bxdfp.png) ## 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. !['layout grid styles.png'](https://static.motiffcontent.com/public/resource/cms/image/d2n8pv042.png) # Create styles You can create styles from the properties of a layer: 1. Select the layer for which you want to create as a style. 2. In the **Design** panel, click !['16_panel_style.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/zyk64q83z.svg) next to the property you want to create as a style, and open the style selector. 3. Click !['16_common_add.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/jq867zoun.svg) in the top-right corner of the style selector. 4. In the modal for creating a new style, enter the name of the style and click **Create styles**. ![Create styles](https://static.motiffcontent.com/public/resource/cms/video/6e363f55-9679-4852-bc40-ca61bcb28ae1.mp4) # Use styles ## Apply styles to layers You can apply local styles or styles from the team component library on layers. 1. Select the layer where you want to apply a style. 2. In the **Design** panel, click !['16_panel_style.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/zyk64q83z.svg) next to the property where you want to use a style, and open the style selector. 3. In the style selector, you can see both local styles and styles from the enabled team component library. 4. Select the style you want to use on the layer. ![Use styles](https://static.motiffcontent.com/public/resource/cms/video/32bbf36b-ebbb-4031-98b8-92e10bc5a109.mp4) :::wk-block{.tip} Tip: The style selector for color styles has two display views: list view and grid view. !['style selector.png'](https://static.motiffcontent.com/public/resource/cms/image/z9uw5lul0.png) ::: ## Change styles You can change the style of a layer that already has a style applied to it. 1. Select the layer whose style you want to change. 2. In the **Design** panel, click the color area to open the style selector. 3. In the style selector, select the style you want to use. ![Change styles](https://static.motiffcontent.com/public/resource/cms/video/69585938-739a-4e77-be4f-5bd807b87e89.mp4) ## 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. Select the layer where you would like to apply a style. 2. In the **Design** panel, click !['16_panel_link.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/ckmu8gzk6.svg) 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 local styles.png'](https://static.motiffcontent.com/public/resource/cms/image/offyil49s.png) ### 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. !['view styles in library.png'](https://static.motiffcontent.com/public/resource/cms/image/wzdi624x7.png) ## 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. :::wk-block{.note} Note: Naming rules: The content before each `/` in the name is the first level of grouping. The last part of the content is the name of the style. For example, if a style is named `-H1/EN/Semibold` , it will be displayed as **Semibold** under the H1 and EN groupings. !['grouping.png'](https://static.motiffcontent.com/public/resource/cms/image/46f2xxb4b.png) ::: :::wk-block{.tip} Tip: You can use ⌘ Command / Ctrl or Shift to select multiple local styles in the design panel. ::: ### 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. Select one or more styles. 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 !['16_panel_adjust.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/fxw8149zy.svg) 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 !['16_common_add.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/oic0i5fud.svg) or !['16_common_delete.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/fr3pac2x5.svg) to add or remove properties from the style. * Click !['16_common_eyes.svg'](https://motiff.fbcontent.cn/public/resource/cms/image/d94sqmjy9.svg) to hide or show properties in the style. !['edit.png'](https://static.motiffcontent.com/public/resource/cms/image/9g0fquy48.png) ### Delete If you wish to delete one or more styles, you can do so directly from the **Design** panel and style selector. 1. Select one or more styles from the local style list. 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.