Stroke Enhancements in Adobe XD
One of the new features in Adobe XD starting with July 2018 update is referenced as stroke enhancements. Using new Appearance options you can create dashed and dotted strokes inside Adobe XD. In case that the project needs more complex stroke there is the solution to create a stroke in Illustrator than to paste it in XD. Another cool thing is that complex stroke from Illustrator can be copied and pasted to any native object inside Adobe XD.
How to create a dashed and dotted stroke in Adobe XDDashed and dotted strokes can be created using Properties inspector under Appearance section.
Here are the steps to create a dashed stroke:
- Select an object or group of objects.
- Check Border if it's not checked and border options will expand. Adjust Size, Dash, and Gap. There are and options (icons) to set stroke Cap, for angled/curved open and closed paths you can choose Join and for closed paths you can choose stroke Position.
How to create a dotted strokeCreating dashed stroke is easy, just specify Size, Dash and Gap and deed is done. Creating a dotted stroke is a bit tricky.
To create dotted stroke specify small Dash like 0.1. Click on Round Cap icon to complete dotted stroke effect.
|Steps to create dotted stroke positioned outside in Adobe XD:|
Copy/paste stroke to some other object:
- Select an object with a stroke.
- Right-click and choose Copy or use keyboard shortcut
|To copy/paste stroke use right-click context menu or keyboard shortcuts Ctrl/Cmd + C and Ctrl/Cmd + Alt/Opt + V.|
Copy and paste complex stroke effects from Adobe IllustratorIn case that your project needs more complex stroke, you can create it in Adobe Illustrator. The process of importing a stroke effect is simple:
- Select object in Adobe Illustrator.
- Go to Edit > Copy or use keyboard shortcut Ctrl/Cmd + C.
- Switch to Adobe XD and paste using right click > Paste or keyboard shortcut Ctrl/Cmd + V.
- To copy the same stroke to some other object you must select object pasted from Illustrator. Press Ctrl/Cmd + C or right-click and choose Copy.
- Select the object to which you want to paste copied stroke effect.
- Right-click and choose Paste Appearance or use keyboard shortcut Ctrl/Cmd + Alt/Opt + V.
Product used in this tutorial:
Adobe XD 10.0.12.9
July 2018 Release of Adobe XD: Stroke Enhancements, Commenting on Design Specs, and More