Strokes
Add outlines or borders to frames, shapes, vectors, and text.
Stroke position
Strokes can be placed relative to the layer boundary:
- Center — the stroke sits on the edge, half inside and half outside the layer bounds.
- Inside — the stroke is drawn inward, so the outer dimensions of the layer do not change.
- Outside — the stroke is drawn outward, expanding the visible area beyond the layer bounds.
Use Inside when you need the layer to occupy a fixed space regardless of stroke width.
How to add and edit a stroke
- Select a layer that supports strokes (frames, shapes, vectors, text).
- Open the Stroke section in the right inspector.
- Click + to add a stroke.
- Click the color swatch to change stroke color.
- Enter a value in the width field to set thickness in pixels.
- Use the position dropdown to choose Center, Inside, or Outside.
Multiple strokes
You can add more than one stroke to a layer. Each stroke has its own color, width, and position. Drag strokes in the list to reorder them. Click the visibility toggle to disable a stroke without removing it.
Outline stroke
To convert a stroke into a filled vector shape, select the layer and use Outline Stroke from the inline toolbar or the node settings panel. This is useful when you need to edit the stroke as a path or export it as a closed shape.
Tips
- Use Inside strokes on UI components to keep their bounding box predictable for layout.
- Use thin Outside strokes to add a subtle separation between elements without affecting their size.
- Stroke color supports opacity independently of the layer opacity.