Menu Search
Jump to the content X X

Sponsored Post How To Create Icons In Adobe XD

Released in March this year, Adobe Experience Design1 (“XD”) is a new all-in-one tool that lets you design and prototype websites and mobile apps. It is bound to provide a fast and efficient way to create new user interfaces, wireframes and visual designs for multiple devices. XD is still in beta and available for Mac — a Windows version will be released in late 2016.

Further Reading on SmashingMag: Link

As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.

Table of Contents Link

In this tutorial, you’ll learn how to:

  1. Set up your document for Icon Design (Artboard5, Grid6, Color Palette7)
  2. Design with Pen Tool8, Rectangle Tool9,
  3. Create a prototype10,
  4. Export11 and share12 your icons.

So without a further ado, let’s get started!

Preparing Artboards

First off, we are going to create a new office icon set, taking some examples from my previous icon set13 which was published as a freebie here on Smashing Magazine. First, we’ll create the icons, then we’ll create a simple app user interface with them.

Open Adobe Experience Design, and you’ll see this:

Creating Icons in Adobe XD Tutorial14

Choose “Custom Size” and click “Open“.

In the new window, click on the Artboard Tool (A) in the toolbar on the left. Once clicked, you’ll see some UI settings showing in the Property Inspector on the right. Since we’ll begin with our icon set, we will create a custom artboard first.

Creating Icons in Adobe XD Tutorial15

Click and drag to create a 512×512 px artboard. To have more control over its size, you can also enter the width and height values directly in the dimensions section in the Property Inspector on the right.

Creating Icons in Adobe XD Tutorial16

Double-click on the artboard name on top of your artboard and name it “Icon-01”.

Creating Icons in Adobe XD Tutorial17

We need another three artboards identical to the one we already created. To create a new artboard with the same dimensions of the first one, you just need to do Cmd + C and Cmd + V.

(Note: if you just click on the gray space on the right-hand side next to your first artboard instead of doing Cmd + C, XD will also add a new artboard but with the dimensions of the first device that is listed in the Property Inspector on the right, in this case iPhone 6.)

Every new artboard will be positioned in the same row, but you can easily drag and drop artboards four and five under the first two. Name them “Icon-01”, “Icon-02”, “Icon-03”, “Icon-04”.

Creating Icons in Adobe XD Tutorial18

At this point, save your project via File → Save as and name it “Office-Icons”.

Creating A Color Palette

Now, let’s create a swatches palette to position above our artboards. Click on the Rectangle Tool (R) and create a square with the dimensions 120×120 px. You’ll need to create four more squares with the same dimensions. Just do Cmd + C and Cmd + V. Contrary to copying and pasting artboards, Adobe Experience will paste objects like these on top of instead of next to each other. So select and drag them to the right.

To choose a color for your square, click on it and go to the Property Inspector on the right and there to the Appearance section where it says “Fill“.

Creating Icons in Adobe XD Tutorial19

Using Fill Tool, you will be able to do three things:

  • Opening the swatches palette by clicking on the white rectangle displayed next to “Fill” and then choosing a color from the various palettes it contains (color wheel, color sliders, color palettes, image palettes, pencils).
  • Using the color picker to pick a color from a source.
  • Adding picked colors to the swatch in the color pick

If you prefer, you can also manually enter a hex value in the color picker.

Now, I will use the color picker to choose a color for every square from my palette image. After you’re done, select all your swatches palette squares and get rid of their border color by unchecking “Border” in the Property Inspector.

Creating Icons in Adobe XD Tutorial20

Here is my palette. You can use it to drag and drop it into your XD window.

Creating Icons in Adobe XD Tutorial21

Let’s see how to add these colors to XD watches. Create a square above palette colors and click on “Repeat Grid”.

Create a square above palette colors and click on Repeat Grid22

Drag to create other five squares.

Drag to create other five squares.23
Drag to create other five squares.24

Now, with all squares selected, click on “Ungroup Grid”. Click on the first square, then grab the Color Picker and pick the color from the first colored square of our palette.

Let’s see how to add colors to the swatch, in the video below. It shows you how to get rid of swatches, too.


