Learn how to make artboards scrollable to show hidden content.

What you'll need

This sample file is an Adobe Stock asset you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file.

What you learned: How to resize artboards to make vertically scrollable content

When you’re creating a design in XD, the artboard sometimes won’t be tall enough to fit your content. By making an artboard taller to fit more content, XD automatically integrates vertical scrolling to accommodate different device sizes.

Resizing artboards

In order to make an artboard taller to accommodate content, you need to select the artboard.

  • With the Select tool, click the artboard name or drag across artboards.
  • You can also click an artboard name in the Layers panel to select it in the Document window.

To make the selected artboard taller, drag the bottom point of the artboard down. A dashed line appears indicating the original height of the artboard.

Previewing scrolling

To preview scrolling on an artboard, you can preview directly in XD using the Desktop Preview option.

  • With the scrolling artboard selected or content on that artboard selected, click the Desktop Preview button in the upper-right corner of the application. The selected artboard displays in the window that appears. The size of the window that appears is determined by the size of the selected artboard. The area of the artboard that you see is called the viewport area.
  • Click and drag in the window to scroll the artboard vertically.
  • Close the Desktop Preview window.

Turn scrolling off

  • You can disable scrolling for an artboard by choosing None from the Scrolling section of the Property Inspector. If scrolling is disabled for an artboard that is larger than the viewport of the device, the artboard area is scaled to fit into the viewport area.

Tip: You can also adjust the vertical size of the viewport area with scrolling enabled for an artboard. By dragging the head of the dotted line on the artboard, change its position.

 

Back to: Start with wireframe kits

 

Was this page helpful?