Add interactions using a variety of animations to create transitions between artboards to simulate the flow of your app. Preview your prototype within XD or with the XD mobile app before you share with others for review.
In this video, we'll see how to create prototypes in Adobe XD.
To get started, click Prototype at the top or Ctrl+ Tab to switch to prototype mode. First, let's take a look at a prototype that has already been created. I'll click Command + A to see all of the interactions that have been wired between artboards. Another thing I want to point out is the concept of the home screen, when you click the title of an artboard this Home icon shows in the top left corner. When it's blue it means that artboard is set as the Home screen of your app. You can set another artboard to be the Home screen by clicking on it's Home icon. But I'll leave it as the welcome screen for now.
To test the flow of the app, I'll click the Preview button or Command + Enter and click through the hotspots using the Preview windows. The search results screen is not scrolling at the moment and I'd like it to. So I go back to Design mode, click the title of the search result's artboard and change it to vertical scrolling. I want to stimulate the height of a device's actual Viewport, so I'll set the height to 667 pixels and scroll through the search results. I can change other elements as well such as the color of this icon on the Home screen. And you could see the change take effect immediately.
So now back to prototype mode, where we can create our own interactions.
To create an interaction, click on an object or artboard and drag from the blue arrow to another artboard. To remove an interaction, drag the wire to an empty space between artboards. Here, I'll click on the microphone icon and select Voice Search as the targeted artboard. The default settings cause the welcome screen to dissolve into the voice results and ease out on the animation all within 0.2 seconds. Let's Preview to see how it looks, and there it is. I'll keep the preview window open to experiment. I'll change the transition to Slide Left, have it Ease In and change the timing to a full second. When I test again, the voice search screen slides over the welcome screen with a kind of parallax affect. For contrast, I'll change the transition to Push Left, notice the voice search screen now pushes the welcome screen out of the way. To show some other cool things you can do use the None transition to stimulate a state change on the screen. For example, I'll come down here and wire the no rate screen to the rate screen and set the transition to None. Notice that Ease In and Timing are grayed out now, that's okay, because we want to effect to look seamless. When I preview and click on the screen, it shows what their experience would look like to a user adding a rating through this app. If you need to wire from an object within a group, such as from one of these menu icons use Command + click to select it and update the settings as you like.
One last thing I'd like to show you is the previous artboard option. I'd like to use this for the back buttons. I'll click here on this back arrow and set the target to previous artboard. Notice, when I do that all of the other options go away. That's because the interaction is now wired to send the user back to the screen they just came from and will reverse the animations. So if the previous animation was set to slide left and ease out when I hit the back button, it will slide right and ease in.
I can also connect my prototype to an actual Android or iOS device to get a more accurate preview.
Just download the Adobe XD app from the Play Store or App Store onto a supported device, hook it to your computer with a USB cable and preview your prototype. Any changes to the design or prototype interactions are updated in real-time, so you can quickly iterate on your designs.
This covers creating prototypes. Be sure to check out sharing prototypes, mobile device preview and other tutorials available for Adobe XD.
Use a variety of options to share your interactive prototypes with team members, stakeholders, or clients. They can make comments directly on your prototypes so you can easily iterate your design, update the prototype, and resolve their comments.
In this video, we'll explore the different ways you can share prototypes with team members and stakeholders.
The first option we'll look at is how you can create a movie file to communicate your design with others. With the Preview window open, hit Record or using Command or Ctrl +R and tap through the hotspots and scroll through long artboards. When you're finished, hit Record again or press Escape to stop the recording and save the movie file to your computer. Whoever you share it with can open the movie file and view the interactions.
Notice that the visual markers indicate the hotspots in the App design. You also have a few options for sharing online. Just go to the top right corner and click Share Online. Give your app a title. Drag an image from Finder, which will serve as the app's icon. And indicate whether you'd like to allow others to comment on it. Then, go ahead and create the link.
It may take a minute for Adobe XD to upload the prototype, but when it's done, you can click that link to view it online. Before I send it out to other stakeholders, I'll click this icon to expand the commenting panel. I would like feedback by the end of the week so I'll note that here. I can mouse over to edit or delete any comments I've added.
Back in Adobe XD, I can copy the link to share it with others. From there, they can expand to view the prototype in full screen mode. Visual markers fade in and out to guide reviewers through the prototype by indicating where the hotspots are. They can hit Escape to exit full screen mode and add their own comments.
Let me go through the prototype again.
I see some of the reviewers have already added feedback. Let me reply real quick to a few before I move on. Another way to share your work is to embed the prototype into a Behance profile or another website that supports iframes. I'll click Embed. Copy the code, then go to Behance, select Embed Media, and paste the code. And now the interactive prototype is available for others to see.
I can also paste the URL into a browser on my mobile device. If you do not tap the right areas, hotspots fade in and out to guide you. If you add the link to your home screen on your mobile device, this thumbnail becomes the icon that identifies it.
Back in Adobe XD, I can make any necessary changes. When I click Share Again, I can opt to update the existing link, or add a New Link, or I can select Manage Links. Adobe XD then takes me to my Creative Cloud Assets account on the web and I can select to delete any prototypes I no longer need.
This covers sharing prototypes. Be sure to check out the other tutorials available for Adobe XD.
