Drag Transitions
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final Quiz
Lesson Info
Drag Transitions
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
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.
Student Work
Related Classes
Web Design