Adobe Xd Scroll Animation

From the course: Adobe XD Quick Tips Weekly

List Scroll Animations in Adobe XD. I will be showing you how to achieve the general Listbox animation that you see in Web and Mobile. This animation is achi. Change app language in Adobe XD; Access UI design kits; Accessibility in Adobe XD; Keyboard shortcuts; Tips and tricks; Changes to XD Starter Plan; Design. Artboards, guides, and layers. Microsoft powerpoint worksheet. Get started with artboards; Use guides and grids in XD; Create scrollable artboards; Work with layers; Create scroll groups in XD; Shapes, objects, and path.

From the course: Adobe XD Quick Tips Weekly

Toggle switch

Adobe Xd Scroll Animation

- [Howard] Hey, everyone. I'm Howard Pinski. And in this Adobe XD tip we're going to take a look at using scroll groups to set up various areas on your projects that you can interact with. If you take a look at this notes design, we have this column on the left and a column on the right. And then within these columns we have several areas that we may want to scroll horizontally or vertically. And in cases like these traditional scrolling simply won't cut it. If I select my art board and then drag the handle down to reveal all the content. And then press play at the top, this will allow me to scroll down. But I can't scroll independently on these areas. So here's what we're going to do. We're going to start off on this column on the left. And if you take a look at the Layers panel I have all of these notes inside of a single group called Notes List. And looking towards the bottom, many of these notes extend off the art board. So with this group selected I'm going to look over here to the right within my Properties inspector. And we have a few different options. We have Horizontal Scroll, Vertical Scroll, and Horizontal and Vertical Scroll. In this case, we wanted to scroll up and down. So I'm going to choose Vertical Scroll. And it's giving me two new handles. One at the top and one at the bottom. They both nicely snap to the art board. But if you need to adjust them you can simply pull them in to place. And now that we've set up our first scroll group, if I play the prototype one more time, I can head over to this column and scroll away. But of course we have other areas on this document that we also want to set up scrolling. Over here to the right we have the details about this note. And in the Layers panel you will notice that all of those details are put in to a group called Details. So just like we did with the list on the left I'm going to set up another Vertical Scroll group. Next, I can dive in to this group and select this area here which is our photos. That extend horizontally off the art board. Now, for this group, instead of a Vertical Scroll group, we're going to want Horizontal. This time you're going to notice it did nicely snap to the right hand side of the art board. But I may want to extend this all the way over to the left. Now finally, before we preview one more time. We may want to add a map in this section here that we can pan around in. So hopping over to Finder or Explorer, I do have a few maps that will work perfectly for this. Which I'm going to drag directly in to this rectangle. Now to make sure I can pan in any direction, I'll want to choose Horizontal and Vertical for this scroll group. I'm going to go ahead and extend these bounds just a little bit. And what I'll want to make sure to do is to dive in to this scroll group and enlarge the map itself so that there's content to scroll to. So with may Alt or Option key held down, I'm going to extend this way and also extend this way. And when I hop outside of that group its going to mask it nicely in to place. Wonderful. All of our scroll groups are now set up. So I'm going to press the play button at the top right. We can now scroll through the list on the left hand side. We can scroll through the details on the right. The photos just like this. And if you don't have a track pad or a mouse that scrolls horizontally, you can click and drag over as well. Finally, we have our map that we can pan around in. Just like that. And that is how you set up various scroll groups on your projects in Adobe XD. Thanks for watching everyone. And I'll see you all in the next tip.

Download courses and learn on the go

Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.

Watch this course anytime, anywhere. Get started with a free trial today.

From the course: Adobe XD Quick Tips Weekly

Course details

Grow your Adobe XD skills with these pointers from Howard Pinsky, senior XD evangelist at Adobe. Howard goes over useful features and timesaving techniques that can help you make the most of this powerful design and prototyping tool. Each video provides suggestions for working more efficiently and effectively in XD, including how to best create hover interactions, animated UI elements, galleries of 3D cards for AR experiences, and more. Tune in each week for a new tip.
Note: Because this is an ongoing series, viewers will not receive a certificate of completion.

Instructor

Adobe
  • Howard Pinsky is a senior XD evangelist at Adobe.
    Howard is currently responsible for sharing his UI and UX knowledge and experience with the design community at creative events and through video and livestreams—all with a focus on the Adobe XD application. Previously, he worked as director, creator marketing for Fullscreen, a company that provides creative, strategy, and marketing services for talent and brands to help them build and monetize engaged, social-first audiences. In his role at Fullscreen, he was responsible for crafting and delivering marketing strategies to help maintain and grow the Fullscreen network.

Skills covered in this course

Toggle switch

Adobe Xd Scroll Animation

- [Howard] Hey, everyone. I'm Howard Pinski. And in this Adobe XD tip we're going to take a look at using scroll groups to set up various areas on your projects that you can interact with. If you take a look at this notes design, we have this column on the left and a column on the right. And then within these columns we have several areas that we may want to scroll horizontally or vertically. And in cases like these traditional scrolling simply won't cut it. If I select my art board and then drag the handle down to reveal all the content. And then press play at the top, this will allow me to scroll down. But I can't scroll independently on these areas. So here's what we're going to do. We're going to start off on this column on the left. And if you take a look at the Layers panel I have all of these notes inside of a single group called Notes List. And looking towards the bottom, many of these notes extend off the art board. So with this group selected I'm going to look over here to the right within my Properties inspector. And we have a few different options. We have Horizontal Scroll, Vertical Scroll, and Horizontal and Vertical Scroll. In this case, we wanted to scroll up and down. So I'm going to choose Vertical Scroll. And it's giving me two new handles. One at the top and one at the bottom. They both nicely snap to the art board. But if you need to adjust them you can simply pull them in to place. And now that we've set up our first scroll group, if I play the prototype one more time, I can head over to this column and scroll away. But of course we have other areas on this document that we also want to set up scrolling. Over here to the right we have the details about this note. And in the Layers panel you will notice that all of those details are put in to a group called Details. So just like we did with the list on the left I'm going to set up another Vertical Scroll group. Next, I can dive in to this group and select this area here which is our photos. That extend horizontally off the art board. Now, for this group, instead of a Vertical Scroll group, we're going to want Horizontal. This time you're going to notice it did nicely snap to the right hand side of the art board. But I may want to extend this all the way over to the left. Now finally, before we preview one more time. We may want to add a map in this section here that we can pan around in. So hopping over to Finder or Explorer, I do have a few maps that will work perfectly for this. Which I'm going to drag directly in to this rectangle. Now to make sure I can pan in any direction, I'll want to choose Horizontal and Vertical for this scroll group. I'm going to go ahead and extend these bounds just a little bit. And what I'll want to make sure to do is to dive in to this scroll group and enlarge the map itself so that there's content to scroll to. So with may Alt or Option key held down, I'm going to extend this way and also extend this way. And when I hop outside of that group its going to mask it nicely in to place. Wonderful. All of our scroll groups are now set up. So I'm going to press the play button at the top right. We can now scroll through the list on the left hand side. We can scroll through the details on the right. The photos just like this. And if you don't have a track pad or a mouse that scrolls horizontally, you can click and drag over as well. Finally, we have our map that we can pan around in. Just like that. And that is how you set up various scroll groups on your projects in Adobe XD. Thanks for watching everyone. And I'll see you all in the next tip.

Download courses and learn on the go

Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.

Watch this course anytime, anywhere. Get started with a free trial today.

Adobe Xd Scroll Animation Free

Contents