Creating New Files & Designing on a Grid

Topics covered in this Adobe XD tutorial:

Creating a new file, Setting up artboards, Importing text, Creating colored backgrounds for text

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to create new files as well as how to design on a grid (such as the popular Bootstrap. You’ll create a basic 2-column layout for desktops, which you’ll adapt for smaller screens in the following exercise.

Creating a Blank New File

1. Launch Adobe XD.

   NOTE: This book has been tested with Adobe XD version 49.0.12.14. If you’re using a different version, most things should still work the same or similarly. To see what’s new in XD, visit tinyurl.com/axdnew

2. You should see the welcome screen that shows options for a phone, tablet, desktop, and custom size. If you don’t see it, go into the File > New or press Cmd–N (Mac) or Ctrl–N (Windows).

3. As shown below, click on the icon for Web 1920 (or whatever your Web size is).

   

   NOTE: You can click on the Web 1920 menu to change its default size.

4. At the top left of the artboard, double–click on Web 1920 – 1 and change the name to Desktop.
5. Hit Return (Mac) or Enter (Windows) to apply the name change.
6. Make sure the artboard is still selected (outlined in a blue bounding box). If it isn’t, click on the artboard’s name (Desktop) to select it.

7. The panel on the right is called the Property Inspector. In it change the width (W) to 1280 and hit Return (Mac) or Enter (Windows) to apply.

   NOTE: All measurements in XD are in pixels, which is what we use in web and UI design. 1280 pixels is a common width for small desktops.

8. Deselect the artboard by clicking on the gray area outside the artboard.
9. Let’s add an artboard. In the Toolbar on the left, select the Artboard tool .
10. In the Property Inspector on the right, under the second section (Tablet) click on iPad, Nexus 9 and a new artboard should appear to the right of the Desktop artboard.

11. Let’s insert one more artboard. Because the iPad artboard is still selected you’ll see the options for it at the top of the Inspector, but below that we still have the list of presets to insert new ones. Click on iPhone 6, 7, 8, SE (you may need to scroll down in the Property Inspector to see it).

    TIP: To duplicate an artboard, hold Option (Mac) or Alt (Windows) while dragging the artboard’s name (at the top left).

12. In the Toolbar on the left, choose the Select tool .

Navigating Around a File

1. In the Toolbar on the left, choose the Select tool .
2. Zoom in by holding Cmd (Mac) or Ctrl (Windows) and pressing the Plus(+) key a couple times.
3. Zoom out by holding Cmd (Mac) or Ctrl (Windows) and pressing the Minus(–) key a couple times.
4. Hold the Spacebar (the cursor will change to a hand icon ) and drag anywhere in the canvas to scroll around.
5. To open the Layers panel, go to the bottom left of the window and click the  icon. (If the Layers panel was already open, that button will close it, so click it again to open it.)
6. In the Layers panel (that opens on the left), you should see a list of Artboards.

7. XD lets us quickly navigate between artboards in this panel. Double–click on the artboard icon to the left of iPhone 6, 7, 8, SE – 1 (as shown below) to go that artboard and zoom to fill your screen! Do not double–click on the name, because that is how you would rename the artboard.

   

8. The Layers panel would now show us the layers inside this artboard, but we don’t have any yet. To go back to the list of artboards, at the top of the Layers panel click the arrow to the left of iPhone 6, 7, 8, SE – 1.

Designing on a Grid

Designers often use grids to align elements and create a consistent visual structure for the layout. Web developers can use a grid system to code the website. While grids are not required, they are especially helpful when designing responsive sites (sites that are optimized for phones, tablets, and desktops). Grids can streamline the workflow so the design is easier to create, and then easier to code.

Grid systems typically used by web developers have specific gutter amounts and column widths for specific screen sizes. If the developer you’ll be working with is using a particular grid system, it’s best to use a matching grid. For our design we want to use the popular 12-column Bootstrap grid. If you want to learn more about Bootstrap and its grid, visit getbootstrap.com/docs/4.5/layout/grid

1. The Layers panel, double–click on the artboard icon to the left of Desktop go to that artboard and zoom to fill your screen.
2. In the Property Inspector on the right, under Grid check it on and make sure the menu is set to Layout.
3. Below that, Columns should already be set to 12.
4. Set Gutter Width to 30 and hit Return (Mac) or Enter (Windows) to apply it.

5. Notice the space between columns has changed.

   To save you time we’ve created a Bootstrap grid template you can use, so you won’t have to measure out all the layouts grids (and add some guides that XD’s layout grid does not make).

6. Go to File > Open from Your Computer or hit Cmd–Shift–O (Mac) or Ctrl–Shift–O (Windows).
7. Navigate into Desktop > Class Files > Adobe XD Class.
8. Double–click on Bootstrap 4 Grid Template.xd to open it.

9. Do a File > Save As Local Document.

   NOTE: File > Save As will only save Adobe XD documents into your Adobe Creative Cloud online storage.

10. This page will be about NYC, so let’s put it into the appropriate folder. Navigate to Desktop > Class Files > Adobe XD Class > NYC.

11. Name the file About Page.xd and click Save.

    If you see a message about Continue saving to your computer? click Continue.

12. Notice there are artboards with aqua blue columns for a layout grid sized to match Bootstrap’s specs for phone, tablet, and desktop.

    Dan Rodney, a Noble Desktop instructor, created this Bootstrap grid. The template and future updates are available at danrodney.com/blog/adobe-xd-bootstrap4-grid For more info about Bootstrap’s different grid sizes, see the sidebar at the end of the exercise.

13. In the Layers panel on the left, you should see a list of the three artboards.

14. Double–click on the artboard icon to the left of Desktop to make the Desktop artboard fill the screen.

Adding Text

1. We need to create a heading at the top left of the page. In the Toolbar, choose the Text tool .
2. Click anywhere on the artboard to create some text. Don’t worry about being exact, we’ll position it in a moment.
3. Type New York City
4. Press Esc to select the text box.
5. There’s a circle resize handle on the bottom. Drag that circle down to make the text bigger (and notice the type size in the Property Inspector changes as you drag).

6. With the text selected, in the Property Inspector set the following (including the circled options):

   

7. In the Toolbar on the left, choose the Select tool .

8. As shown below, drag it into position so the left edge aligns with the first solid aqua column. It won’t snap to the column, but you can line it up visually.

   

Importing & Styling Text

We want to make two columns of text (a main column and a sidebar). We’ve saved each column’s text as a plain text file (.txt) so you can import it directly into XD.

1. Go to File > Import.
2. Navigate to Desktop > Class Files > Adobe XD Class > NYC.
3. We want to import two text files. Click once on Text - main.txt to select it.
4. Hold Shift and click on Text - sidebar.txt so both files are selected.
5. Click Import.

6. Two text boxes will be created in the middle of the artboard. With both text boxes selected, in the Property Inspector set the following (including the circled options):

   

7. Click in an empty area of the canvas or artboard to deselect the text.

   NOTE: Line Spacing is the same thing as line-height in CSS (or leading in print design).

   TIP: To get the default line spacing , type 0 and hit Return (Mac) or Enter (Windows).

8. As shown below, drag the Unlike Any Other City text box into position under the New York City heading.

   

9. As shown below, resize the width of the text box so it spans 8 of the solid aqua columns.

   

10. Now for the sidebar. Drag the Popular New York Attractions… text box so it vertically aligns with the top of the text in the main column (a smart guide should appear to help you align it) and aligns with the aqua column to the right of the main column.

    

11. Resize the width of the sidebar box so it spans the remaining 4 aqua columns:

    

12. Click on a blank area of the artboard (not the canvas outside) to deselect.
13. Let’s see how the layout looks without the layout grid choose View > Hide Layout Grid, or hit Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows).
14. Choose View > Guides > Hide All Guides or hit Cmd–; (Mac) or Ctrl–; (Windows).