After that, you are free to delete squares palette colors we created before.

Creating Icons

Let’s begin to draw our icons! First, we need to see a grid on our artboards. Click on your first artboard and check “Grid” in the Property Inspector. Set the size of the grid to 30. Now all your shapes will snap to the grid.

Creating Icons in Adobe XD Tutorial25

Icon Nr. 1: Clipboard Link

Our first icon will be a clipboard.

Click on the Rectangle Tool (R) and draw a rectangle as shown in the image below.

Creating Icons in Adobe XD Tutorial26

Select the color picker next to “Border” in the Appearance panel, and click on the blue square in your swatches palette. Then set the border size to 20 and set “Fill” to white.

Creating Icons in Adobe XD Tutorial27

Drag your rectangle downwards, so that it goes over the border of your artboard. The overlapping part of your rectangle will disappear once you click anywhere outside the artboard.

Creating Icons in Adobe XD Tutorial28
Creating Icons in Adobe XD Tutorial29

Grab your Rectangle Tool (R) again, and draw a little rectangle at the top of the board. Take the “Fill” color picker and select the yellow color from our palette. Uncheck “Border”.

Creating Icons in Adobe XD Tutorial30

Click on the last rectangle you created. You will four rounded corner handles showing up. Click on one of them and drag it inwards a little to create rounded corners. Alternatively, you can also insert a value directly into the corner radius box.

Creating Icons in Adobe XD Tutorial31
Creating Icons in Adobe XD Tutorial32

This will be the result:

Creating Icons in Adobe XD Tutorial33

Now, create another rectangle following the previous steps and position it right above the last one. “Fill” will be the same yellow color, no border.

Creating Icons in Adobe XD Tutorial34

Let’s create a little shadow. Select the last rectangle you created and copy and paste it on top of it (Cmd + C / Cmd + V). Drag the top border of the new rectangle downwards and set the fill color to black, opacity 20%.

Creating Icons in Adobe XD Tutorial35
Creating Icons in Adobe XD Tutorial36

Again, with the Rectangle Tool (R) create a little box to represent a checkbox. Set the border color to blue and size to 7. Leave the fill color white.

Creating Icons in Adobe XD Tutorial37

Now, draw some lines near the box to represent text lines. Set the fill color to blue and uncheck border color.

Grab the Pen (P) and draw a little V inside the checkbox.

Creating Icons in Adobe XD Tutorial38

Set the border width of the checkmark to 8 and select the green from our palette to color it.

Creating Icons in Adobe XD Tutorial39

When you create something with the Pen tool, you can always go back and modify. Just double click on the V shape and you will see little circles showing up. Drag and drop them to modify your shape.

Creating Icons in Adobe XD Tutorial40

After that, select both the checkbox and the lines on the right (holding down Shift while clicking) and group them. Then, go on the Appearance Panel and click on Repeat Grid button. Drag and drop the handle group down and you’ll get your group repeated. Let’s repeat it three times.

Creating Icons in Adobe XD Tutorial41

Now, create a circle. Click on Ellipse (E) and, holding down Shift + Alt to contain proportions, click and drag to create a circle. Set its dimensions to 512×512 px.

Creating Icons in Adobe XD Tutorial42

Select the circle and set its color to our red tone using the “Fill” eyedropper.

Creating Icons in Adobe XD Tutorial43

Select the circle again and move it behind the clipboard through Object → Arrange → Send to Back.

Creating Icons in Adobe XD Tutorial44

Once again, select the circle and hit Cmd + C / Cmd + V to copy and paste it. You will now see the circle on the top.

Creating Icons in Adobe XD Tutorial45

Select all objects and go to Object → Mask with Shape. Your icon will be masked with the circle. Uncheck the grid to see the result.

Icon Nr. 2: Coffee & Cookies Link

On our second artboard, let’s create a yellow ellipse just like you’ve seen it in the previous step.

Then click again on Ellipse (E) and create a white circle positioned half in the yellow circle, half out of it.

Creating Icons in Adobe XD Tutorial46

