By Dani Beaumont
You can now easily define dashed in dotted lines with a variety of stroke options in Adobe XD, Let's take a closer look at this feature in action.
I'm here in the application and I'm going to begin by designing some native shapes here on the design canvas. I'll start with the line tool and I'm just gonna press and drag a line I'm gonna use keyboard commands here and switch to the Rectangle tool. I'll quickly come in and constrain this and draw a nice square. I'll change to the Ellipse tool and I'll go ahead and create a nice circle.
Next up, I'll come in and move these objects down a little bit so I have just a bit more space and I'm going to select that
Line tool. Notice in the Appearance panel in addition to being able to define the border width I now have the ability to define a dash in a gap so I'll change this size for the border to about 10 pixels. When I hit the tab key I can come in and define a dash of, let's say, 10 and when I hit tab again notice XD is going to automatically set the gap to match that - I can always override that and decide that a gap of 12 pixels makes more sense.
From here, I can easily copy and paste these attributes to other native objects on the canvas. So I'll just right-click and select copy and I can come to the circle, for example, and paste that appearance to that object. If from here I decide I want a different appearance, I can leverage that starting point and just make some changes.
Let's say I want more of a dashed line that has rounded edges. I can come into the butt settings and set the second one or the rounded cap option and I'll go into the gap value and using a keyboard shortcut here I'm just going to bump that up until I get nice spacing between my individual items.
Alternatively, if I want a line that's more of a dot and less of a dash
I'll come in and duplicate this first instance, and with the second instance selected I'll come over to the Appearance panel and I'm going to select
the round cap again in the size field I want to get dots so I'm going to give a little more space and size to that. I'm gonna change my size to eight I'll do a small dash and a gap of more like 16 pixels and hit Tab. It spaces out nicely now.
If you're used to more complex gap in dash patterns you can copy and paste more complex designs from Adobe Illustrator. To do that, I'll switch over to
Illustrator and I'm going to come in and select a more complicated dash and gap pattern. Notice that I've got four different attributes here. I'll copy it to the clipboard, come back over to XD I'm going to paste it on the canvas and I'll move it over to the side. I'll right-click on that object to copy it to the clipboard once again and I'll select a native object and then just paste the appearance to apply that more complex pattern to a native object.
I encourage you to give this new enhanced functionality a try.
Creating dashed and dotted lines in Adobe XD is simply a click away. With a line drawn on the canvas, manpiulating the stroke style is easy to do in the property inspector. Within the Appearance section, underneath the border color selection three input fields exist, one for stroke width, one for dash and one for gap. Entering in values into these input fields will allow the styling of a dashed or dotted line in Adobe XD.