15. To see the design at the size it will be in a web browser choose View > 100%.

Changing the Artboard Background Color

Let’s change the background color for all of the artboards.

1. To zoom in/out so you can see everything, choose View > Zoom to Fit All.
2. Click on a blank area of the canvas to make sure nothing is selected.
3. In the Layers panel on the left, click once on the Phone artboard to select it.
4. In the Layers panel, Shift–click on the Desktop artboard to select all three artboards.
5. In the Property Inspector on the right, click on Fill to open the color picker.
6. Set Hex to 77aadd and hit Return (Mac) or Enter (Windows) to apply it.
7. The artboard should become blue. To close the color picker, press Esc or click anywhere outside it.
8. If the artboards are selected, click on a blank area of the canvas to deselect them.
9. In the Layers panel, click once on Desktop to select it.
10. To zoom in/out to the selection, do the following choose View > Zoom to Selection.
11. We’ll be adding colored backgrounds behind the columns of text, but not the page heading so let’s lighten it. Click on the NEW YORK CITY text to select it.
12. In the Property Inspector, click on Fill to open the color picker.
13. Choose white and hit Esc to close the pop-up.

Adding Colored Backgrounds for the Columns

Text and image content typically align with the aqua columns. Backgrounds (such as colors, borders, etc.) typically align with the midpoint between the columns (marked by lines in our template). The gutters (empty space between the grid’s 12 columns) are 30 pixels, so there’s 15px from the aqua content column to the gutter midpoint line. This provides some padding around the content of each column.

1. Hit Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows) to show the layout grid.
2. Choose View > Guides > Show All Guides or hit Cmd–; (Mac) or Ctrl–; (Windows).
3. In the Toolbar, select the Rectangle tool .

4. As shown below, draw a rectangle over the four columns of sidebar text. Be sure to line it up with the gutter divider guide (not the solid aqua columns).

   

5. In the Property Inspector, uncheck Border.
6. In the Property Inspector, reduce Opacity  to 50%.
7. In the Layers panel, double–click on Rectangle 1 and rename it to sidebar bg.
8. In the Layers panel, drag the sidebar bg layer below the Popular New York Attractions… layer.
9. In the Toolbar, choose the Select tool .
10. The gray text is a bit hard to read. On the artboard, click on the sidebar text to select it.
11. Hold Shift and click on the main column text so both text columns are selected.
12. In the Property Inspector, click on Fill to open the color picker.
13. Choose black and hit Esc to close the pop-up.
14. In the Toolbar, select the Rectangle tool .

15. As shown below, draw a rectangle over the main text column. Be sure to line it up with the gutter divider guide (not the solid aqua columns).

    

16. In the Property Inspector, uncheck Border.
17. In the Layers panel, double–click on Rectangle 1 and rename it to main column bg.
18. In the Layers panel, drag main column bg below the Unlike Any Other City… layer.
19. Hit Cmd–Shift–' (Mac) or Ctrl–Shift–' (Windows) to hide the layout grid.
20. Choose View > Guides > Hide All Guides or hit Cmd–; (Mac) or Ctrl–; (Windows).

21. That’s it for now. Save the file and close it.

    NOTE: Keep in mind that when designing on Bootstrap’s grid, your design will be easier to code when you stick to the grid. You can break off the grid and do something custom, but that will require custom coding by a developer. Don’t feel restricted by the grid. Use it when you can, and break from it if needed.

Optional Bonus

If you want to practice adapting content for the various screen sizes, you can do Exercise B1: Adjusting the Layout for Tablets & Mobile Phones in the back of this book.