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.
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.
This version of Adobe XD does not support horizontal scrolling.
To make an artboard scrollable:
Artboards created using preset sizes: If your content continues beyond the prescribed length of the artboard, drag the bottom of the artboard to the desired length and continue to design. A dotted line on your artboard indicates the start of the scrollable content.
To disable scrolling, select the artboard and then select None in the Scrolling section of the Property Inspector.
Artboards with custom sizes: To make a custom artboard scrollable, select the artboard and then select Vertical in the Scrolling section of the Property Inspector.
Also, specify a Viewport Height, which is the size of the window through which the artboard is viewed. The viewport height must be less than the height of the artboard for the scroll to appear. You can also specify the viewport height by moving the head of the dotted line on the canvas to the required position.
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
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.
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).
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.
Marquee-select multiple artboards and click the Align and Distribute options in the Property Inspector.
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.
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.
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.
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.
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.
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.
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.
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 (similar to the square grid). However, if the artboard is resized or grid is adjusted, the pinned items do not resize or reflow.
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
- Show Square Grid:
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.
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.
To change the size of the grid, edit the spacing value in the Property Inspector. The smaller the number, the denser the grid.
To snap an object to a grid, drag an object toward 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.
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.
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.
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.
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.
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.
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 sets the default grid option for your account. Any new files you open with XD has this new default.