BloG

How To Animate a Photo Gallery in an Adobe XD Prototype

Nov 21, 2022

How To Animate a Photo Gallery in an Adobe XD Prototype

by | Nov 21, 2022 | User Experience Design

Are you having a tough time selling animations and responsive features in your web designs? On this Adobe XD tutorial I’ll guide you thru quick and simple steps to create an animated photo gallery. 

This trick is good for showing clients how their users will navigate their website once it’s live.

Personal Website Landing PagePersonal Website Landing Page
Create an animated photo gallery Adobe XD prototype using with premium template designs like this one.

Animations and interactions are often the last step of the design process. This could occur after you’ve created wireframes, defined a design system, and already applied styles and elements to your design. 

The more hi-fidelity (realistic/detailed) your designs look, the better it is going to be to sell your ideas to clients. Keep reading this Adobe XD prototype tutorial to step up your presentations with clients.

Adobe XD Web Templates on Envato Elements

In case you’re a full time designer working on a few projects without delay, having unlimited creative resources may very well be a game changer. With a single low monthly subscription on Envato Elements you’ll be able to download all of the templates and artistic resources you’ll need for each design project.

Find web templates, Adobe XD wireframe kits, web icons and more on Element’s huge resource library. 

Adobe XD templates available on Envato ElementsAdobe XD templates available on Envato ElementsAdobe XD templates available on Envato Elements

Working with premium templates will certainly prevent time and encourage you with skilled design references. But as they are saying, Rome wasn’t inbuilt a day, so working in your design skills and learning recent Adobe XD tricks will provide help to step up your game.  

Full Course: Responsive Design in Adobe XD

Sustain the nice work and learn some recent tricks with this Responsive Design Adobe XD tutorial. On this video course you’ll learn tips on how to work with XD’s functionalities to create an incredible Adobe XD prototype with responsive features. Find this and lots of other Adobe XD tutorials and guides on our Envato Tuts+ Youtube Channel.

For this Adobe XD prototype tutorial we’ll create a gallery animation that you simply click to navigate. I’ll show you tips on how to design an internet gallery with this sort of Adobe XD animation. Let’s start. 

Buttons is perhaps probably the most intuitive method to guide your user to navigate through a gallery. 

Call me old fashioned, but at the tip of the day you wish your entire potential users of all ages to make use of the animations of your website design. So let’s get right into it!

Step 1: Go to Your Gallery Area

For this a part of the Adobe XD tutorial I’ll be working on a 1920 x 1080 web format canvas. Select the world in your design where you wish your gallery to be. Let’s say that is going to be a “joyful dogs” photo gallery inside a house’s website.

Start by making a rectangle and place it at the middle of your Artboard. Mine is 1152×648 pixels (corresponding to an 16:9 aspect ratio) and has rounded edges. It will work as a mask for our images. 

Create an image box in Adobe XD.Create an image box in Adobe XD.Create an image box in Adobe XD.
My image rectangle is 1152×648 pixels, corresponding to an 16:9 aspect ratio, really helpful for web images and video.

Step 2: Select Your Images

These needs to be coherent to the theme of your website. On this case I’ll be working with three joyful dog photos from Envato Elements. 

Pick from three to 5 different images to feature in your gallery. 

Choose the images that will be featured in your gallery.Choose the images that will be featured in your gallery.Choose the images that will be featured in your gallery.
Find a great deal of photos and design resources on your projects on Envato Elements.

Step 3: Insert Your Images and Mask Into Shape

Select the primary image of your gallery and place it over the rectangle in your Artboard. In your left side bar menu, you’ll find at the underside three icons, select the one in the center to see your Layers. 

Add your first image on top of the rectangle. Add your first image on top of the rectangle. Add your first image on top of the rectangle.

Select each your rectangle and image layers, right click to display the menu and choose Mask with Shape. This could adjust your image to the format of your rectangle. 

Select both layers and click on Select both layers and click on Select both layers and click on

Then double click the resulting layer and rename it as “Image 1”.

Double click and rename your layer as Double click and rename your layer as Double click and rename your layer as

Step 4: Duplicate Layer and Repeat

Once we have now the primary image masked, the following step is to duplicate that layer and name it “Image 2”. Then select your second image and place it on top of your rectangle. 

Duplicate that layer and name it Duplicate that layer and name it Duplicate that layer and name it

Press Command + X in your keyboard, then open your “Image 2” layer and Command + V your image inside that layer. It is going to robotically adopt the form of your rectangle. 

Insert your image into the Insert your image into the Insert your image into the

Repeat this same process so as to add your third image into the gallery format. 

Step 5: Space Out Images 

