By Dani Beaumont
With the time transition feature in Adobe XD, you have greater control over the timing of transitions between artboards, including duration, delay, loop, and easing. With this feature, I can easily simulate a simple time-based workflow right here within the application. Let me give you a quick example.
I'd like to simulate an onboarding experience where I give the viewer of my application a quick orientation to the interface features. I've set up all of the design that I'd like to work with in Design mode and I'm now ready to prototype or wire my screens together.
You'll notice I have a landing page here and then after that the phone carousel where the viewer can actually watch videos. Now before I drop that viewer into the experience, I want to step them through a quick tour that gives them an overview of the user experience, and I have that tour here on the right-hand side. What I want to do is use traditional tap clicks for some of the navigation in the design and then the time transitions for this overview.
To begin with, I'll start with the phone landing and I'm going to click on the explore films button and I'll drag a wire the way I ordinarily would to navigate to the phone carousel artboard. And I'll use those default tap transition attributes.
The next thing I'd like to have happen is that the overview kicks in after a second or two of the viewer being on that phone carousel artboard. For that, I'm going to click not on an individual item in the artboard but the actual title of the artboard. So I'll come up here and click on phone carousel and with that selected I'm going to drag a wire from the carousel to the first step in the tour.
When I release what you'll notice is in the drop-down I have a choice of tap or time. I want to select time here and I want to go with... let's look at the default attributes. We've got delay. I'll delay about two seconds. I want to make sure the viewer can read what's on the screen.
I'll transition as a dissolve. I want to go ahead and use the ease in and out transition, and I'll do it for a duration of about two seconds... again so the viewer can read what's happening on that screen.
With that set for the first of the overview screens, I want to apply the same thing to the second third and fourth. Now XD is going to actually do me a favor here. It's going to remember the attributes I set on that first transition screen and offer them as a default for the following screens. So when I click on tour one now and drag a wire, notice that it defaults to time with that two-second delay and the duration of two seconds. I'll apply it to the second and third screens and with that set I can bring the viewer back into the main user experience by clicking on the Get Started button and dragging a traditional wire back to the carousel complete screen. So it's going to be a normal tap wire with a dissolve transition applied.
Now, you never want to have a user feel like they're trapped learning something when they're trying to be productive, so I want to go ahead and introduce a skip tutorial button in the onboarding experience. I've drawn that button in the Design mode and it's here on the phone tour number one.
What I'm going to do is actually click on that first button and drag it here to that complete screen to allow them to skip out of the overview and I'll use the default tap attributes that are here.
I'll show you a nice productivity tip, if I click on that button here in the Prototype mode and I copy it to the clipboard with Command or Control C, I can then click on the additional artboards here holding the shift key to select them all. And when I hit Command or Control V to paste that button, it brings over not only the button artwork but the transition that I've defined between that button and that main carousel complete screen.
Now the idea of time transitions in Adobe XD is a pretty new one so let's take a look at this workflow in the desktop Preview mode. I'll go ahead and click on that first artboard and then I'll bring up the
desktop preview here I have the landing page where I can click on that explore films, After a second or two, my onboarding experience is going to click in it's going to naturally transition from one step to the next. At anytime I could click on that skip tutorial button to step out of the onboarding experience or just click Get started towards the end to take me back to the main user experience.
Now this is just one example of time transitions in action you can use this feature to simulate progress bars animations for time-consuming steps like uploading content or viewing videos online. We can't wait to see how you'll implement this feature in your own designs. I encourage you to give it a try.
To create detailed animations and layered transitions, use the Time trigger in Adobe XD. The Time trigger makes it possible to create timed transitions. Upon transitioning to an artboard, a delay can be set which then triggers an automatic action, like Auto-Animate, to another artboard.
