Creating basic scroll behavior in Adobe XD, often referred to as scroll animation in a general sense, is straightforward and allows you to design long-form content like landing pages or feeds that extend beyond the initial screen view.
Understanding Basic Scrolling in Adobe XD
Adobe XD primarily facilitates vertical scrolling to display content that doesn't fit within the initial height of your designed screen. This is achieved by making your artboard longer than the standard device screen size and placing content within that extended area.
Steps to Enable Vertical Scrolling
Based on the provided information (dated 25-Feb-2022), here are the fundamental steps to enable vertical scrolling on an artboard in Adobe XD:
- Select Your Artboard: Use the Select tool (V) in Adobe XD.
- Click on the name of the artboard you want to make scrollable, or
- Drag your mouse across multiple artboards to select them if you want to apply this setting to more than one simultaneously.
- Reference Information: Use the Select tool to click the artboard name or drag across artboards.
- Extend the Artboard Length: Once the artboard is selected, you will see handles around its edges.
- Find the handle at the bottom point of the artboard.
- Click and drag this handle downward to increase the artboard's vertical length. Make it long enough to accommodate all the content you want to be visible when the user scrolls.
- Reference Information: To make the selected artboard longer, drag the bottom point of the artboard down.
- Add Your Content: Place all your design elements, images, text blocks, etc., onto the extended artboard area. Content placed below the original screen height will become visible upon scrolling.
Previewing Your Scroll Animation
After extending the artboard and adding content, you can immediately test the scrolling behavior.
- Click the Preview button (usually a play icon) located in the upper-right corner of the Adobe XD window.
- The preview window will open, showing your artboard. If the artboard is longer than the original viewable height, you will be able to scroll down to see the rest of the content.
- Reference Information: To preview scrolling on an artboard, you can preview directly in XD.
By following these steps, you create a scrollable artboard that simulates a user scrolling through content in a real application or website.
