Work with artboards and grids

Learn how to lay out user interfaces effectively and precisely. Use the grids and guides to speed up design and boost design accuracy.

Artboards typically represent each of the screens that you want to design as part of your mobile app or website.

You can have many artboards in a single Adobe XD file. For example, you can choose to define artboards for mobile, tablet and desktop-based web experiences within a single file. Alternatively, you can also choose to design multiple screens of a user flow for a single platform in a file.

You can choose a preset size for the artboard at the beginning of your project from the Start screen. If you do not want to use the available presets, you can create an artboard with a custom size. Once your new file with the chosen artboard size is created, you can add as many artboards as you like using the Artboard tool.

To view all the artboards in your project, open the Layers panel (click  in the toolbar). 

Create artboards

While creating a project or a file for the first time, you can select the artboard size from one of the presets on the home screen. To specify a custom-size, select Custom and specify the size in pixels.

To add more artboards to an existing file, click the Artboard tool. Then, click one of the presets on the right panel and click the location where you want the artboard to be placed.

To define a custom sized artboard, select the artboard tool and draw the artboard you want directly on the pasteboard area.

Create scrollable artboards

When you create an XD design, sometimes an artboard is not long enough to fit your content. By making an artboard longer and choosing options based on your design needs, you can vertically scroll an artboard to accommodate different device sizes.

Vertical scrolling helps you simulate scroll effects when designing scrollable drop-down lists or websites, however, horizontal scrolling is not supported in XD.  For more information, see Create scrollable artboards.

Select artboards

To select an artboard, click the Selection tool and do one of the following actions:

• Click the artboard title, or 
• Double-click the artboard’s background

Copy and resize artboards

On Mac, hold down the Option key and drag an artboard to copy. On Windows, hold down the Alt key and drag an artboard.

Alternatively, right-click the artboard name in the Layers panel, select Copy. Then, right-click again and select Paste.

To resize an artboard, click the artboard and use the circular handles that appear on the edges.

Rearrange artboards

Click the artboard title and drag it to the new location. 

Note: You can drag the artboards in the Layers panel and change their order in the Artboards list. But, doing so only changes the stacking order of the artboards and does not change their position (X and Y coordinates).

Rename artboards

By default, the artboards are named based on the preset you select and are numbered sequentially. To specify a custom name for your artboards, double-click the artboard title and type the new name of the artboard.

You can also rename artboards in the Layers panel. Double-click or right-click the artboard title and select Rename. 

Align and distribute artboards

Marquee-select multiple artboards and click the Align and Distribute options in the Property Inspector

Copy and move elements between artboards

You can freely move any element on one artboard to another. Simply drag the element and drop it onto the desired artboard.

To copy an element, use Command + C (on Mac), or Ctrl + C (on Windows). Click the artboard in which you want to paste the element and click Command + V (on Mac), or Ctrl + V (on Windows).

You can also drag an element while holding the Option key (on Mac), or the Alt key (on Windows) to duplicate elements.

You can also use the Fixed Position to fix the position of elements such as headers and footers on a scrolling artboard, or floating fixed elements. The pin icon in the prototype mode indicates the fixed elements, and you can layer them above or below other design objects.

Note: If you have a collection of objects that do not fit the artboard when you paste them, they all paste to the center of the target artboard.

You can use the gray area around the artboards as the pasteboard. You can place any element in the pasteboard and copy or move them to the artboards when required. 

Note: When you export all artboards, elements in the pasteboard that are not part of any artboard are not exported. If an element is placed partially on an artboard, then, only the portion of the element on the artboard is exported.

Cut, copy, move, resize, zoom, and delete multiple artboards simultaneously

Marquee-select multiple artboards to edit them simultaneously. 

Use the Selection tool to drag a marquee around the artboards you want to select.

When selecting multiple artboards, make sure that you select the artboards completely. If an artboard is covered partially, the objects within the artboard are selected instead of the artboard itself.

A bounding box appears around the selected artboards. 

Resize

Drag the handles on the bounding box to resize the selected artboards.

Cut, copy, and paste

 Ctrl+Click (on Mac) or right-click (on Windows) to open the context menu that allows you to cut, copy, and paste all the selected artboards.

Delete

Press Delete on your keyboard, or use Ctrl + Click (on Mac) or right-click (on Windows) to open the menu to delete the selected artboards. Alternatively, you can select one or more artboards in the Layers panel, right-click, then choose Delete.

Zoom Enter Zoom mode by clicking the Zoom icon in the toolbar or pressing Z on your keyboard. Once in Zoom mode, you can:

• Zoom in: Click anywhere in the XD canvas, or click the required artboard. Or, marquee-select an area to zoom in.
• Zoom out: Option + Click (on Mac), or Alt + Click (on Windows).

To quickly zoom in or out without actually entering Zoom mode, you can temporarily activate Zoom mode:

• Zoom in: Press Space + Cmd (on Mac), or Space + Ctrl (on Windows), then click or marquee select an area on the artboard
• Zoom out: Press Space + Cmd + Opt

To zoom into specific objects on the artboard, select the objects, then select View > Zoom to Selection or ⌘ 3 on Mac. On Windows, use the Ctrl + 3 keyboard shortcut.

Work with Custom Artboard Guides

Custom artboard guides help you position and layout objects on canvas with precision, by easily snapping them to guides across multiple artboards. You can create guides, tweak their position, copy-paste guides across multiple artboards, remove them, lock or hide their visibility.

Create Guide: To create a vertical guide,  hover over the left border of the artboard, where a double-sided arrow appears. Drag-and-drop the arrow icon toward the artboard to create a guide, and release it to place the guide on the artboard. To create a horizontal guide, drag-and-drop the arrow icon from the top border of the artboard. While creating the guide, the distance between the guides and artboard edges, or other guides as well as the absolute guide position on the canvasis displayed.

During creation, guides snap to selected objects or top-level objects drawn on the canvas. To temporarily disable the snapping behavior, press Cmd (on Mac) or Ctrl (on Win).

Press Shift key during guide creation to position the guide in 10px increments on the canvas.

Copy-paste guides: To copy guides from an artboard, select the artboard, click View option from the top menu bar. Click Guides option from the drop-down list and select Copy Guides. All the guides from the selected artboard are copied.

To paste the guides, select an artboard you want the guides to be pasted on. Click Cmd+v (on Mac) or Ctrl+v (on Win) to paste the guides. Alternatively, click View option from the top menu bar (on Mac), or right-click on the artboard (on Win), select Guides option from the drop-down list and click Paste Guides.

Duplicating an artboard also duplicates the guides created on that artboard.

Clear Guides: To delete a guide, click and drag the guide out of the artboard. To delete all the guides on an artboard, select the artboard and click View option from the top menu bar (on Mac), or right-click on the artboard (on Win). Click Guides option from the drop-down list and select Clear Guides.

Hide Guides: The Hide All Guides option turns off the visibility of the guides across all the artboards and disables guide creation. Select the artboard and click Cmd+; (on Mac), and Ctrl+; (on Win) to hide the guides. Alternatively, you can click View option from the top menu bar (on Mac), or right-click on the artboard (on Win), select Guides option from the drop-down list and click Hide All Guides.    

Lock Guides: The Lock All Guides option lets you lock the guides across all the artboards. While the guides are locked, you can create guides and snap objects to guides, but you cannot change their position on the canvas. To lock the guides, press shift+Cmd+; (on Mac) and shift+Ctrl+; (on Win). Alternatively, you can click View option from the top menu bar (on Mac), or right-click on the artboard (on Win), select Guides option from the drop-down list and click Lock All Guides.

Position elements on artboards using grids

XD provides you two types of grid options: square grids and layout grids. 

Square grids

Square grids provide guides to which you can align objects and text. When you draw, objects snap to the grid automatically when the object’s edges are within the grid’s snap-to-zone.

Square grids also help you get a quick idea of measurement while laying out objects or text on your artboards.

Layout grids

You can use layout grids to define columns in XD. A layout grid helps you to define the underlying structure of your design and how each component in it responds to different breakpoints (for responsive designs).

After the layout grid is applied to an artboard, you can snap elements to it. However, if the artboard is resized or grid is adjusted, the pinned items do not resize or reflow.

Show or hide grids

Select an artboard and do one of the following:

• On Mac: Choose View > Show Layout Grid or View > Show Square Grid.
• On Mac or Windows: On the Property Inspector, select a grid type from the Grid drop-down list, and select the check box next to it.
• Keyboard shortcuts: 
  • Show Square Grid: 
    • On Mac – ⌘ ‘  
    • On Windows – Ctrl + ‘
  • Show Layout Grid:
    • On Mac – ⇧ ⌘ ‘
    • On Windows – Ctrl + Tab

Set square or layout grids in XD

To hide the grid, deselect the Grid check box.

Set square grid preferences

The square grid options allow you to change the spacing of a grid and change its color. You can save a set of grid options as default to use them quickly in future. For more information, see Default square or layout grid preferences.

Note:

XD uses a virtual pixel for most of its measurements and font sizes, which is the same unit of measure as a CSS pixel, or measurements in iOS. The virtual pixel is roughly equal to one physical pixel on a 72-dpi monitor. You cannot change the unit of measurement in XD currently.

CHANGE GRID SIZE

To change the size of the grid, edit the spacing value in the Property Inspector. The smaller the number, the denser the grid. 

SNAP OBJECTS TO A SQUARE GRID

To snap an object to a grid, drag an object towards a grid until one of the object’s edges is within the grid’s snap-to zone.

To avoid snapping to the grid, press the Cmd key (on Mac), or the Ctrl key (on Windows) while dragging the mouse and drawing an object.

Set layout grid preferences

When you enable a layout grid, XD intelligently displays columns that suit the nature of the artboard. So, for example, a phone artboard has fewer and narrower columns than the default layout grids for a tablet.

If you resize an artboard, the column widths in the layout grid change to fit the new artboard size. The objects on the artboard remain the same and do not maintain their relationship with the columns.

You can set your preferences for number of columns, width of columns, column color, gutter width, and margin sizes from the Property Inspector.

After you change the layout grid, you can make your changes the default, or you can revert to the default layout grid in XD. For more information, see Default square or layout grid preferences.

CHANGE COLUMN AND GUTTER PROPERTIES

You can change the layout column properties according to your needs.

To set the number of columns in a layout grid, edit the Column value in the Property Inspector. When you change the number of columns, XD automatically recalculates the width of the columns. 

The space between columns on an artboard is called the gutter width. Define the gutter width by editing the default Gutter Width value. 

To change the width of the columns, edit the default Column Width value.

CHANGE MARGINS

You can change the size of the margins while setting your layout grid. 

To adjust the left and right margins uniformly, click the Linked left/right margins icon and edit the value of the margin.

To adjust the margins for all four sides individually, click the different margins for each side icon, and then edit the values for each margin.

Change square or layout grid color

To change the color of a square or layout grid:

Step 1

Click the box next to Square Size for square grids and Columns for layout grids. 

The color picker appears.

Step 2

You can choose to:

• Specify the HSBA or the hexadecimal values in the HSBA or hexadecimal fields if you know the exact values.
• Adjust the color using the color field and color slider. When you do so, the numeric HSBA and hexadecimal values are adjusted accordingly.  
• Set the opacity of the fill by using the color slider or typing in a value in percentage. If you set the alpha to 0, the layout grid switches to outline view.
• Use the eyedropper to select a color from an artboard.

Note: Adobe XD also supports shorthand for hexadecimal codes. For example, if you type 0 and press Return, XD automatically displays the color with code #000000. Similarly, you can type 0A for #0A0A0A and 0AF for #00AAFF.

You can see that the grid color changes as you modify the options in the Colors dialog box.

Step 3

Once you have decided on a color, save it for easier access by clicking the + icon at the bottom of the color picker.

Default square or layout grid preferences

Revert to the default square or layout grid appearance by clicking Use Default on the Grid section of the Property Inspector.

Set your customized grid preferences as default by clicking Make Default. This option sets the default grid option for your account. Any new files you open with XD has this new default.

Nudge and nudge resize

You can combine these keyboard shortcuts with the arrow keys to precisely control the position and size of the UI elements in grid size increments :

• Shift + Arrows: moves the selection in 10px increments.
• Cmd + Arrows: resizes selection in 1px increments (element is pinned in upper-left corner).
• Cmd + Shift + Arrows(Mac) and Alt +Shift +Arrows (Win): resizes selection in 10px increments (element is pinned in upper-left corner).

When the square grid is enabled:

• Shift + Arrows: moves the selection to snap to the grid first and then increases the grid size.
• Cmd + Shift + Arrows(Mac) and Alt +Shift +Arrows (Win): resizes the selection to snap to the grid and then resizes the selection in grid size increments (element is pinned in upper-left corner).