“My team often uses dashed or dotted lines in our designs,” says Cecilia Farooqi, director of digital design for fitness brand Equinox. “They’re great as a visual device when data is the content, for example recapping activity and performance, or data in the actual experience — classes that leverage performance data. Since visualizing data can rely heavily on vector artwork, dashed and dotted lines provide variation to the graphics. It can also visually represent a preliminary state of a sequence, when data or content has yet to populate.”
Equinox’s design team used the “O” from their logo as a visual base to develop an infographic that recapped their members’ performance (see the main image above). They then designed a dashed stroke to outline the “O” that fills in with each data point. It required testing with prototypes to finalize the weight of the dashes so it was legible against the background images, especially on mobile.
The example on the left was a 2014 collaboration with RGA for a gamified studio cycling class. The visual direction called for clean and bold graphics with a limited color palette. The variation in weights and dashes denotes intensity of the riders throughout the game. The screen shows the results recapped in the member’s activity section of the app.
Cecilia explains that the team has sometimes encountered legibility issues when the stroke weight is too small or fine, especially when used over imagery, but that XD is making a big difference.
“Enhanced stroke capabilities in XD eliminate the extra step of creating vector elements in a different application and pasting them in,” she says. “For complex vectors, being able to adjust the dashes and gaps once pasted into XD is also a huge gain. The addition of these features continues to make XD our go-to design tool for digital work.”
Timothy Salter-Hewitt, a UI designer who regularly publishes UX and XD tutorials on YouTube, agrees, and points out the benefit of using the word “border” in XD instead of “stroke.” “One of the essential parts of being able to work fast and efficiently in product teams is speaking the same language, and this is a great example of that,” he says.
Defining dash and gap size in Illustrator, importing into XD
While Adobe XD’s latest update allows you to create dashed and dotted lines right in the tool, our latest update also allows you to create more advanced vector graphics with Adobe Illustrator and import them into XD. This helps you avoid the common pitfall of dealing with a fixed dash and gap size, which often results in your design not fitting its path perfectly.
Illustrator can use dash and gap sizes as a guide, and adjust them to fit the path length (there’s a “dashed lines” button in the Stroke panel), and then you can easily import these preferences into your Adobe XD prototypes. To do this, users copy the line to the clipboard, and click paste appearance, bringing them over as editable lines.
In some cases, if the line’s attributes are not applicable to XD’s stroke options, it will come over as an editable .svg graphic when you copy and paste it into Adobe XD. As you’re defining your dash and gap sizes, Illustrator will also decide what is a corner.
“Using that method, corners try to always have half a dash in them. It looks a lot nicer,” said Marc Edwards, founder and designer at Bjango, which produces apps like iStat Menus and Skala Color. Below, you can see Illustrator switching between a continuous dashed line to a corner in this GIF from Illustrator: