Using the Pen Tool in Adobe XD

In this tutorial, we’re going to learn how to use the Pen Tool in Adobe Experience Design CC (Adobe XD).

Drawing Straight Lines in Adobe XD

1. Create a new document.

2. Select the Pen Tool.

3. Left-click to create an anchor point on your artboard.

4. Left-click anywhere else on the artboard to create a second anchor point, and a straight line will be drawn between these two points.

5. You can add as many anchor points as you like, and can complete your shape by left-clicking on the first anchor point that you created back in Step 3.

6. With your shape selected and in the Property Inspector on the right, you can adjust the colour of your fill and border, as well as the border width.

7. Borders and fills can be toggled on/off by using the tick boxes alongside each option respectively.

8. You can double-click a straight anchor point using the Select Tool, to convert the lines either side into curves.

 

Drawing Curved Lines in Adobe XD

1. Create a new document.

2. Select the Pen Tool.

3. Left-click to create an anchor point on your artboard.

4. Left-click and hold anywhere else on the artboard to create a second anchor point. However, before releasing your mouse button, drag in any direction to adjust the curve between these two anchor points.

5. When placing your next anchor point, Adobe XD will automatically assist when adjusting the curvature, to help your lines flow smoothly into one another.

6. You can use a combination of straight and curved lines together, depending on whether you click and drag in a direction, whilst holding the Left Mouse Button in Step 4.

7. Using the Select Tool, you can double-click your shape, and then select an anchor point. With the anchor point selected, adjustment handles will appear on either side, that allow you to adjust the lines’ curvature. Holding down the Alt key whilst making this adjustment, allows you adjust each line individually.

8. You can double-click a curved anchor point using the Select Tool to convert the lines either side into straight lines.

 

Download Adobe Experience Design CC (Adobe XD).

Read More at Using the Pen Tool in Adobe XD

from Web Design Ledger http://webdesignledger.com/using-pen-tool-adobe-xd/