7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Adobe XD

How To Animate a Photo Gallery in an Adobe XD Prototype

Scroll to top
Read Time: 7 mins

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

This trick is ideal for showing clients how their users will navigate their website once it’s live.
Personal Website Landing PagePersonal 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 usually the last step of the design process. This should happen 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 easier it will 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

If you’re a full time designer working on a couple of projects at once, having unlimited creative resources could be a game changer. With a single low monthly subscription on Envato Elements you can download all the templates and creative resources you’ll need for every 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 definitely save you time and inspire you with professional design references. But as they say, Rome wasn’t built in a day, so working in your design skills and learning new Adobe XD tricks will help you step up your game.  

Full Course: Responsive Design in Adobe XD

Keep up the good work and learn some new tricks with this Responsive Design Adobe XD tutorial. In this video course you’ll learn how to work with XD’s functionalities to create an amazing Adobe XD prototype with responsive features. Find this and many 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 click to navigate. I’ll show you how to design a web gallery with this type of Adobe XD animation. Let’s get started. 

Buttons might be the most intuitive way to guide your user to navigate through a gallery. 

Call me old school, but at the end of the day you want all of your potential users of all ages to use the animations of your web design. So let’s get right into it!

Step 1: Go to Your Gallery Area

For this part of the Adobe XD tutorial I’ll be working on a 1920 x 1080 web format canvas. Select the area in your design where you want your gallery to be. Let’s say this is going to be a "happy dogs" photo gallery inside a home’s website.

Start by creating a rectangle and place it at the center of your Artboard. Mine is 1152×648 pixels (corresponding to an 16:9 aspect ratio) and has rounded edges. This 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, recommended for web images and video.

Step 2: Choose Your Images

These should be coherent to the theme of your website. In this case I’ll be working with three happy dog photos from Envato Elements

Choose from three to five 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 loads of photos and design resources for your projects on Envato Elements.

Step 3: Insert Your Images and Mask Into Shape

Select the first image of your gallery and place it over the rectangle in your Artboard. On your left side bar menu, you’ll find at the bottom three icons, select the one in the middle 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 both your rectangle and image layers, right click to display the menu and select Mask with Shape. This should adjust your image to the format of your rectangle. 

Select both layers and click on "Mask With Shape" Select both layers and click on "Mask With Shape" Select both layers and click on "Mask With Shape"

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

Double click and rename your layer as "Image 1"Double click and rename your layer as "Image 1"Double click and rename your layer as "Image 1"

Step 4: Duplicate Layer and Repeat

Once we have the first image masked, the next 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 "Image 2". Then place your second image on top.Duplicate that layer and name it "Image 2". Then place your second image on top.Duplicate that layer and name it "Image 2". Then place your second image on top.

Press Command + X on your keyboard, then open your “Image 2” layer and Command + V your image inside that layer. It will automatically adopt the shape of your rectangle. 

Insert your image into the "Image 2" layer.Insert your image into the "Image 2" layer.Insert your image into the "Image 2" layer.

Repeat this same process 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 same 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 can add some text to indicate the number 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.

To add a couple of buttons with arrows I suggest you install an Adobe XD plugin. 

Go to the bar menu on your left, and select the bottom icon. Then click on Discover Plugins and search for “icons”. I’ve been working with Icons 4 Design for a while, but you can try out the different 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 choose the icon you’d like to include in your design. Rotate it and scale it to go in proportion with the text and images. 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 New 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 selected layers and click on Make Component. This will 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 on your right side and next to Default State click on the plus sign and select New 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 selected, let’s adjust what will be displayed here. Change text to “Image 2/3”, bring the left arrow to 100% opacity and position your second image in the center 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 third state for “Image 3”, go back to Default State and repeat this last steps and place your third image in the center of the Artboard. 

Step 8: Let’s Animate our Prototype! 

Now we have three different image states. Go to the top menu and click on Prototype. Make sure you are on the Default State. Then on the left side Layers menu select the “Right” arrow layer. 

Go to the right side menu and click on the top plus icon to Add an Interaction. Then, on Destination select “Image 2” and on Type choose 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 for your users to navigate, the better. In this case, we’ll add the same interaction values to Image 2, so the gallery is also animated when you tap on the image.

Select the “Image 2” layer, add an interaction and replicate the same values as 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 same steps on each state, starting with Image 2 and then Image 3. Remember to also add interactions to the “Left” arrow as well as the previous image in the gallery so the user can go back and forth between images. 

Remember to add interactions to the "Left" arrow and the previous image. Remember to add interactions to the "Left" arrow and the previous image. Remember to add interactions to the "Left" arrow and the previous image.

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.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 know how to create an Adobe XD animation for photo galleries. 

Want to Learn More? 

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

You’re All Set! 

I hope you enjoyed this quick Adobe XD tutorial and use these new tricks on your next design project. Find all the inspiration and creative resources you need on Envato Elements

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.