

We need another three artboards identical to the one we already created. 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.ĭouble-click on the artboard name on top of your artboard and name it “Icon-01”. Since we’ll begin with our icon set, we will create a custom artboard first.Ĭlick and drag to create a 512×512 px artboard. Once clicked, you’ll see some UI settings showing in the Property Inspector on the right. In the new window, click on the Artboard Tool (A) in the toolbar on the left. Open Adobe Experience Design, and you’ll see this: First, we’ll create the icons, then we’ll create a simple app user interface with them.

So without a further ado, let’s get started!įirst off, we are going to create a new office icon set, taking some examples from my previous icon set which was published as a freebie here on Smashing Magazine.
#Adobe xd logo how to#
We’ll take a look at how to create a set of office icons for a new app. In this tutorial, I want to guide you through the steps it took so you can follow along. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.Īs an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface.
#Adobe xd logo for mac#
XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps.
