Prototyping in XD

Switch to Prototype mode by clicking the Prototype tab at the top of the interface (or pressing Cmd+Tab / Ctrl+Tab). In Prototype mode, hovering over any element reveals a blue arrow handle on its right edge. Drag this handle to another artboard to create a wire — an interaction that navigates to that artboard when triggered. Select the wire to configure it in the Property Inspector: choose Trigger (Tap, Drag, Hover, Voice, Time, Key/Gamepad), Transition type, Duration, and Easing. Wires are visible as arrows on the canvas in Prototype mode and invisible in Design mode.

XD provides six transition types, each with a specific use case:

1Transition    CSS equivalent     When to use
2Dissolve      opacity crossfade  Modal open/close, tab content change
3Slide Left    translateX(-100%)  Forward navigation (next screen)
4Slide Right   translateX(+100%)  Back navigation (previous screen)
5Push          both slides        Page-level navigation with momentum
6None          instant            Technical state changes, no animation
7Auto-Animate  tweened CSS        Micro-interactions, state changes
8
9Timing guide:
10  Navigation transitions:    250-350ms, Ease Out
11  Micro-interactions:        100-200ms, Ease Out
12  Modal appear:              200ms, Ease Out
13  Data loading feedback:     300ms, Ease In Out

Auto-Animate compares two artboards and tweens the difference — position, size, colour, opacity, rotation. Any element with the same layer name in both artboards is animated between its states. This creates realistic micro-interactions without any code: a card that expands to full screen, a button that changes colour on hover, a list item that reorders. To use Auto-Animate, duplicate an artboard, make visual changes to the duplicate, wire the original to the duplicate using Auto-Animate transition type, and press Play.

1Auto-Animate example: Card expand to detail
2  Artboard A: card in a grid (W=343, H=200, radius=12)
3  Artboard B: card as full-screen detail (W=390, H=844, radius=0)
4
5  Layer name 'card' appears in both artboards.
6  Auto-Animate tweens W, H, corner-radius, and position
7  producing a native-feeling expand animation.
8  Duration: 350ms, Easing: Ease Out

XD supports overlay interactions that render a destination artboard on top of the current one. Select a wire, change Action to Overlay, and choose alignment: Centre for modals, Bottom for bottom sheets, Top for notification banners. Add a semi-transparent background rectangle on the overlay artboard to simulate the scrim. Wire the background rectangle back to the source artboard to enable tap-to-dismiss. Overlays in XD work identically to Sketch overlays and translate to the same CSS/JS patterns: a modal rendered in a portal with a backdrop.

1XD overlay: Bottom Sheet
2  Trigger:     Tap Add to Cart button
3  Action:      Overlay
4  Position:    Bottom
5  Artboard:    Bottom Sheet - Quantity Selector
6  Dismiss:     Tap outside -> wire backdrop to source artboard
7  Animation:   Slide Up 250ms Ease Out

Set an artboard to scroll by enabling Scrolling in the Property Inspector and setting Viewport Height to the visible screen height. Content below the viewport height scrolls in the prototype preview. Pin elements like navbars and FABs to the viewport by enabling 'Fix Position when Scrolling'. Share the prototype via Share > Share for Review — XD generates a browser-accessible URL. Recipients interact with the full prototype, leave comments on specific frames, and view without installing XD. The share link updates automatically when you republish from the same document.

1Scrollable artboard config:
2  Artboard H:       1800px (full page content)
3  Viewport Height:  844px  (iPhone 14 screen)
4  Scrolling:        Vertical
5  NavBar layer:     Fix Position when Scrolling = ON
6  FAB layer:        Fix Position when Scrolling = ON