Hello everyone, welcome back!
Today we will discuss changing the hover state to tap trigger
to a new page in Adobe XD.
If you are working from nothing,
to speed up the mockup process,
I recommend creating a wireframe first.
This will ensure the interface functions as expected.
Then, drag your artwork into the wireframe.
Here are some videos to help you get started.
Users of Photoshop may import files into Adobe XD.
For help, watch this video.
You created a movie mockup database in Photoshop.
You may have created a hover state
over the movie posters within the Photoshop file
so that a summary of the information appears.
If you click on the 'more info' button,
you will now be taken to the movie's details.
You can see, depending on how the movie mockup was created,
we may need to change a few things in Adobe XD.
Movie posters and movie information were created on separate layers.
The movie poster and its movie information should be merged
into one component to make this work better.
XD components consist of reusable elements such as text,
images, shapes, and lines.
Rather than reusing components,
Rather than reusing components, we're using the default and hover states.
we're using the default and hover states.
I will attempt to select only the movie content that I need to make
into components for this one movie.
Using Command on a Mac or Control on a PC,
I will select the 2067 movie poster
and the 2067 movie details.
On a Mac, press Command K,
on a PC, press Control K
or, on the right-hand side, click 'Component +'.
Both layers will be automatically merged into one component,
a diamond-shaped icon will now be shown.
By double-clicking on the name,
I will rename this component to 2067
or whatever movie you are working on.
Click once on the diamond icon to
open and see the insides of the component.
You will notice I have two identical icons.
These are your masks, a circle in a box.
I will click on the icon to open the mask,
and double-click on the name to rename them.
I will rename both masks.
Default and hover states need to be created for this to work correctly.
Therefore, I will select the 2067 component.
Click on '+' to create a default state
on the right side of the property inspector
and choose Hover State.
The default state is the movie poster,
so let's hide the movie info in the layers panel
by clicking on the hide icon, the no-show.
and choose Hover State.
The summary should appear on hover now.
Select 'Show' to display the movie's information.
Click the eye icon to view.
Turn off the movie poster.
Depending on how the file is built,
you may have to turn a few layers on or off.
Remember that not everyone builds their files the same way.
Let's see how it works.
Choose the movie's components from the layers and components list.
Switch to the default and hover screens in the property inspector.
The default state is the movie poster,
while the hover state contains information about the movie.
I hope that worked for you?!
What if you click on the movie info,
and it takes you to a single page of movie information?
Nothing!
But, since we have the artboard for this information, let's do it anyways.
This needs to go to the prototype stage.
If it's grayed out,
click on the interaction + to activate it.
Tap is the trigger.
Select your destination or drag it there.
I'll also do this for the More Info button.
The more info shape will be selected, and the interaction +
will be clicked to create this tap trigger.
Choose the artboard's destination.
For both triggers, the transition will be a transition.
You could play with the animation and ease in and out,
but, I am going to leave it as is with its default settings.
Let's test this out.
As I select the movie's component in the layers panel,
I want to make sure I'm starting on the default state,
because if I don't it won't display correctly.
There you go,
hovering over the movie poster will give you a movie summary,
and clicking on the more info button or text takes you to that page.
If you enjoyed this tutorial,
please like it and subscribe to get more tips and tricks.
Thanks for watching!