What you'll need
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.
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.
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.