In Step 2 let's add some content to the design from outside the application. To locate the assets for this step you'll want to look in the folder you downloaded at the start of this tutorial. You can find a link to the file in the description area below this video. Go ahead and locate the QuickStart assets folder on your system. I'm going to open it up so I have it available to me alongside the XD application.
Okay now that I have my assets available, I'm going to switch back into the tutorial file and notice here that I have an artboard called "Browse 01" and on it there are a number of design elements. If I want to take a look at the structure of the elements on the artboard, I can do so by looking in the Layers panel. To open up the Layers panel, I want to come to the lower left-hand corner of the app. Just above the plugins icon is the Layers panel icon. I'll go ahead and click on that which opens up the Layers panel. What you'll notice is by default it's showing me all of the artboards that are on the design canvas. If I want to see the structure of my "Browse 01" artboard I could come up and just click on the icon here towards the left. Alternatively I can come on the design canvas and just click on any object that happens to be on that artboard. XD is going to tunnel me into the structure of that artboard the "Browser 01" artboard, and if I wanted to I could go back out to the root level by clicking on the back arrow here to the left-hand side.
I want to go ahead and navigate my content so I can come and click on each of the elements here in the Layers panel. Notice there's a folder icon on the left. This indicates a group of objects, so if I click on it I have the header group I can see inside that group I have the back arrow icon, the close icon, the words "Browse Plants" and then there's a background rectangle on which all of the header content sits. Below that is another group of objects called the "Monstera group". I want to click on that. That contains within it some text that says "Monstera", and the orange ellipse above it.
What I want to do next is repeat those two elements down the screen. Now, of course, I can manually go in and duplicate it, but that's kind of so instead I'm going to take advantage of a really nice feature for on-boarding content called "Repeat grid". To apply the repeat grid feature I want to make sure I still have that group of objects selected in the Layers panel.
Next I'll come over to the panel here on the right-hand side -- this is known as the Properties Inspector. In the Properties Inspector I want to click on the Repeat Grid button here on the left-hand side. Notice that my group of objects now have a green highlight, and they have a handle both on the right-hand side and the bottom side. From here I can press and drag the handle to repeat the content either off in a horizontal direction -- which I don't really want to do for this design so I'll go ahead and drag that back in -- or in a vertical direction which I do want to do. So I'm going to press and drag that lower handle until I get to the bottom of my artboard.
When I release my mouse and then hover back over the repeat grid, notice that I have little pink areas. These indicate the amount of space between the repeating elements. I want to come in and reduce that just a little bit so I'll go ahead and press and drag up just to tighten up the images ever so slightly, and I can come back down now and have that lower image just a little closer to the bottom of the artboard. And with that all set I'm ready to start adding some images.
I'll switch back over to the Finder where I have the Quick Start assets folder, and I'm going to move them here towards the left-hand side. Next what I want to do is come in and select hold the Shift key and just click 1, 2, and want to press and drag those images right on to the orange circle here on the design canvas. When I release the mouse button, notice that the images have been placed in each of the containers. If I want to adjust the placement of any of these images now I can just come in and double-click which takes me inside a mask and allows me to then come in and just move my images until I like the way that mask is being applied. I'll come in once again and adjust this image by double-clicking to get inside the mask I can then move the placed image inside and then just click off to then release and go back to the map level.
Because I like what I've done so far I want to go ahead and save my work. I can do that by pulling down on File and selecting Save or Save As, in this case. I'll go with Save As. From here I can save it to my local directory, or alternatively I can save it to the Creative Cloud as a cloud document. I'm going to go ahead and select Cloud document, and I'll change the name. I'm going to stick with "QuickStart demo file", but I'll remove the copy part of that name and then I'll just click Save.
The nice part about a cloud document is if I'm jumping from one machine to another -- let's say from home or at work -- the cloud document is going to be available to me wherever I go. When I log in with my Adobe ID, another advantage of a cloud document is if I'm collaborating with another designer I can share access to my source document so that they can become a co-editor and make changes to that source alongside me.
At this point the document is now saved to the Creative Cloud and I can continue working. In the the next step let's focus on how we can add some interactive content to our design.
A design is not complete without the content that makes it up. Thankfully, there are a number of ways to quickly and easily add content into your Adobe XD projects, whether you're adding images, or adding real copy. When using a repeat grid to make lists, galleries, or tables, adding content to them is as simple as drag and drop from your file browser. In this tutorial, learn how to add images to Adobe XD repeat grids by dragging images onto objects in the repeat grid - Adobe XD will automatically insert those images into the appropriate placeholders across the repeat grid, meaning you only need to import once. The same can be done with TXT files to populate text boxes for titles, paragraphs, and more. To manage how the text is displayed, using an Auto-Width text box will allow text wrap when you insert longer text into Adobe XD.