Artboards for every screen size: easy, quick, efficient.

When creating a design for websites and apps, viewing and saving the different-sized screens as individual files can get crowded and time-consuming. Using artboards lets you save all the different screen sizes in one document, so you can quickly compare them side by side.
 
 

Create Consistent Experiences with Creative Cloud Libraries

Artboards in XD, Photoshop, and Illustrator are special layer groups that let you contain multiple screen size versions of a single design in one document. Unlike individual files for each size screen, you can keep these versions grouped together, which is especially useful when creating the same design for different-sized screens or formats. Artboards are handled slightly differently in each of the apps, and we’ll focus on using Artboards in XD in this post. 


We’ll walk you through creating, sizing, adding, and copying artboards below.

  • 1. Create a new artboard.

  • 1. Create a new artboard.

    To create a new artboard in a new document, select File from the main menu, then New. A dialog box of different-sized device screen options for artboards will appear. Click one and XD will open a new document with a blank artboard of that size.

  • 2. Add more artboards.

    You can add a new artboard inside the document by holding down the Option/Alt key and clicking on an existing artboard and dragging a copy of it to a new location. You can also copy and paste an artboard using Command/Ctrl-C and Command/Ctrl-V. Alternatively, you can right-click the artboard name, select Copy, and then right-click again and select Paste.
  • 2. Add more artboards.
  • 3. Name and size the artboard.

  • 3. Name and size the artboard.

    When the dialog box changes, select one of the preset artboard sizes or input a custom size. In XD, the new artboard appears under Artboards on the left where it can be renamed. You can change the size of the artboard as you work if you need it to be different using the panel on the right.
  • A blank artboard sized for mobile

  • 3. Name and size the artboard.

  • 4. Import an existing Photoshop file that has artboards.

    You can also create XD artboards by opening a Photoshop document with artboards directly in XD. First, create artboards in your Photoshop file.

    To create artboards from your layers and groups in Photoshop select one or more layers or layer groups in the Layers panel, right-click the selection, and then choose either Artboard from Layers or Artboard from Group. 

    Open your Photoshop document in XD by selecting File from the main menu, then Open. Your artboards will be imported as XD artboards with all their sublayers and groups intact.
  • 4. Import an existing Photoshop file that has artboards.
  • 5. Copy content from one artboard to another.

  • 5. Copy content from one artboard to another.

    Once you have added content to your artboard, either in XD or by opening a Photoshop file, you can create new artboards using all or some of that content. If you only want to copy a few elements rather than duplicating the entire artboard, or if you want to fill a blank artboard, you can copy content elements simply by holding down the Option/Alt key and dragging and dropping the content from one artboard to the other. Dragging content within the confines of an artboard auto-nests the content in the artboard. If you drag content associated with an artboard outside the bounds of an artboard, the content will no longer be nested within it.

    Another way to copy an element is to select it and use Command/Ctrl-C key to copy. Then click the artboard where you want to place that element, and use the Command/Ctrl and V keys to paste. If you need a temporary space while you move elements around, you can use the area around the artboards. Place any element outside the artboard and then copy or drag and drop them to the artboards when it’s time.

    A third way of copying content is to use the Layers panel to move or copy content layers from one artboard to another. The advantage of doing it this way is that the moved content will be automatically placed in the same relative position in the new artboard as it was in the artboard it came from.
  
Learn more.
Get more insights in working with artboards and grids in Adobe XD. And discover ways to make the most of artboards in Photoshop. See how to open your Photoshop assets in XD and learn more about bringing in assets into XD from other Adobe applications.
Now that you’re set on how to efficiently streamline and design for different-sized screens, share your new expertise with your team and watch their projects gain traction.
Get the most out of Creative Cloud with our How-to guides.
Use Photoshop to bring projects to life by turning 2D objects and text into 3D ›
Ensure brand consistency across projects, devices, and apps with Creative Cloud Libraries ›
Put your project in the fast lane with dynamic, interactive prototypes from Adobe XD ›