Styles

Styles are layer properties that can be reused across your designs. This feature helps you avoid repetitive tasks and maintain consistent standards.

Style types

Creatie supports the following style types:

• Corner radius style
• Gap style
• Padding style
• Text style
• Color style
• Stroke width style
• Effects style
• Layout grid style

Corner radius style

The corner radius style consists of 4 values. From left to right, the 4 values correspond to the top-left corner, top-right corner, bottom-right corner, and bottom-left corner. When the selected layer contains fewer or more than 4 corners, applying the corner radius style will use the first non-zero value for all corners.

To create a corner radius style, select a layer, click the Create or use style icon in the right-side properties panel, and then click + to create a style.

Gap style

Applied to the gap in smart layout.

You can use gap styles not only in the properties panel but also more intuitively on the canvas.

Padding style

Applied to the padding in smart layout.

Similar to gap styles, padding styles can be directly applied on the canvas for a more intuitive view.

Text style

You can create text styles, which record the font, weight, size, line height, letter spacing, text decoration, and case settings.

Note: Each text block requires individual alignment adjustment instead of reusable styles, as text alignment is not included in text styles.

Color style

Applied to the fill and text colors, including gradient styles.

You can create solid, gradient, and image fills. When creating a style for a gradient, both the colors used and the gradient direction, or angle, will be saved to the style.

Stroke style

Set stroke width as a style for quick application in subsequent design processes.

Effect style

You can create drop shadow, inner shadow, Gaussian blur, and background blur properties as styles.

Note: If you add multiple effects (one drop shadow and one inner shadow) and create a style, these properties will be saved in a single effect style.

Layout grid style

Set layout grid styles to apply different layout grids in subsequent design processes.

Manage styles

Edit styles

To edit local styles created in the current file:

• Select a layer, click the Create or user style icon next to each property and click the Edit style icon in the popup

• Click on the empty area of the canvas, click the Edit style in the style management panel in the right sidebar

Any changes you make to the style, such as updating text color from red to blue, will update any layers in the file that use this style.

Rename styles

To rename local styles created in the current file, you can click on the empty area of the canvas and get local style list, then:

• Click the Edit style icon next to each style in the right sidebar
• Hover over the style, right-click, and select Edit style

• Or hover over the name of style, double click to rename it

When a layer is selected, you can click the Create or user style icon next to each property to open the style popup, then:

• Click the Edit style icon
• Or hover over the style, right-click and select Edit style

Group and order styles

In the style management panel, you can organize your styles in categories to apply them more conveniently. Select one or more styles, right-click the selected style(s) and click Add to new category.

You can also use the slash naming convention to name and organize the styles into groups quickly.

You can left-click to select and drag the style to move the style into or out of a category, and change the order of styles.

Match styles

As the available styles become numerous and complex, the increasing difficulty of finding styles may decreasing the designer's willingness to actively use styles.

You can enter keywords to quickly apply desired styles. Creatie will match keywords with the names and values of all corresponding styles in the current file's style libraries

Notes: Matching for color HEX values is limited to solid color styles. Text styles, effect styles, and layout grid styles do not currently support keyword matching.

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful