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 comprehensive exercise, you'll master the fundamentals of Adobe XD while learning industry-standard grid-based design principles. We'll walk through creating new files and designing with the widely-adopted Bootstrap grid system—a cornerstone of modern responsive web design. You'll build a clean 2-column desktop layout that serves as the foundation for mobile adaptation in subsequent exercises, giving you practical experience with the design-to-development workflow that defines today's digital projects.

Creating a Blank New File

1. Launch Adobe XD.

   NOTE: This book has been tested with Adobe XD version 49.0.12.14. While Adobe XD is no longer receiving major updates as of 2022, it remains a powerful tool for UI/UX design. If you're using a different version, most functionality should remain consistent. For the latest information about XD's status and alternatives, visit tinyurl.com/axdnew

2. You should see the welcome screen displaying preset options for phone, tablet, desktop, and custom dimensions. If the welcome screen doesn't appear, navigate to File > New or use the keyboard shortcut Cmd–N (Mac) or CTRL–N (Windows).

3. As shown below, click on the Web 1920 preset (or whatever your current Web size displays).

   

   NOTE: Click on the Web 1920 dropdown menu to customize its default dimensions if needed.

4. At the top left of the artboard, double-click on Web 1920 – 1 and rename it to Desktop.
5. Press Return (Mac) or Enter (Windows) to confirm the name change.
6. Ensure the artboard remains selected (indicated by a blue bounding box). If it's not selected, click on the artboard's name (Desktop) to select it.

7. In the Property Inspector panel on the right, change the width (W) to 1280 and press Return (Mac) or Enter (Windows) to apply the change.

   NOTE: All measurements in XD use pixels, the standard unit for web and UI design. A 1280-pixel width accommodates smaller desktop screens and laptop displays effectively.

8. Deselect the artboard by clicking on the gray canvas area outside the artboard.
9. Now we'll add additional artboards for our responsive design. In the left Toolbar, select the Artboard tool .
10. In the Property Inspector on the right, locate the Tablet section and click on iPad, Nexus 9. A new artboard will appear to the right of your Desktop artboard.

11. Let's complete our responsive trio with a mobile artboard. With the iPad artboard still selected, scroll down in the Property Inspector to find the mobile presets and click on iPhone 6,7, 8, SE.

    TIP: To quickly duplicate any artboard, hold Option (Mac) or ALT (Windows) while dragging the artboard's name (located at the top left of each artboard).

12. Return to the Select tool in the left Toolbar.

Navigating Around a File

Before diving into design work, let's master XD's navigation tools—these will save you significant time as your projects grow in complexity.

1. Ensure the Select tool is active in the left Toolbar.
2. Zoom in by holding Cmd (Mac) or CTRL (Windows) and pressing the Plus(+) key several times.
3. Zoom out by holding Cmd (Mac) or CTRL (Windows) and pressing the Minus(–) key several times.
4. Hold the Spacebar (notice the cursor changes to a hand icon ) and drag anywhere on the canvas to pan around your workspace.
5. To access the Layers panel, click the icon in the bottom left of the window. If the Layers panel is already open, this button will close it—click again to reopen.
6. The Layers panel displays a hierarchical list of all artboards in your project, providing an organized overview of your design structure.

7. XD offers efficient artboard navigation through this panel. Double-click on the artboard icon next to iPhone 6,7, 8, SE – 1 (as shown below) to instantly navigate to that artboard and zoom it to fill your screen. Avoid double-clicking the artboard name, which would activate rename mode.

   

8. The Layers panel now shows the contents of this specific artboard. Since we haven't added any design elements yet, it appears empty. To return to the master artboard list, click the back arrow next to iPhone 6,7, 8, SE – 1 at the top of the Layers panel.

Designing on a Grid

Professional designers rely on grid systems to create visually cohesive, mathematically precise layouts that translate seamlessly from design to code. Web developers use these same grid systems as the structural foundation for responsive websites. While grids aren't mandatory, they're essential for creating designs that work harmoniously across phones, tablets, and desktops—streamlining both the creative process and the development handoff.

The most widely adopted grid system in web development is Bootstrap's 12-column framework, which provides standardized gutter spacing and column widths optimized for different screen sizes. When your development team uses Bootstrap (or similar frameworks), designing with matching grid specifications eliminates guesswork and ensures pixel-perfect implementation. For comprehensive documentation on Bootstrap's grid system, visit getbootstrap.com/docs/4.5/layout/grid

1. In the Layers panel, double-click on the artboard icon next to Desktop to navigate to that artboard and zoom it to fill your screen.
2. In the Property Inspector on the right, locate the Grid section, check it to enable, and ensure the dropdown menu is set to Layout.
3. Verify that Columns is set to 12 (the Bootstrap standard).
4. Set Gutter Width to 30 and press Return (Mac) or Enter (Windows) to apply this industry-standard spacing.

5. Observe how the column spacing adjusts to match professional grid specifications.

   To accelerate your workflow, we've prepared a comprehensive Bootstrap grid template that includes precise measurements and additional guides that XD's standard layout grid doesn't provide—saving you valuable setup time on every project.

6. Navigate to File > Open from Your Computer or use the shortcut Cmd–Shift–O (Mac) or CTRL–Shift–O (Windows).
7. Browse to Desktop > Class Files > Adobe XD Class.
8. Double-click on Bootstrap 4 Grid Template.xd to open the template file.

9. Choose File > Save As Local Document to create a working copy.

   NOTE: File > Save As saves documents to Adobe Creative Cloud's online storage, while Save As Local Document keeps files on your computer for offline access.

10. Since this exercise focuses on creating a NYC-themed page, navigate to Desktop > Class Files > Adobe XD Class > NYC to maintain organized project files.

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

    If prompted with Continue saving to your computer? click Continue to proceed.

12. You'll now see three artboards featuring aqua blue columns that precisely match Bootstrap's specifications for phone, tablet, and desktop breakpoints.

    This Bootstrap grid template was created by Dan Rodney, a Noble Desktop instructor with extensive industry experience. Access the template and future updates at danrodney.com/blog/adobe-xd-bootstrap4-grid. For detailed information about Bootstrap's responsive breakpoints, refer to the sidebar at the end of this exercise.

13. The Layers panel displays all three artboards in your project hierarchy.

14. Double-click on the artboard icon next to Desktop to focus on the desktop layout and fill your screen with this artboard.

Adding Text

Now we'll begin building our page content, starting with a prominent heading that establishes visual hierarchy and guides the user's attention.

1. We'll create a primary heading for the top-left area of our page. In the Toolbar, select the Text tool .
2. Click anywhere on the artboard to create a text element. Don't worry about precise placement—we'll position it properly in the next steps.
3. Type New York City
4. Press Esc to select the entire text box and exit text editing mode.
5. Locate the circular resize handle at the bottom of the text box. Drag this handle downward to increase the text size dynamically—notice how the font size value updates in real-time within the Property Inspector.

6. With the text selected, configure the following settings in the Property Inspector (including the circled options shown below):

   

7. Return to the Select tool in the Toolbar.

8. Position the heading by dragging it so the left edge aligns with the first solid aqua column. While XD won't automatically snap to the column, you can achieve precise visual alignment by eye.

   

Importing & Styling Text

Rather than typing extensive content manually, we'll import pre-written text files to build our two-column layout efficiently. This workflow mirrors real-world projects where content often comes from copywriters, clients, or content management systems.

1. Navigate to File > Import to access XD's import functionality.
2. Browse to Desktop > Class Files > Adobe XD Class > NYC.
3. We need to import both text files for our layout. Click once on Text—main.txt to select it.
4. Hold Shift and click on Text—sidebar.txt to select both files simultaneously.
5. Click Import to bring both text files into your design.

6. XD will create two text boxes in the center of your artboard. With both text boxes selected, apply the following typography settings in the Property Inspector (including the circled options shown below):

   

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

   NOTE: Line Spacing functions identically to line-height in CSS or leading in traditional print design, controlling the vertical space between lines of text.

   TIP: To reset line spacing to its default value, enter 0 in the line spacing field and press Return (Mac) or Enter (Windows).

8. Position the main content by dragging the Unlike Any Other City text box directly beneath the New York City heading, as shown below:

   

9. Resize the main column by dragging the text box width to span exactly 8 of the solid aqua columns, creating a spacious primary content area:

   

10. Position the sidebar by dragging the Popular New York Attractions… text box so it aligns vertically with the top of the main column text (XD's smart guides will appear to assist with precise alignment) and horizontally with the aqua column immediately to the right of the main content:

    

11. Complete the sidebar by resizing its width to span the remaining 4 aqua columns, creating a balanced two-column layout:

    

12. Click on a blank area of the artboard (not the external canvas) to deselect all elements.
13. To preview your layout without grid distractions, hide the layout grid by choosing View > Hide Layout Grid or using the shortcut Cmd–Shift–' (Mac) or CTRL–Shift–' (Windows).
14. Also hide the guidelines by choosing View > Guides > Hide All Guides or pressing Cmd–; (Mac) or CTRL–; (Windows).

15. To see your design at actual browser size, choose View > 100% for an accurate representation of how users will experience your layout.

Changing the Artboard Background Color

A thoughtfully chosen background color enhances readability and establishes visual cohesion across your responsive design. We'll apply a consistent background to all three artboards simultaneously.

1. To view all artboards simultaneously, choose View > Zoom to Fit All.
2. Click on a blank area of the canvas to ensure no elements are selected.
3. In the Layers panel on the left, click once on the Phone artboard to select it.
4. In the Layers panel, hold Shift and click on the Desktop artboard to select all three artboards simultaneously.
5. In the Property Inspector on the right, click on Fill to open the color picker interface.
6. Set the Hex value to 77aadd and press Return (Mac) or Enter (Windows) to apply this professional blue tone.
7. All three artboards should now display the blue background. Close the color picker by pressing Esc or clicking anywhere outside the picker.
8. If artboards remain selected, click on a blank canvas area to deselect them.
9. In the Layers panel, click once on Desktop to focus on that artboard.
10. To zoom in on your selection, choose View > Zoom to Selection.
11. Since we'll be adding colored backgrounds behind our text columns, let's ensure the page heading remains prominent by lightening its color. Click on the NEW YORK CITY text to select it.
12. In the Property Inspector, click on Fill to access the color picker.
13. Choose white for optimal contrast against the blue background, then press Esc to close the color picker.

Adding Colored Backgrounds for the Columns

Professional layouts distinguish between content alignment and background element positioning. Text and images align with the column edges (aqua lines), while backgrounds extend to the gutter midpoints (marked by guides in our template). This creates appropriate padding around content while maintaining visual separation between columns. The 30-pixel gutters provide 15 pixels of breathing room on each side of the content.

1. Re-enable the layout grid by pressing Cmd–Shift–' (Mac) or CTRL–Shift–' (Windows).
2. Show all guides by choosing View > Guides > Show All Guides or pressing Cmd–; (Mac) or CTRL–; (Windows).
3. In the Toolbar, select the Rectangle tool .

4. Draw a rectangle over the four columns containing the sidebar text. Align it precisely with the gutter divider guides (the thin lines between columns) rather than the solid aqua column boundaries, as shown below:

   

5. In the Property Inspector, uncheck Border to remove the default stroke.
6. In the Property Inspector, reduce Opacity to 50% to create a subtle background that doesn't overpower the text.
7. In the Layers panel, double-click on Rectangle 1 and rename it to sidebar bg for better project organization.
8. In the Layers panel, drag the sidebar bg layer below the Popular New York Attractions… text layer to ensure proper layering hierarchy.
9. Return to the Select tool in the Toolbar.
10. To improve text readability, we need to adjust the sidebar text color. Click on the sidebar text on the artboard to select it.