Drawing a Speech Bubble Icon in Adobe XD

In this tutorial, we’re going to learn how to draw a speech bubble icon in Adobe Experience Design CC (Adobe XD).

The Steps (1-8)

1. Create a New Artboard.

2. Select the Ellipse Tool, Left-click anywhere on the artboard and hold Shift to draw a circle.

3. Next, select the Rectangle Tool, Left-click and hold Shift to draw a square. Make sure that the square is about 1/5 the size of the circle created in Step 2.

4. With the Selection Tool, Double-click the newly created square to edit, and select the top-right anchor point. Hit Delete or Backspace to remove this anchor point. This will leave you with a three-sided shape.

5. Position the three-sided triangle shape in the bottom-left corner of the circle. Double-click the bottom-left anchor point to edit, and use the Left/Down arrow keys to move this anchor point downwards and towards the left. Whilst this can be done using the mouse, currently dragging the anchor point using the mouse does not snap it to a 45 degree angle, and so using the arrow keys (in turn, one after the other) ensures that as you adjust the ‘point’ on the triangle, it remains balanced without being skewed out of shape.

6. Once you are happy with the proportions of your triangle shape, adjust the overall size by Left-clicking and holding Alt + Shift on any one of the corner anchor points to scale the shape upwards/downwards from the centre.

7. When you are happy with the shape and size of your speech bubble, Left-click and hold Shift to select both the circle and the triangle shapes, and in the Pathfinder Options in the Property Inspector, select the Add option. This will combine the two shapes into one complete speech bubble shape.

8. Select a Fill colour of your choice (for this tutorial, the Fill colour is set to white #FFFFFF) and also adjust the Colour and Width of the Border. For this tutorial, the Border Width is set to 30 pixels.

Download Adobe Experience Design CC (Adobe XD).