Hey everyone, welcome back to another tutorial on Adobe XD.
In our last video, we created our first basic prototype.
I will talk while I continue to build the prototype connections
and then make the first transitions.
If you like, you can speed up or look at the chapters
to see when we begin our first transitions.
As you can see, I want to make my prototype as
authentic as possible.
Whenever I create a website,
a mobile and an interactive desktop prototype
will show the client the user experiences.
If a drop-down menu is shown,
I want to ensure that it will open the drop-down menu
if I 'tap' on it.
If I had a search bar or a search field,
I would love to have the keyboard 'slide up as an overlay
as soon as I tap on the search icon.
Eventually, we will start with some fundamental transitions
and how they can take your projects to the next level.
Again, as I build my connections in the prototype stage,
it will look very similar to the design stage,
but we can select individual elements or artboards
to connect some actions.
In our first interaction,
we tap the logo to go to the about page.
Instead, we can change this as a delayed time
and automatically transition to the about page.
Let's make sure our first artboard is the starting page.
You can easily mark an artboard as your home screen by selecting it
and then clicking on the home icon to the left,
it will now become blue.
To work properly,
we can't select individual elements.
We need to choose the entire artboard.
Once we have chosen the whole artboard,
you can now see the time trigger.
We want a certain amount of time to make that happen.
I can select the entire artboard by clicking on its name.
This will reveal a blue handle to the right,
which can then drag to the second artboard
to transition to once a link has been established.
The properties to the right will help us fine-tune the interaction.
Let's go through our options.
First up, what will trigger this transition is tap,
the most common,
but since we want a set
time to pass before moving on,
we're going to choose the time.
The following action
is a simple transition that will do the trick,
but later on, we're going to look
at some of the more advanced options.
Since we manually drag the handle to the second artboard,
we won't need to change the destination,
but we need to look at what animation we want to use.
On the basic side,
none will give you a quick cut to the next artboard,
while dissolve will fade from one to another.
If you want a touch of motion,
a slide or a push will work.
Slide overlaps the first artboard
while push well pushes it away.
Let's try out a push left,
nicely set it into play,
and choose the easing option.
Since we don't want users to be waiting around too long,
we want something pretty quick,
somewhere around a second.
Let's test this out and see it in action.
In the top-right-hand corner is the play button.
It will launch the preview starting with the currently selected artboard
or, if nothing is active,
the one marked as home.
When the preview is launched,
there's a slight delay,
and then the targeted artboard
pushes into the left
and eases nicely into place.
Let's link up one more from the about screen
should the user want to click on the drop-down menu.
I want to make sure to select an individual element
that will trigger the transition.
Once I have the first element active
and if by chance you have trouble choosing it,
look in the layers and select it
—remember how important it is to name your layers now.
If the layers weren't name,
prototyping becomes such a challenge.
I will drag the blue handle to the next artboard.
Instead of a time trigger,
we want to go with tap.
We will keep the rest of the settings the same
which have been retained in the previous link.
To test the prototype, let's jump into the preview mode.
Let's look at both of our interactions,
the time transition from the landing screen to the about page
and the tap trigger activated by clicking on the drop-down menu.
Next up, let's take a look at overlays.
There may be elements
in your project that you wish to reuse amongst several screens,
but you may not want to create an entire artboard for each instance.
For example, a keyboard when the search icon is triggered.
Get the UI keyboard under the file menu.
I am going to copy the keyboard
to use this on project.
Instead of duplicating another artboard
each time I want to use this element,
I only need one!
Let's create another artboard.
With my artboard tool active,
I will make another iPhone 12 Pro Max screen
and paste the UI kit's keyboard.
Resize the artboard so that
only the keyboard is visible.
Let's make another connection.
I will want to make sure to select
the individual elements that will trigger this overlay.
In this case,
the search icon or the word search is chosen.
You can drag the blue handle
to the right of the artboard
containing the keyboard.
Within our properties, a tap will be the desired trigger,
and instead of a transition for the action,
we will want to choose overlay.
If you notice, a bounding box appears on this artboard.
You can drag it to the bottom position of the artboard.
I will set the animation to slide up from the bottom,
and just like in the previous example,
I'll stick with ease out at a second.
Now that the first connection is set up,
I can easily do the same for the search icon
on the second artboard linking to the same keyboard,
and now no matter which artboard I'm previewing,
I can access the keyboard by tapping or clicking on the search icon.
If I decided a second is too long,
I can always go back and change the time.
I will be covering more advanced techniques in future videos,
but this gives you an idea of how far Adobe XD has come
being an excellent tool for wireframes, mockups and prototypes.
There we go.
As always, please feel free to leave any comments or questions below.
Like this video if you enjoyed it
and subscribed to the channel, and hit that notifications bell
to get the next hot tip!
I will see you next time!