With the white circle selected, hit Cmd + C / Cmd + V to copy and paste to the front. Press Shift + Alt and drag it inwards to create a smaller circle. Set “Fill” to the brown color from our palette.

Creating Icons in Adobe XD Tutorial47

Select the brown circle and copy and paste it twice to create two more circles on top of each other. Position the top one as shown in the image below. Then select both shapes and click on “Subtract“.

Creating Icons in Adobe XD Tutorial48

Click on the new shape (a half moon) and set its fill color to black by double-clicking on “Fill”.

Creating Icons in Adobe XD Tutorial49

Now, set its opacity to 50%.

Creating Icons in Adobe XD Tutorial50

Again, create another circle with the Ellipse (E) Tool, this one smaller than the other. Then create two small white circles on the edge of that.

Creating Icons in Adobe XD Tutorial51

With all three circles selected, hit “Subtract“. The result is a bitten cookie.

Creating Icons in Adobe XD Tutorial52

Draw some little brown circles onto the cookie to simulate chocolate chips.

Select the chocolate circles and the cookie and group them through Object → Group.

Make the coffee cup a little bigger and closer to the cookie.

Creating Icons in Adobe XD Tutorial53

Select the yellow circle in the background and hit Cmd+ C / Cmd + V, then select everything and mask through Object → Mask with shape.

Here the result:

Creating Icons in Adobe XD Tutorial54

Icon Nr. 3: Drawers Link

On to the third artboard.

Select the Rectangle tool and draw a rectangle. Press Cmd + D to duplicate it and move the duplicate to the right. Set the fill of both to yellow.

Creating Icons in Adobe XD Tutorial55

Double-click on the rectangle on the left, then select its top right angle point and drag it downwards. Do the same with the top left angle point of the rectangle on the right. The result should look like this:

Creating Icons in Adobe XD Tutorial56

Now, grab the Pen (P) and draw a rhombus on the top. It will become the top surface of our file cabinet.

Creating Icons in Adobe XD Tutorial57

Set the fill color to yellow, then double click on fill color to move the brightness handle a little to the right:

Creating Icons in Adobe XD Tutorial

This is the result:

Creating Icons in Adobe XD Tutorial58

Select the right rectangle and change its fill color as I showed you in the previous step.

Creating Icons in Adobe XD Tutorial59

Select both rectangles and hit Cmd + D to duplicate them. Drag the two duplicated rectangles to the left and resize them as shown below:

Creating Icons in Adobe XD Tutorial60

Double-click on the rectangles and move their bottom left and bottom right points upwards.

Creating Icons in Adobe XD Tutorial61

Resize them and create a rhombus on the top with the Pen (P).

Creating Icons in Adobe XD Tutorial62

Grab the Pen (P) again and draw a sheet coming out from the drawer. Fill it with white.

Creating Icons in Adobe XD Tutorial63

Now, click on the Line (L) Tool and draw a line for the drawer handle:

Creating Icons in Adobe XD Tutorial64

Set its border width to 6 and its color to gray.

Creating Icons in Adobe XD Tutorial65

With the line selected, add a shadow as shown below.

Creating Icons in Adobe XD Tutorial66

Create a circle with the Ellipse (E) Tool, fill it with the green from our palette and position it in the background with Object → Arrange → Send to back.

Select the green circle, copy and paste it to the front, then select everything and go to Object → Mask with Shape.

Creating Icons in Adobe XD Tutorial67

Icon Nr. 4: Office Plant Link

Let’s continue with our fourth artboard.

Grab the Ellipse (E) Tool and create two shapes like I did. Use the eyedropper to set the fill color of the circle to the blue and the ellipse to the red of our palette.

Creating Icons in Adobe XD Tutorial68

Hit Cmd + D to duplicate the red shape and move it downwards:

Creating Icons in Adobe XD Tutorial69

Select the Pen (P) and draw a little triangle on the right to fill the empty space between the two ellipses, then set its fill color with the same red. Uncheck border option.

Creating Icons in Adobe XD Tutorial70
Creating Icons in Adobe XD Tutorial71

