Quick Tip: Design an SVG Arrow Graphic in Adobe XD

In this quick tutorial I’m going to show you how to make an SVG-ready arrow graphic using Adobe XD.

Watch Screencast

[embedded content]

I’ll be using a website design which is part of a new course called “Code Friendly Design With Adobe XD”. It has the main content area at the top of the page already, and now I want to add a button with an arrow which will encourage users to scroll down to view more content.

Adobe XD is not a fully-fledged vector editing program but there’s still quite a bit you can do with it. By using XD’s vector tools wherever you can, instead of flat bitmaps (like JPG, PNG etc.) when you hand the design over to a developer they’ll be able to take those vector graphics and turn them directly into SVG code.

Designing an Arrow Icon

We’ll start with the Ellipse tool and use it to draw a circle of about 85px wide. We’ll remove the border by altering the settings in the right hand Properties panel, then change the fill to something suitable.

We’ll then use the Rectangle tool to create a shape overlapping the top of the circle. When resizing it you’ll notice it snaps neatly to the halfway point on the circle. We can then select both shapes and, using the Boolean Operators in the Properties panel, we can subtract the top half of the circle.

To create the arrow we’re going to subtract another shape from this semi-circle. It will be a little fiddlier than what we’ve done so far, because Adobe XD is designed to be a prototyping application, not a dedicated vector design program. However, we can certainly work with what we have. I’m opting for the Pen tool in combination with the Rectangle tool.

Tip:

Get more control over the paths in your shapes by right-clicking the shape you want to edit, then going to Path > Convert to Path. This will change the object from a predefined shape to a workable set of paths. To edit the nodes on that path, double-click the object.

It’s up to you how you create your arrow icon, but once it’s done, place it on top of the semi-circle object, select both, and subtract the arrow with the Boolean tools like we did before. You should end up with something a bit like this:

You’ve now completed the SVG-ready arrow icon using simple tools in Adobe XD! For details on what you can do with it next, keep your eyes peeled for the up-coming course.