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.
Creating Components in Adobe XD
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, 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 folder 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 watching.
Masks Icons in XD
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 (Components)
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. The default state is the movie poster, so let’s hide the movie info in the layers panel by clicking on the hide icon (no-show).
Select the movie’s main component, and click on the ‘+’ again beside ‘Default State,’ and choose Hover State. To conform to the naming convention, you may rename the Hover State. You can accept it by clicking enter, return, or anywhere on the canvas. 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.
Testing the Default and Hover States (Always test!)
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.
Tap Triggers?
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. Tap is the trigger. If it’s grayed out, click on the interaction + to activate it. 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, it should work now. That should do the trick. 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.