Stroke properties

Stroke is a layer property and a visual expression of vector paths. It allows designers to add outlines, add borders to images, apply strokes to individual sides, and create straight lines and arrows. These features enhance precision and visual clarity while maintaining creative flexibility.

Add stroke to layers

You can add stroke properties by using the following steps:

1. 1.Select a layer on which you want to add strokes.
2. 2.Click in the Stroke section to add strokes.

Adjust stroke properties

You can adjust the appearance of the stroke by changing the color, position, weight, and advanced stroke settings.

Color

To add one or more colors to the stroke, you can click on the right side of the Stroke modal, and then change the colors by clicking on the color wells.

To delete stroke colors, you can click on the right side of the color to delete the corresponding color.

Apply stroke colors

To apply stroke colors, you can follow the steps listed below:

1. 1.Click on the right side of the Stroke section to open the style picker.
2. 2.Click the style you want to use to apply that style on the stroke.

Position

The position of the stroke can be customized for different shape layers. The default option for most shape layers is an inside stroke, while straight lines and arrows use center strokes.

To adjust the stroke position, click on the stroke position below the color well and choose the position you want from the expanded list.

Weight

You can set the weight of the stroke through ：

• Enter a numerical value for the stroke thickness.
• Hold ⌥ Option / Alt and drag in the input box.

Individual stroke

By default, Motiff applies the stroke to all sides of the layer. However, for rectangles, frames, and components, you can set the stroke properties for each side separately by using the following two ways.

• Click to the right of the stroke weights to choose which side of the layer to apply the stroke properties.

• Select to set the four sides separately. After selecting , you can see four individual fields corresponding to the top, bottom, left, and right sides. Then, set the weights for each side through these fields. If you want to remove a stroke from a side, you can set the weight to 0 .

Advanced stroke

Dashed line

The stroke style is set to Solid by default, but you can change it to a dashed line:

• Click to open the Advanced stroke panel.
• Click the dropdown menu to the right of the stroke style and select .
• You can customize the length of the dashes and gaps (in pixels) through the input boxes to the right of the dashed line and spacing.
• Customize the dashed line style.

End point styles

You can set the end point style for any open path. Depending on the structure of the selected layer, the end point properties will be displayed in different locations.

Two end points: If the selected layer has only two end points, you can directly set the styles of both ends in the Stroke modal, such as straight lines and arrows.

More than two endpoints: If the selected layer has one or more than two endpoints, you can click to find the endpoint style properties in the Advanced stroke panel.

This property controls all end points of the selected layer. If you want to adjust one or more end points separately, you can enter vector editing mode, select the end points you want to adjust, and set their styles individually.

In Motiff, you can set the endpoints to the following styles:

• Normal: The endpoint is square and does not extend the path length.
• Line arrow: Features two 45-degree lines on both sides of the endpoint, creating an arrow shape. The arrow maintains the same stroke weight as the path, and the length of the arrowhead lines cannot be adjusted.
• Triangle arrow: A triangular arrowhead points outward to both endpoints.
• Reverse triangle: A reversed version of the triangle arrow, with the arrowhead pointing inward toward the path.
• Diamond arrow: Adds a solid diamond-shaped arrow at the endpoint.
• Round: Adds a semi-circle with a radius half of the stroke outside the endpoint.
• Square: Adds a square outside the endpoints of the path with a width half of the stroke weight.

Join

You can set the style of any joins on the path. This property controls all joins of the selected layer. If you want to adjust one or more joins individually, you need to enter vector editing mode, select the join you want to adjust, and then set their styles individually.

Join styles include:

• Miter: Extends two paths to form a sharp point when they meet.

  • When the join style is set to sharp, you can set the Miter angle of their node. When the angle of the node is less than the angle set, the node will be displayed as a bevel.

• Bevel: Cuts off the sharp point to form a flat edge.

• Round: Processes the sharp corner at the join into a rounded corner.