Design at the speed of thought
craft your first design in Adobe XD
What you’ll learn in this video
Welcome to Adobe XD! In this first video, you’ll learn how to create a new document,
block out your first design, and use features like repeat grids to speed up your workflow.
Work faster with Repeat grids
Whether you’re designing photo galleries, contact lists,
or other repeated elements, utilize repeat grids to speed
up your workflows.
Import your existing Photoshop files
Many designers are still using Photoshop for UI & UX design – and that's totally okay – but if you're looking to improve your workflows using Adobe XD, here's how you can import your Photoshop files and use features like repeat grids, responsive resize, and more.
Get to know your assets panel
In this video, we’re going to take a look at how the Assets panel in Adobe XD can help you not only store elements for future use, but keep everything up to date, as well.
+ VIEW TRANSCRIPT
Hey, everyone, I’m Howard Pinsky – and welcome to Adobe XD! If you’re brand new to the application or simply need a refresher, this series will get you going. You’ll learn how to craft your first designs, wire up prototypes, and share your projects with clients and stakeholders. I’ll also dive deep into features that will change the way you tackle screen design – like repeat grids, responsive resize, auto-animate, and much more. Let’s design your first artboard.
When you first launch XD, you can immediately start designing using artboards for common screens, like phones, tablets, and web, or if you’re working on something very specific, you can enter a custom size to the right. We also have a built-in tutorial that guides you through various workflows that you can check out after this video. Let’s kick this off with an iPhone 6/7/8 Plus artboard.
On this screen, we’re going to design a few elements – including a header image, a profile photo, text, and a gallery.
Over to the left, I’m going to grab the Rectangle tool and draw one out across the the top of the artboard, and just so I can see it, I’ll change the color to the right. With the rectangle in place, there’s nothing further I need to do to turn it into a mask. All shapes, including custom ones created with the Pen, can house images.
Hopping into Finder, I have an image that I think would look great for the header. As I drag it into XD and overtop of a shape, it’ll highlight in blue to tell me that it can be placed within in it, and when I let go, it becomes masked. You know what? I think I might want to adjust it a touch. Double-clicking on the shape will let me move and scale the image and clicking outside will reapply the mask.
Now that the header is ready, let’s do the same for the profile picture, this time with an ellipse, making sure to hold down shift to create a perfect circle. Now, to ensure that it’s perfectly in the center of my artboard, I can either move it horizontally until my smart guides tell me that it’s in place, or I can hit the Align Center button at the top right. Back in Finder, I have this epic image of a bearded man which I’ll drag right onto the circle, then maybe to separate it from the header, I’ll add a white border on the outside of the shape with the size set somewhere around 6.
Great – with the header and profile looking snazzy, let’s add a name. I’ll quickly grab the Text tool by pressing T on my keyboard, then I can single-click to create point text, – and once I’ve accepted I can quickly change the size by pulling on the handle at the bottom, and adjust the properties to the right. I’ll go with a Demi Bold Avenir Next with the color set to an off-black.
Next, let’s work on a photo gallery at the bottom, focused on showcasing various destinations that this user has been to – which will contain images, text, and a few smaller elements.
Starting off with the image, a Rectangle, filling a little less than half the screen should do the trick. Next, the destination name can be added using a point text. I’ll go with my hometown for the placeholder and to keep consistency, make sure that I’m using Avenir Next.
Great – with the first card complete, the fun begins. In the past, creating and updating multiple copies of this card would be an absolutely nightmare. Each would have to be duplicated, then if changes needed to be made, they’d all have to be updated – one by one. Repeat Grids in XD changes everything. I’ll quickly select all objects that are part of this card by either dragging a selection around them, or by holding down shift and clicking on each element. Once selected, I’m going to hit the Repeat Grid button over to the right, and you’ll notice that two new handles appear – one to the right, and one below. This lets me pull out additional cards either horizontally, vertically, or both, and once I have a few more, hovering my cursor in-between any of them will reveal its padding which can then be pulled in or out to adjust spacing.
Cool, right? It gets better. With a few cards extending down the screen, we now need some images, which I have over in Finder. I could drag one image at a time into each rectangle, but no one’s about that life. With all of them selected, I’ll drag them onto any card, and when I drop them, they’ll populate the entire grid – whether I have 1 card, 4, or hundreds.
Now you may have noticed there was also a text file containing a few destinations. What could that possibly be for? Well just like with images, plain text documents can be used to populate text layers. Dragging it onto any of them will add in our destinations, and if need be, I can hop in and override any of the text layers to correct any mistakes.
To finish off our grid, let’s make a few changes. I think I may want the text layer on top of the image instead of below it, and I’ll also change the color to white. You’re probably noticing that as these changes are being made, they’re not only updating the first card, but on all of them. Now I’ll make a few tweaks to the layout to get it looking just right.
Finally, Adding elements to a grid is just as easy. I may want to add in a bookmark icon to allow users to quickly save any of these shots. I actually have an icon in one of my Creative Cloud library that might work for this. Once I drag it onto my document, I have two options. I can leave it linked so that I can edit it back in Illustrator, or I can unlink it so I can may any edits directly in XD. As you’ve likely noticed, when you add an element to one of your repeat grid entries, it adds it to them all.
And just like that, you’ve kicked off your first design in Adobe XD – but this is only the tip of the iceberg. Next up, you’ll learn how to breathe life into your designs using various prototyping techniques.