Hi everyone, we're going to look at a different transition. It's this one. Watch this, I can click hold and drag. It's a drag transition. Great on mobile phones, you can kind of swipe left, swipe left. It has a few bugs. I'm not gonna lie to you, but we'll work through those. We'll also show you how to use that exact same one for this slider. Look, we can drag that and it changes shape and does cool stuff. All right, let's jump in now and learn the drag transition and adobe XD. Alright, get going with this one. We're going to create a few little pieces to make it work. I'm going to speed this up and I'll show you the finished results. All right. So what I've done is I've just created a few tiles or cards that I want to kind of swipe through. Okay, the trick is with it, you need to make sure they're all grouped in one big long line. Otherwise this ends up coming off the outboard if that's not kind of grouped to something on the outboard and it can't be part of the animation. Cool. So we...

're going to have two of these. Okay, and this one here is going to move to the center on this one and basically we're going to do an auto animate using drag though, because if we just use the regular what we've done in the past. Right, as we did this. We connected it up. We did tap and we did auto animate that kind of works. Give it a preview, give it a click and moves across. We just want to be activated by a different thing, That different thing instead of tap, it's going to be drag, still going to order animate. Okay, give it a preview and click hold and drag. Pretty cool. Huh? Now the trouble is, is going to be trouble. Okay. Um, it's it's pretty basic at the moment. Hopefully you you're in the future and you're looking at a you can drag more than one way. Look, I can't drag back, kind of not useless but kind of useless. It's a good first start, let's say because we can keep going to the right, that's easy. So I can say you when you're finished, you can do the exact same thing, drag on to animate. Great. Let's give it a go. You drag it's cool, drag this one. It's not working. Let's double check. Well, we didn't move it mm hmm. So I did it and it was dragging but it wasn't going anywhere pretend that was. I did that on purpose. Okay, So dragging across and dragging this one across, but try and get it back. You can't do it, you can't drag to the left or up or down. Okay? It's just drag right. So we're gonna keep this video short because you can't do lots of things, you can try and mess around with it, you're like, okay, so I'm gonna drag back to the this one here, look that works down. So drag or to animate you, It will work. Let's give it a go? But you can still use left the dragon to the right. So you, you and then the next one I want to go back this way, but you can't, but you can drag it this way and go back to the middle. It's like inception or when somebody like has this scroll wheel around the wrong way up is down, down is up. So we're gonna cut, drag down. It's cool. You can swipe, it works on a mobile phone for the testing so people can swipe across. I'd be reluctant to use it at the moment because the first thing they do after they swipe across and they're gonna try and swipe back and they can't but another use for this and it's quite cool. Let's jump in and I'll show, I'll show you that little slider, adjust the thing. Okay, let's go and make it. I'm going to add it to this video because it's all about the drag and transition and this one's kind of cool. I've found a good use for it except for this example that I showed at the beginning, but you might be working on something that yeah, it was really useful for it. So I'm gonna switch back to design view. I'm going to duplicate the page. I am going to been all of this. Don't need any of that, Make sure. Do you have any transitions on this one? Nothing at the moment awesome. So we're going to build our little parts. So I am going to switch back to design view. Let's go the rectangle tool and we're going to do two things. I'm going to grab that circle at the top here. Let's fill it with our green. Get rid of the border. Let's create slider. Now the silence is just totally fake. Right? Doesn't exist. It's just a thing that looks like a slider. So that's the slide bit. That is the circle Draghi bit, give it a color. So that's the kind of main parts you want. So we want now an identical one and what we want to do is change this. Okay. We'll just change the size to start with. And now what we can do is instead of doing it for the dragging the whole entire like cardboard, you can click on this, go to prototype mode and this can be the dragon ball items. So this is going to control dragging to this. It's going to drag, it's going to order animate remembered from last time and did the same thing with this guy grab the error of him. He goes back and actually he needs to be further along in this little bit. Okay, so that's, it went a bit fast. It's not very hard. Let's give it a go and check this out. Mhm Yeah, I have no use, I haven't found a use for it yet. You might, so there's, I just want to go if you decide to go down that rabbit hole, I will show you a couple little things you might run into problems with. Is this changes size? Perfect. Okay, mainly because in my layers panel um we looked at this before, it's a primitive rectangle and so is that they have the same name and they've got the same little icon there, let's say over here, I wanna make this like a rounded circle. It looks like an ellipse. But it's not it's actually a rectangle. Okay, that has such rounded corners that it looks like a circle. But over here it still says I'm a circle. Look, I'm still a circle, so that'll work. Okay, so that's something you can do circle square. But let's say that I go into this and I actually want to start messing with it, make it that kind of like muni thing or use my sweet new kind of design skills. I don't know what we're making, but let's have a look at this now, if I preview it, preview the right page, even if I drag this, it doesn't know what to do because like because it's not connected anymore. Okay, they're not the same kind of shape that got converted to a path. Okay, and that's the rectangle the way around that have a think about it. What would you do, pause it, have a think and maybe go and do your own version but you can work it out if you can't remember. It's turning this into a path. Okay, so um there's a shortcut I use all the time. It's command eight or control eight on a pc and it just turns it to a path. Now. The problem is they have different names, I'm going to call this one, I'm just going to copy it. Copycats are the same now and they're both paths now. We should be able to preview this fella and go. So it needs a bit of work the transition especially because the, where I want to use it the most is kind of swiping on a mobile phone through say images or a gallery. But it works kind of cool with this little slide back here, maybe adjusting the size of something at the moment. It doesn't adjust color. You're like, oh, just the color. Okay, I feel like I should give it a go. Just kind of flicks between the two. Just kind of jumps. Maybe that will adjust in the future as well. Give it a try while you're there. Might be working because it would be really handy with it for a hue slider. That is something I could work into a project. All right, that is the drag transition in adobe XDD

Class Materials

Bonus Materials with Purchase

Six Completed Files

Exercise Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

Ratings and Reviews

Haseebullah Johar

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

2,000+ classes ranging from fundamentals to advanced techniques.

Drag Transitions

Drag Transitions

Lesson Info

79. Drag Transitions

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions