Join Dani Beaumont for an in-depth discussion in this video Drag gestures in the browser, part of Adobe XD New Features Weekly.
- [Narrator] If you've watched some of my earlier sessions here on the new features weekly series, I've shown you in the past a bit about how Auto-Animate allows you to animate micro interactions between art boards and Adobe XD. It's a really powerful feature that's pretty simple to use once you get the hang of it. Last month, the XD team extended the ability to preview Auto-Animate interactions directly in a web browser so your stakeholders can see exactly what you're proposing in your design. This month the team extended that functionality just a bit to support something known as drag gestures between art boards. Now you don't really need to do anything to your workflow to take advantage of this enhancement. The browser just starts to basically show those drag animations, because the XD team changed the code that they generate for the browser. So it'll automatically work for you. For this week's session, I thought I'd go ahead and break down drag gestures a bit more, and then differentiate it from the other trigger options that you have in the application. Let's go ahead and dive in. I'm working on my matcha goodness design and I've come in and defined a flow here, that shows off all the interactions. If I pull down on edit to select all, here in prototype mode, you can see that I have a whole lot of wires that look different in how they're defined. Let's start by look at the finished prototype and then I'm going to come back and break down what I did for each of these items. So for that I'm going to come over to the desktop preview icon and click on it. In the prototype preview now, I can interact with these elements. So, first off, if I want to look at a detailed view of this particular tea, I can click on the image, here, or learn more and it's going to animate to that second art board. If I move this here to the side, from this art board to this one. If I click here on the image, notice that very quickly it's animating between those two art boards. Things got bigger, like text. Images got bigger, additional text appeared. I now have the ingredients details here towards the bottom. So that's an auto animate interaction between those two art boards. I can close out that detail view by hitting the close box, here, which takes me back to that main art board. The next thing I want to show you is a drag gesture to simulate something known as a carousel design. So, what you'll notice is I have my main image here, and two smaller images on the left and right. There's a design metaphor of a carousel that feels as though it's got a three dimensional aspect to it. Where, as I press and drag, I can move images closer to me, by making them larger and clearer, and then away from me by dimming them out and making them smaller. So the way that you interact with a drag gesture, is if you're on a mobile device you can usually press and drag from the right hand side to the left, let's say. If I'm on a computer that has a track pad, I can press and drag also on that track pad. So here on the second art board, I'm going to come to the object here on the left hand side and just press and drag. And notice that I get this terrific animation between the two art boards, where it's literally just auto animating between them. As I press and drag, I'm seeing it. If I get almost all of the way there and kind of let go, you can even see that I have a snap behavior, which is one of the easing options that I selected there within the choices. Let's go ahead and move the preview now to the left hand side and I want to focus on some overlay art boards that I defined. So here on the right hand side, I have things that are common to every single art board in my full design. And that's a slide menu, basically, that when I click on the menu, here on the right, I want the menu to slide out towards the left. Also when I click on the magnifying glass, I want a keyboard to slide up from the bottom. So the beauty of overlays, is I can define it once as an art board and then apply it to multiple additional art boards as an overlay object. The last thing that's interesting about this design, is I wanted my header content to be fixed or pinned so it does not move as you scroll down on the screen. This is known as persistent navigation, always letting your users know where they are in the design. For that, I selected a header image and I defined it as a fixed object. If I come to this art board and press and drag up, now, so scrolling down on the page, notice that the content moves up, but it moves up and under that top navigation. Okay, so let's take a look now at how I made all of these happen. I'm going to close out my desktop preview. Let's start with the first thing that we talked about, which was the auto animation. If I select all, here, in the prototype mode, notice that I have a wire that goes from the photo here, to that detailed view of the art board. There's also a hot spot or a link from the learn more object to that same art board. So two ways to click over there. As far as overlays go, notice that I have this darker gray dotted line. That let's me know that it is an overlay. If I come in and zoom a little more tightly on this second art board, notice if I click really precisely here on my magnifying glass to select it, I have a wire that's selected, it's a dotted line indicating it's an overlay. If I click on the arrow, I can see that I set that up as a tap gesture, but as an overlay with a slide up animation. Now, notice in the art board, here on the left, I get this nice green selection handle that allows me to control where the overlay art board appears. Quite often an overlay is going to be smaller than the actual art board that you're applying it to. So this allows me to say, you know what, for a keyboard, I want it there towards the bottom. If I click off and click then just on the menu item, and then go to the detailed view of how I defined that trigger, notice that it's an overlay that slides from the right to the left. In addition to that, if I want to look at how I pinned my objects, let's go back to this second art board here, and go into design mode and then go ahead and click on the header content there towards the top. Notice that with it selected I defined the whole header area as a symbol. I went over to the properties inspector and I checked the box that says fix position when scrolling. That will keep it in a fixed location. Additionally, I made sure that that navigation sits towards the top of my content. So anything that's below it, is going to move underneath the design. In fact, it looks like I should go ahead and drag this up very much towards the top. I doubt you'd get to the button or the menu footer, but I want to make sure that it's always layered on the top, so that it will sit on top when everything else scrolls. Well, that's just a quick round up of the new drag gesture that's just been added to the web browser, along with other ways that you can define interactions between art boards. I look forward to seeing you next week for another new feature.