Create interactive prototypes

Switch to Prototype mode.

Click the artboard that you want to set as the Home screen. A gray home icon appears in the upper left corner.

Click the Home icon. It turns into blue indicating that the artboard or screen is now successfully set as the Home screen.

To set a different artboard as the Home screen, simply click the Home icon associated with that artboard.

Switch to Prototype mode.

Click the object that you want to link.

A connecting handle with an arrow appears on the object. When you hover your mouse over the handle, the cursor changes to a connector.

Click and start dragging your mouse to see the connector. Release your mouse on the target artboard or screen.

When you wire up the first element, the artboard of that element is set as the home artboard. 

In the pop-up window that appears, you can specify the following:

• Transition options and the duration for the transition: If you want to maintain scroll position when you transition to another artboard, select Preserve Scroll Position. This option is useful for when you are prototyping navigation bars or fixed footers. If the user scrolls in the original artboard, the next artboard recognizes the scroll position from the original artboard. When you click an artboard or any element in the artboard, you can control the scroll position to keep the original place from one screen to the next. The control prevents repeated scrolling back and forth in the project file. For example, if a user scrolls down to y=1000 on artboard A, the transition to artboard B defaults to y=1000. If the original artboard has no scrolling defined, the Preserve Scroll Position option is inactive.
• Overlay: If you want to simulate the states or transitions such as menu dropdowns and sliding keyboards, select Overlay.

Press Esc or click outside the pop-up to dismiss it.

Repeat the steps above to link all the interactive elements in your project.

TIP:

In Prototype mode, to make the process of creating interactions faster:

• You can copy and paste objects across artboards. The object is copied and pasted along with its interaction.
• You can also copy and paste an interaction alone. Copy an object, right-click another object, and then select Paste Interaction. Only the interaction is pasted.

• To point the element to a different screen, click the handle again and drag it to the required screen.

• To view the connections to or from a particular artboard, select the artboard title.

• To delete an interaction, drag the connector's destination handle off a target artboard on to the draft area.

In XD, switch to Prototype mode.

To view the connector, select the artboard and use the mouse hover on the handle.

Click drag-and-drop the connector from the source artboard to the destination artboard. When you wire up the first element, the artboard of that element is set as the home artboard.

In the Trigger pop-up window, set the following options:

• Trigger: set it to Time.
• Time delay: set the transition delay period in Seconds.
• Duration: set the transition duration in Seconds.
• Action: set it to Transition.

Select the Desktop Preview icon  to preview the changes.

In the desktop app, click the Share button at the upper right and choose Share for Review. When the link is created, you can copy the link and open the prototype on browser. Time transitions play as you design in the XD desktop app.

To stop the time transition, press the back-arrow key or the back-arrow navigation button, which takes you back to the previous screen.

When you stop the transition for the first time, Adobe XD displays a notification that the time transition has stopped. To resume, press the right-arrow navigation button or the right-arrow keyboard key.

In the Prototype mode, select the element you want to link. When a small arrow appears, click the arrow, and it automatically sets the action as previous artboard. You can also link the element to an artboard, and select Action > Previous Artboard.

When the Action is set to Previous Artboard, the icon changes.

Use the preview window to preview the linking.

In Prototype mode, select Target > None.

You can also drag the wire from the artboard to the draft area (the gray space between the artboards).

Preview the linking in a browser.

Any target link previously set from the element is removed.

Click the Desktop Preview icon. The Preview window appears and displays the artboard in focus.

To test the navigation between screens, click the interactive elements.

You can edit the design and interactions in your prototype while previewing in the preview window. The changes are instantaneously available for preview.

To record the interaction, click Record icon in the preview window. To end the recording, press Esc or click the Record icon again.

Specify a name and location where you want to save the recording. The recording is saved as a .mp4 file.