Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Prototyping with Adobe XD

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding Interactivity to Prototypes

5:53 with Nick Pettit

Using the prototype tab in Adobe XD, it's possible to link artboards together in an interactive prototype.

More from Adobe

In 2021, Adobe hosted an hourlong Treehouse Office Hours session called Intro To Prototyping in Adobe XD. Check it out for more tips on using Adobe XD to create interactive prototypes.

Get Adobe XD

Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.

Resources

Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Creating interact prototypes in Adobe XD is probably easier than you think. 0:00
    So far, we've been in design mode. 0:05
    But to get started with interactivity, 0:08
    click the Prototype tab in the top left of the screen. 0:10
    This mode will remove a lot of the tools from the toolbar, 0:16
    leaving only the selection tool and the zoom tool. 0:21
    If this is your first time doing this in Adobe XD, 0:26
    you'll see this screen here, but you can just dismiss it by hitting the X. 0:30
    And in this view, instead of moving things around and creating shapes and 0:37
    text, we instead are just linking parts of the design to other screens. 0:42
    First, we want to link the Book button on the Boulder trip here, 0:48
    To the Trip View screen. 0:56
    So double-click the yellow area on the Book button on the first image. 0:59
    And this will highlight the clickable area so 1:06
    that you know what users will be able to click when they're using the prototype. 1:09
    Next to that is a small blue arrow, click and 1:14
    drag the arrow anywhere onto the second artboard. 1:19
    This will then reveal options for how this screen should transition. 1:25
    We want the new screen to push toward the left, and 1:30
    then when we're done, push back to the right. 1:34
    So the trigger is what will cause this action to occur. 1:38
    The action is a transition, you want to go to the next artboard here. 1:44
    The destination is which artboard this transition will go to, 1:51
    in this case, the Trip View. 1:56
    And then we can select an animation. 1:59
    And in this case, we want to change the transition to Push Left. 2:03
    And if you'd like later on, 2:10
    feel free to play around with the different animation easing options. 2:12
    But for now, we'll leave this on Ease Out, and everything else here looks good. 2:17
    So we can click away from that, and we'll just dismiss this window here. 2:24
    And now we need to hook up the Back button so 2:31
    that once users tap into the Trip View screen, 2:35
    they have a way to get back to the Index View and they aren't stuck. 2:39
    So with the selection tool still selected, click the Back button. 2:45
    And then drag its blue arrow to the first artboard. 2:51
    Same thing here, all the defaults for 2:57
    this transition are good except for the animation. 3:00
    Change this to Push Right. 3:04
    Now, let's click away from that, and 3:09
    we'll select the first artboard by clicking its title just so 3:12
    that when we start the prototype, we'll start on that first screen. 3:17
    And then in the upper right corner hit the Desktop Preview, 3:22
    which looks like a play button. 3:27
    This will bring up a new window that's the same size as our artboards. 3:30
    We can scroll down in this list view, scroll back up. 3:36
    And then if we click the Book button for our first trip, 3:42
    it brings us to the Trip View with a nice transition. 3:46
    And if we click the Back button, it takes us back. 3:50
    One thing I don't like about this Index View is that when you scroll, 3:55
    you lose the toolbar. 4:00
    I'd rather keep this toolbar visible at all times so 4:02
    the user doesn't have to scroll back to the top to see it again. 4:06
    So close this Desktop Preview, and 4:11
    let's actually go back to Design View. 4:15
    And then In the Index View here, select all of 4:21
    the elements in the toolbar and hit Ctrl+G on windows or 4:25
    Cmd+G on Mac to group them all together. 4:32
    And in the layers panel, move this group so 4:36
    it's just above the trip repeat grid. 4:42
    And then we'll rename it to something like toolbar. 4:47
    And finally, with the group still selected in the property inspector, 4:54
    check the box that says Fix position when scrolling. 5:00
    This will keep the toolbar in place. 5:04
    Now, click the Desktop Preview button again. 5:08
    Now if we scroll up and down, The toolbar stays in place. 5:12
    When you're done, save your work. 5:21
    And that's it. 5:24
    Once you've created a design in Adobe XD, it's pretty fast to link multiple 5:25
    artboards together into an interactive prototype. 5:30
    You can imagine how we could create more artboards featuring the other places 5:33
    to visit and additional screens in the sales funnel for booking a trip. 5:38
    This method of diagramming using artboards and connecting arrows gives 5:42
    you a really clear picture of how your application will flow once it's complete. 5:47

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up