Skip to main content

Drag Transitions

Lesson 79 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

Drag Transitions

Lesson 79 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

79. Drag Transitions

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final 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

Bonus Materials with Purchase

Six Completed Files
Exercise Files

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 ARTICLES

RELATED ARTICLES