Stroke properties
Stroke is a layer property and a visual expression of vector paths. You can use strokes to:
- Add the outlines of shapes, vector networks, or boolean operations.
- Create straight lines and arrows.
- Add borders to images.
- Add strokes to individual sides of rectangles, frames, and components.
Stroke properties
You can adjust the appearance of the stroke through its color, position, weight, and end point properties.
Color
Add color
You can add one or more colors to the stroke. Click 
on the right side of the Stroke modal to add color to the stroke.
Delete color
Click 
on the right side of the color to delete the corresponding color.
Apply color styles for stroke
Click 
on the right side of the Stroke modal, open the style picker, click the style you want to use, and use that style on the stroke.
Position
You can define the position of the stroke. The default option for most shape layers is an Inside stroke, except straight lines and arrows use center strokes.
Below the color, click on the stroke position, and choose the stroke position 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.
Click 
to the right of the stroke weights to choose which side of the layer to apply the stroke properties.
You can also select 
to set the four sides separately.
After selecting , you can see four individual fields corresponding to the top, bottom, left, and right sides. You can 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 .
Dashed line
You can set the stroke to be a dashed line:
-
Click
to open the Advanced stroke menu. -
Click the dropdown menu to the right of the stroke style and select
. -
You can customize the length of the Dash and Gap (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. For example: 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 menu.
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 end points to the following styles:
- None: The endpoint is square and does not extend the path length.
- Line arrow: Two 45-degree lines on both sides of the end point form the shape of an arrow. The arrow uses the same stroke weight as the path itself. You cannot change the length of the arrow head lines.
- Triangle arrow: Triangle arrowhead pointing outward to both end points.
- Reversed triangle: The reverse version of the triangle arrow, with the arrow pointing inward towards the path.
- Diamond arrow: Adds a solid diamond-shaped arrow at the end point.
- Round: Adds a semi-circle with a radius half of the stroke outside the end point.
- Square: Adds a square outside the end points of the path with a width half of the stroke weight.
Join styles
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.
- Bevel: Cuts off the sharp point to form a flat edge.
- Round: Processes the sharp corner at the join into a rounded corner.
Tip: When the join style is set to sharp, you can set the angle of their node. When the angle of the node is less than the angle set, the node will be displayed as a bevel.
For different layers, different properties can be set at the stroke.
| Layer type | Color | Position | Weight | Stroke per side | Style | End point |
|---|---|---|---|---|---|---|
| Rectangle | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
| Line | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ |
| Arrow | ✅ | ❌ | ✅ | ❌ | ✅ | ✅ |
| Ellipse | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ |
| Polygon | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ |
| Star | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ |
| Boolean | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ |
| Vector network | ✅ | ✅ | ✅ | ❌ | ✅ | Open path only |
| Text | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ |
| Frame & Component | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
Outline
You can use the outline feature to convert the stroke into a vector layer and make it an independently editable layer.
Note: Outlining is a one-time transformation operation that cannot be reverted to a stroke in subsequent edits.
After outlining, the visible stroke range will be converted into a fill area. You can outline a layer in the following ways:
- Right-click on the layer and select Outline from the context menu.
- After selecting the layer, click Main menu - Object - Outline stroke.
- Use shortcuts:
- macOS: ⇧ Shift + ⌘ Command + O
- Windows: Ctrl + Shift + O
You can enter vector editing to view the path after outlining.
