How To Animate a Photo Gallery in an Adobe XD Prototype

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. 

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.

How to Animate a Photo Gallery in an Adobe XD Prototype

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. 

1. Create a Click Gallery Animation

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. 

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. 

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. 

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. 

Then double click the resulting layer and rename it 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. 

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. 

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. 

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”.

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. 

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. 

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. 

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”.

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. 

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. 

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.

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. 

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. 

• Best Adobe XD Templates for Web Designers

  Hermione Wright

  07 Jun 2022
• How to Make Wireframes for Web Design in Adobe XD

  Janila Castañeda

  01 Jul 2022
• 20 Best Premium UI Kits for Adobe XD and Figma

  Paula Borowska

  20 Jan 2022
• 20 Adobe XD UI Kits for Your Next Project

  Aladin Bensassi

  02 Feb 2022
• 10 Adobe XD Templates to Help You Design Faster and Smarter

  Amin A. Kazemi

  16 Aug 2022
• 15+ Free Adobe XD Tutorials and Courses

  Andrei Marius

  18 Feb 2021

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.