Repeat the same on the left side.

Creating Icons in Adobe XD Tutorial72

Now, select all your red shapes and click on “Add” to unify them.

Creating Icons in Adobe XD Tutorial73
Creating Icons in Adobe XD Tutorial74

Grab the Ellipse (E) Tool again and draw another ellipse like the one in the image below.

Creating Icons in Adobe XD Tutorial75

Select both shapes and center them using “Align Horizontally“.

Creating Icons in Adobe XD Tutorial76

Select the ellipse we have just created and set its fill color to the same red as the bottom shape. Then double-click on “Fill” and set the red brightness handle a little to the right to make the red darker.

Creating Icons in Adobe XD Tutorial
Creating Icons in Adobe XD Tutorial77

Select the darker ellipse and hit Cmd + D twice to clone the shape twice. Move the top shape downwards.

Creating Icons in Adobe XD Tutorial78

Select the two ellipses on the top and click on “Intersect“.

Creating Icons in Adobe XD Tutorial79

Then select the shape you obtained and fill it with a darker red like I showed you in the previous step.

Creating Icons in Adobe XD Tutorial80

With the rectangle tool, draw the bottom part of the plant pot.

Creating Icons in Adobe XD Tutorial81

Now, copy both the rectangle and the ellipse shapes and move them next to your artboard so we can create another shape to do a shadow effect.

Creating Icons in Adobe XD Tutorial82

Keeping both shapes selected, click on “Intersect“, like in the previous step. The result will look like this:

Creating Icons in Adobe XD Tutorial83

Set a darker red as the fill color of the newly-created shape by double-clicking on its fill. Then move it to the flower pot:

Creating Icons in Adobe XD Tutorial84

Bring it behind the ellipse shape by clicking on Object → Arrange → Send Backward. This action is also possible using the context menu (via right click).

Creating Icons in Adobe XD Tutorial85

On to the last steps. Create a green rectangle like the one I show you here:

Creating Icons in Adobe XD Tutorial86

Take the Ellipse (E) Tool and draw a squashed, white ellipse.

Creating Icons in Adobe XD Tutorial87

Hit Cmd + D to duplicate it and set rotation to 90°.

Creating Icons in Adobe XD Tutorial88
Creating Icons in Adobe XD Tutorial89

Unify the shapes by clicking “Add“, then duplicate them with Cmd + D. Set rotation to 45°.

Creating Icons in Adobe XD Tutorial90

Unify the shapes by clicking on “Add” and set its color to gray by double clicking on “Fill”.

Creating Icons in Adobe XD Tutorial91

Holding down Shift and Alt, drag a handle inwards to make the shape smaller.

Creating Icons in Adobe XD Tutorial92

Now, draw a yellow circle in the center.

Creating Icons in Adobe XD Tutorial93

To create the leaves, draw a little green circle on the left.

Creating Icons in Adobe XD Tutorial94

Double-click on it and drag the top and bottom handles apart from each other.

Creating Icons in Adobe XD Tutorial95

Then double-click on the top and bottom points of the leaf to create a sharp angle.

Creating Icons in Adobe XD Tutorial96

Rotate the shape by 307°.

Creating Icons in Adobe XD Tutorial97

Hit Cmd + D to duplicate the shape and fill the duplicate with a darker green.

Creating Icons in Adobe XD Tutorial98

Click on the left handle point of the leaf and delete it.

Creating Icons in Adobe XD Tutorial99

Duplicate the leaf and move the copy to the right of the stem.

Creating Icons in Adobe XD Tutorial100

Select the blue circle and copy and paste it.

Creating Icons in Adobe XD Tutorial101

Select everything and click on Object → Mask with shape.

Creating Icons in Adobe XD Tutorial102

Ta-daa! Our icons are ready.

Export your Icons

After that, you will be able to export your icons to PNG and SVG. Click on File > Export. A popup window will let you choose the way to export your icons. You can choose to export for web, iPhone and Android. Additionally, you can decide in which format (PNG and SVG) and which dimensions (1x, 2x, 3x and more) to export them.

Creating Icons in Adobe XD Tutorial103

