Adobe XD Design Blog 1

 

 If you’re a regular blog reader, you already know how much I love and use Adobe XD when I’m designing my website mockups. Now, I’m going to be giving you an engaging look at the design and prototyping software so you can see how truly awesome it is. Adobe XD is available for free download on both MAC and PC computers. Be sure to visit my blog, to read the article for this tutorial. Now, let’s get started. Simply put, Adobe Experience Design is a vector design software used for prototyping and designing apps and websites. So, if you’re a UX designer or web designer, this is the app for you. Adobe XD is now my go-to software for when I’m designing for the web. By the time you’re done watching and following this introductory tutorial to XD, it might become your go-to design app too! When you first open Adobe XD, you’ll be presented with the program’s welcome screen. On this screen, you’ll notice that there are several ways that you can open up a new document. You can either open up a custom sized artboard, open a recent document, or use a predefined artboard size. In this case, the predefined artboard sizes are for an iPhone, iPad, or a standard web browser. You can also open User Interface Kits (UI Kits), based on Apple, Google, and Microsoft. For this tutorial, let’s open the “iPad” artboard size. The Adobe XD interface is very minimalistic.

There’s nothing overwhelming or confusing about it. That’s why I like it. The left-hand side of the interface is the toolbar. This is what’s included in the toolbar: The select tool, shape tools (square, circle, lines), pen tool, text tool, Artboard, Zoom tool. The very bottom of the toolbar has the symbol library and the layers panel. The right-hand side of the program contains the appearance panel where you can align objects, use several tools similar to Adobe Illustrator’s pathfinder, resize objects, set opacity, and more. Now, let’s try out some tools to get more acquainted with designing in Adobe XD. First, let’s type a title for our artboard. I’m just going to type “Artboard #1” but feel free to get more creative. I also want to change the font family, so I’m just going to head on over to the right-hand side panel and in the text panel, I’m going to select “Source Sans Pro”. Right now, the default font size is also kind of small, I want to increase the font size. You can either select the object and drag to resize it, or go to the Appearance panel and make more precise resizing adjustments. So those are the basics of the type tool, let’s try out the shape tool.

First, select the circle shape tool and hold the shift key while drawing it on the artboard. This will constrain its proportions so that you can draw a perfectly proportional circle. Now, let’s add some color to the circle—I’ll be using a nice teal color (#68E2E2). So now that we’ve drawn our circle, let’s do something really cool with it using a great feature in Adobe XD. By hitting command + R or selecting the “repeat grid” button in the appearance panel, you’ll be able to make duplicates of any object. Just drag out the green tabs on the right or bottom of the object and watch the magic happen. Symbols are objects that you intend to use multiple times on your artboard. To create a symbol, open the symbol library (located at the bottom of the toolbar), select an object on the canvas and click the “+” icon. To remove a symbol, simply right-click on the symbol and remove it. Any changes you make to symbols will be changed in real-time on the canvas.

The layers panel is pretty straight forward. But the cool thing about it is that it automatically changes to suit the artboard that's selected. Another great feature in Adobe XD is the prototype workspace. The “design” workspace is the default workspace in Adobe XD. To get to the “prototype” workspace, just select the link located on the top left-hand side. In this workspace, you’re able to connect your artboards to make them interactive, like you’re navigating an app or website. Here’s how you can make your designs interactive—first, select the first artboard that we created (the teal circles) and connect it to a second artboard by drawing wires between each artboard. You’ll then be able to select the transition effect and speed of the transition. To preview, click the play button at the right-hand top menu bar. Sharing your designs with your team or your clients online is now easier than ever before. By clicking the “Share Online” button on the top-right menu bar, you’ll be able to generate a unique link address that you can share. You can even embed your design onto your website or blog. Conclusion I hope you enjoyed this tour of Adobe XD and learned some of the basics this application has to offer. Give this article a big thumbs up if you liked it.