Give some space between each image. Spread them out to your right and keep the identical space between each image. I’m setting my images to be separated by 50 px. 

Spread your images out so there’s space between each. Spread your images out so there’s space between each. Spread your images out so there’s space between each.

Step 6: Add Text and Buttons 

To make your animated gallery obvious to the user, you’ll be able to add some text to point the variety of images featured. Below my image gallery I wrote “Image 1/3”.

Use some text below your gallery to indicate the number of images featured. Use some text below your gallery to indicate the number of images featured. Use some text below your gallery to indicate the number of images featured.

So as to add a few buttons with arrows I suggest you put in an Adobe XD plugin. 

Go to the bar menu in your left, and choose the underside icon. Then click on Discover Plugins and seek for “icons”. I’ve been working with Icons 4 Design for some time, but you’ll be able to check out the several alternatives offered by XD. 

Download an icon plugin to add a couple of arrow buttons. Download an icon plugin to add a couple of arrow buttons. Download an icon plugin to add a couple of arrow buttons.

Then select the icon you’d prefer to include in your design. Rotate it and scale it to go in proportion with the text and pictures. Rename each layer with “Left” and “Right” accordingly. 

Add a couple of arrows to the right and left to indicate motion. Add a couple of arrows to the right and left to indicate motion. Add a couple of arrows to the right and left to indicate motion.

Step 7: Create a Latest State for Each Image

We’re almost there. Let’s select all of our three images, bottom text and arrows. On the Layers panel right click on all chosen layers and click on on Make Component. This will probably be our Default State. 

On the Layers panel right click on all selected layers and click on Make Component. On the Layers panel right click on all selected layers and click on Make Component. On the Layers panel right click on all selected layers and click on Make Component. 

Go to the menu in your right side and next to Default State click on the plus sign and choose Latest State. Rename this state as “Image 2”.

Go to the right side menu and next to Default State click on the plus sign and select New State. Go to the right side menu and next to Default State click on the plus sign and select New State. Go to the right side menu and next to Default State click on the plus sign and select New State. 

With the “Image 2” state chosen, let’s adjust what will probably be displayed here. Change text to “Image 2/3”, bring the left arrow to 100% opacity and position your second image in the middle of the Artboard. 

Adjust the text and image for this New State. This will be your send image in the gallery.Adjust the text and image for this New State. This will be your send image in the gallery.Adjust the text and image for this New State. This will be your send image in the gallery.

To create a 3rd state for “Image 3”, return to Default State and repeat this last steps and place your third image in the middle of the Artboard. 

Step 8: Let’s Animate our Prototype! 

Now we have now three different image states. Go to the highest menu and click on on Prototype. Be sure that you’re on the Default State. Then on the left side Layers menu select the “Right” arrow layer. 

Go to the proper side menu and click on on the highest plus icon to Add an Interaction. Then, on Destination select “Image 2” and on Type select Auto-Animate. 

Go to the right side menu and click on the top plus icon to Add an Interaction. Go to the right side menu and click on the top plus icon to Add an Interaction. Go to the right side menu and click on the top plus icon to Add an Interaction.

The more interactions alternatives you include on your users to navigate, the higher. On this case, we’ll add the identical interaction values to Image 2, so the gallery can be animated whenever you tap on the image.

Select the “Image 2” layer, add an interaction and replicate the identical values because the “Right” arrow.

A the same interaction values to Image 2, so the gallery is also animated when you tap on the image.A the same interaction values to Image 2, so the gallery is also animated when you tap on the image.A the same interaction values to Image 2, so the gallery is also animated when you tap on the image.

Finally, repeat the identical steps on each state, starting with Image 2 after which Image 3. Remember to also add interactions to the “Left” arrow in addition to the previous image within the gallery so the user can go forwards and backwards between images. 

Remember to add interactions to the Remember to add interactions to the Remember to add interactions to the

Click on the play icon on the highest right side of your screen to see the Desktop preview of your animation.

Click on the play icon on the top right side of your screen to see the Desktop preview of your animation.Click on the play icon on the top right side of your screen to see the Desktop preview of your animation.Click on the play icon on the top right side of your screen to see the Desktop preview of your animation.

There you go! Now you recognize tips on how to create an Adobe XD animation for photo galleries. 

Need to Learn More? 

Practice makes perfect, and the more information you’ve got the higher your designs and Adobe XD animations will look. We’ve got articles on Figma vs Adobe XD, tutorials on tips on how to make Adobe XD wireframes, and lots of  templates on your next Adobe XD prototype. 

You’re All Set! 

I hope you enjoyed this quick Adobe XD tutorial and use these recent tricks in your next design project. Find all of the inspiration and artistic resources you would like on Envato Elements.