Learn how to lay out designs for different designs and screens on artboards. Use the grids in artboards to position your design elements.

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.

Multiple artboards for various screens in a single XD file
Multiple artboards for various screens in a single XD file

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 Welcome 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

You can create artboards that are scrollable with a vertical scroll bar.

Notă:

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.

Editing the viewport height
Editing the viewport height

To disable scrolling, select None in the Scrolling section of the Property Inspector.

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. 

Notă:

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.

Align and distribute multiple artboards
Align and distribute multiple artboards

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 indicates the fixed elements, and you can layer them above or below other design objects. 

 

Notă:

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. 

Notă:

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. 

Multiple artboards selected at the same time
Multiple artboards selected at the same time

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.

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. 

Square grids in XD
Square grids in XD

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 (similar to the square grid). However, if the artboard is resized or grid is adjusted, the pinned items do not resize or reflow.

Layout grids in XD
Layout grids in XD

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
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.

Notă:

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 toward a grid until one of the object’s edges is within the grid’s snap-to zone.

Snap to grid while drawing objects
Snap to grid while drawing objects

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.

Layout grid behavior when you change the artboard size
Layout grid behavior when you change the artboard size

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.

Setting layout grids in XD
Setting layout grids in XD

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.

Editing the size of the left and right margins uniformly
Editing the size of the left and right margins uniformly
Editing the size of the margins individually
Editing the size of the margins individually

Change square or layout grid color

To change the color of a square or layout grid:

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

    The color picker appears.

    Editing grid color
    Editing grid color
  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.

    Notă:

    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.

  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 sets the default grid option for your account. Any new files you open with XD has this new default.

Această lucrare este oferită sub licență Atribuire-Necomercial-FărăModificări 3.0 Ne-adaptată Creative Commons  Postările pe Twitter™ şi Facebook nu sunt acoperite de condiţiile de licenţiere Creative Commons.

Prevederi legale   |   Politică de confidențialitate online