Creating a Prototype

This is the final step of this tutorial — and the best part of Adobe Experience. Click on the top label “Prototype”.

Creating Icons in Adobe XD Tutorial104

Prototype is the section where you can organize your presentation of the work. You can organize it in slides, interact with them, and record the interaction. In our case, we just need to do few things to present our icons. Let’s see how to do that.

You can share your presentation by sharing a link. Go on File > Share. Click on Create Link button of popup window, and click “Copy Link”:

Creating Icons in Adobe XD Tutorial105
Creating Icons in Adobe XD Tutorial106

Now, paste the URL in the browser and can click on the icon to traverse through all icons.

Drag to create other five squares.107

Conclusion Link

We now have created an icon set entirely in Adobe XD — something I usually do in Illustrator. I hope you enjoyed this tutorial and that it inspired you to take your first steps with this new tool.

You can download Adobe XD here108, download my my sample file109 and find more tutorials on the Adobe blog110, too.

Footnotes Link

  1. 1 http://adobe.ly/2auwzVj
  2. 2 https://www.smashingmagazine.com/2016/07/quick-ux-prototyping-with-adobe-xd-shortcuts-pdf-cheatsheet/#comments
  3. 3 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  4. 4 https://www.smashingmagazine.com/2016/08/prototyping-for-success/
  5. 5 #artboard
  6. 6 #grids
  7. 7 #creating-a-color-palette
  8. 8 #pen-tool
  9. 9 #icon-nr-1-clipboard
  10. 10 #creating-a-prototype
  11. 11 #export
  12. 12 #sharing
  13. 13 https://www.smashingmagazine.com/2015/10/freebie-office-business-icon-pack-ai-eps-psd-pdf-svg/
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-1.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-2.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-3.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-4.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-5.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/05/6-create-icons-adobe-xd-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-7.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-09-opt.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/color-palette-1.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/color-palette-2.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/06/color-palette-3.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-8.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-11-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-10.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-13-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-14-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-15-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-16-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-17-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-18-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-19-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-20-opt.jpg
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-21-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-22-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-23-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-24-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-25-opt.jpg
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-26-opt.jpg
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-25.png
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-26.png
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-29-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-30-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-31-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-32-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-33.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-34.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-35.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-36-opt.jpg
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-37-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-38-opt.jpg
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-39-opt.jpg
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-40-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-41-opt.jpg
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-42-opt.jpg
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-44-opt.jpg
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-45-opt.jpg
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/05/46-create-icons-adobe-xd-opt.png
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-47-opt.jpg
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-48-opt.jpg
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-49-opt.jpg
  64. 64 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-50-opt.jpg
  65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-51-opt.jpg
  66. 66 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-55.png
  67. 67 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-53-opt.jpg
  68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-54-opt.jpg
  69. 69 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-55-opt.jpg
  70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-56-opt.jpg
  71. 71 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-57-opt.jpg
  72. 72 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-58-opt.jpg
  73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/07/create-icons-adobe-xd-large-63.png
  74. 74 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-60-opt.jpg
  75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-61-opt.jpg
  76. 76 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-62-opt.jpg
  77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-64-opt.jpg
  78. 78 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-65-opt.jpg
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-66-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2016/05/67-create-icons-adobe-xd-opt.png
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-68-opt.jpg
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-69-opt.jpg
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-70-opt.jpg
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-71-opt.jpg
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-72-opt.jpg
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-73-opt.jpg
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-74-opt.jpg
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-75-opt.jpg
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-76-opt.jpg
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-77-opt.jpg
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-78-opt.jpg
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-79-opt.jpg
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-80-opt.jpg
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-81-opt.jpg
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-82-opt.jpg
  96. 96 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-83-opt.jpg
  97. 97 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-84-opt.jpg
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-85-opt.jpg
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-86-opt.jpg
  100. 100 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-87-opt.jpg
  101. 101 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-88-opt.jpg
  102. 102 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-89-opt.jpg
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2016/05/93A-create-icons-adobe-xd-opt.png
  104. 104 https://www.smashingmagazine.com/wp-content/uploads/2016/05/creating-icons-in-adobe-xd-90-opt.jpg
  105. 105 https://www.smashingmagazine.com/wp-content/uploads/2016/05/93C-create-icons-adobe-xd-opt.png
  106. 106 https://www.smashingmagazine.com/wp-content/uploads/2016/05/93D-create-icons-adobe-xd-opt.png
  107. 107 https://www.smashingmagazine.com/wp-content/uploads/2016/06/color-palette-4.png
  108. 108 http://adobe.ly/2auwzVj
  109. 109 http://provide.smashingmagazine.com/Adobe/Office-Icons.xd
  110. 110 http://adobe.ly/22Quu6Q

