Drawing basic shapes

We have already drawn some basic shapes in the last few chapters, but now it’s time to dive deeper into each shape-drawing tool available in Adobe XD.

 

Rectangle tool

This is probably the one you will be using more often: in UI design, rectangles are used for a wide range of purposes.

To draw a rectangle, first select the rectangle tool from the toolbar or use the R shortcut, and then click and drag diagonally until the rectangle has the size you are looking for (which you can check from the property inspector on the right).

If you want to draw a square, you need to do the same while holding the SHIFT key. You will notice that width and height of the rectangle are constrained to be the same.

 

With Adobe XD, it’s incredibly easy to edit the corner radii of rectangles and squares.

If you want to change all of the corners simultaneously, you can either drag one of the rounded handles included within the rectangle, or change the corner radius setting in the property inspector.

change radius xd

 

If you want to change the radius of a single corner only, you can either drag one of the rounded handles within the rectangle while holding ALT, or you can select the multiple radius icon in the property inspector, and set manually the px value of each radius.

 

Ellipse tool

To draw an ellipse, first select the ellipse tool from the toolbar or use the shortcut, then click and drag diagonally until you have the ellipse of the size you want.

Truth is, you won’t be drawing many ellipses, but you will need to draw circles quite often!

So to draw a perfect circle, just hold down the SHIFT key while you click & drag.

 

 

Line tool

To draw a 1px line, first select the line tool from the toolbar or use the L shortcut, then click and drag until you have the line you want.

By holding down the SHIFT key while doing that, you’ll make sure that the line drawn will be perfectly vertical, horizontal, or 45 degrees diagonal.

 

PREVIOUS CHAPTER                                                                                       NEXT CHAPTER