<?xml version="1.0" encoding="utf-8"?>

Custom strokes

Custom strokes

Custom strokes help you create unique dashed or dotted lines with tailored patterns. This is ideal for emphasizing specific elements, creating visual rhythms, or guiding user navigation in a design.

To apply a custom stroke:

  1. Go to the Stroke section in the Design panel and click the Advanced stroke settings icon.
  2. Choose the Custom option under Stroke style dropdown.
  3. In the Dashes setting, input your pattern using the syntax [dash size, gap size, dash size, gap size...] This allows for intricate sequences of dashes and gaps. For instance, to create a pattern of a long dash followed by a short gap, then a short dash and another short gap, enter [10, 5, 5, 5]. Adjusting these values lets you experiment with various visual effects tailored to your design's needs.
  4. Select a Dash cap to define the shape of the dash ends.

Improve your UX & Product skills with interactive courses that actually work