From the course: Adobe XD Quick Tips
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Animated card gallery - Adobe XD Tutorial
From the course: Adobe XD Quick Tips
Animated card gallery
- [Instructor] Hey everyone. I'm Howard Pinski and in this Adobe XD tip, we're going to take a look at creating an animated card gallery, specifically, for augmented reality experiences. On this document, I have a nice blank art board that we're going to be using for this design. And to start the process, I'm going to grab my rectangle tool and draw out a shape across my entire canvas. This will allow us to load in an image directly into this shape. So, hopping over to Finder or Explorer, I've a bunch of images that will work great for augmented reality experiences including this one of a living room wall. So, I'll go ahead and select the image and drag it directly into Adobe XD, onto the shape and boop, we now have a background image. The next thing I want to do is I want to start adding the cards that we'll be able to navigate between. So, with the rectangle one more time, I'm going to draw out the first card just like…
Contents
-
-
-
(Locked)
Component presentations5m 31s
-
(Locked)
Animated card gallery7m 52s
-
Navigation bar10m 9s
-
(Locked)
Animated FAB menu10m 5s
-
(Locked)
Scrolling simulation3m 19s
-
(Locked)
3D card flip animation3m 52s
-
(Locked)
Number counter5m 6s
-
(Locked)
Hover-triggered image gallery (states)7m 50s
-
(Locked)
Mobile stories experience7m 49s
-
(Locked)
Pull-to-refresh interaction4m 1s
-
(Locked)
Interactive heart component5m 13s
-
(Locked)
Animated progress indicators4m 14s
-
(Locked)
Swipe to delete interaction4m 11s
-
(Locked)
-
-