↑ Back to top Tweet itShare on Facebook

Manuela is a Digital Illustrator from Napoli, Italy. She started as a Web Designer 9 years ago, but then followed her primary passion: Adobe Illustrator. Drawing is her passion, Digital Drawing is her dream. She's writing at http://www.manuelalangella.com.

  1. 1

    Wonderful tutorial, looking forward to using XD once Adobe gets off their … and releases the Windows version.

    10
    • 2

      Amen Mike.

      It’s a huge slap in the face to us Windows users. In my few responses from them on this issue, they don’t seem to give much of a sh.. about Windows users.

      4
      • 3

        Andrew Shorten

        August 2, 2016 8:50 pm

        We’ve committed to delivering a release on Windows 10 later this year. Our team is actively working on it and want to craft a great experience for the Windows platform.

        Thanks,
        Andrew
        Director, Product Management, Adobe

        3
        • 4

          I’ve heard the same response from your guys on all of your social channels. You’re not addressing the problem. Can you tell me what percentage of your users are Windows based? #windowsusersarepeopletoo

          -2
    • 5

      Manuela Langella

      August 10, 2016 11:00 am

      Thank you Mike, I’m glad you like my tutorial! :)

      1
  2. 6

    Thanks for the article. Would be great to understand what motivated you to try this, and having done it, how XD compares to other, more obvious tools for this type of work, such as Sketch and Illustrator?

    7
    • 7

      Manuela Langella

      August 10, 2016 11:04 am

      Good question, Tom.
      For now I can tell you I wanted to try how a work like mine (I’m a digital Illustrator) could be done in XD. My idea was to understand how I could apply vector work through UI. Well, I can say it is very simple to use and you can spare time if you are a UI designer and you’d like to create quick things like icons direct in one tool, without opening other apps.
      Adobe Experience will have new releases in the future, so I think we will be able to create really more than now.

      1
  3. 8

    Thanks for the article.
    once again I am completely confused about the strategy of Adobe. Why should I use this software? why paying for something that already is covered by Fireworks or Illustrator?
    Let me guess…the new bundles will exclude Illustrator and offer this instead so in the end, you need to buy the bigger bundle…naaah Adobe won’t do that.

    -1
  4. 10

    Nice job, but why on earth would you do this? It makes just as much sense as it would to build wireframes in Powerpoint (which I have seen people actually do!). Adobe XD still doesn’t even have something as basic as layers or even gradients. Still far far away from becoming a serious alternative to Sketch+InVision…

    -2
  5. 12

    So Adobe is recreating Sketch?

    0
  6. 13

    I’m actively working in Xd and am loving it. It’s so easy to use and is fantastic for mobile and tablet apps and creating prototypes and movies. Am hoping for a Zeplin plugin too, which will bridge the gap between designer and developers.

    2
  7. 14

    Nice Tutorial, but most of this doesn’t really highlight how XD is a better tool than sketch.

    2
  8. 15

    I’m totally okay with Adobe remaking Sketch. I use Sketch and it’s fun, but some things are just way too buggy and unpolished. Like holding shift and option while trying to scale an image = a nightmare because it doesn’t even hold the same proportions sometimes.

    Yes Adobe. Please make a better version of Sketch. And then Sketch might become better as well. Healthy competition so that basically I win all the time. Bwahhaa.

    1
  9. 16

    Great job! I use it for a school project

    1

↑ Back to top