Hi everyone. It's time for another micro interaction. This one is going to be this cool little sun moon thing. Okay. And it's going to be using things like our pen tool or the vector drawing techniques we learned earlier on. So instead of just like moving things around and changing colors are actually going to distort stuff. Alright, let's get started. Alright so this is where our sweet new vector drawing pen tool skills are going to come into play. So first thing I'm going to do is draw upward with my outboard tool. I'm going to make a little icon backing. Okay, so I'm going to copy this just because I want the rectangle, I want it to be square. So I'm gonna make it 51 x 51. Get rounded corners. How many rounded corners? Five messing about down now. Okay, so I've got this, I'm going to lock it. Command el control l on the pc, unlock it because I need to rotate it no good reason. Anyway, so we're going to start with the sun and move to the moon. We're gonna draw the sun lips. Still dra...

g it out, give it no Phil I'm gonna give it a border a border of that kind of slight off white. I'm not sure why I like that at the moment. I'm gonna use three Fine. Get in the middle of everything. Nice. I don't want to put my little son sparkles around the outside so I'm just gonna use the line tool, draw him out and I wish you could change the default, It's always one and it's always this gray color so I'm gonna change it to that. Off white. I'm going to change it to three and it's a test. How do I get the little rounded ends here? Remember? Okay because I don't want the little stubby ends. It's the capping. Okay, so with that selected over here, it's this rounded cap. Nice. So that's that one, is that centered kind of, I'm going to make a duplicate of, I'm gonna select both of them actually gonna group them. Makes them easier to rotate. So group it copy it, paste it have a just about outside of it copy and pasted. Um If you just hold nothing down it can move these things around which is cool but if you hold shift while you're rotating it it will lock it into kind of like basic. I wanted to be 45 degree angles kind all the way around. The reason I grouped it just so that it pivots around this middle point. So now I want to do is I want to select all these guys and um group them because I want to animate them separately. Right? Um So and group so I got a bunch of different shapes. It's all a bit big so you select it all because my background is locked allows me to do that even then it's still too big. Maybe you should be at command one or control one to realize how big your icon is massive. That's going to be enough for the moment. Cool. Move on dan. Alright, can't do it. I'll fast forward it though, so Alright now we're back. I just had to make it look nice so we've got our first shape. What we're gonna do is duplicate this art board and we're gonna do the moon on this one. So over here, what we need to do is we need to double click this okay with our black arrow, Double click it. And now we can see these anchor points and the handles, handles of the bits that poke out the anchor points, that kind of central bit of the seesaw and I'm just gonna kinda drag it in there, kind of like a moon. The other thing I want to do is kind of make it bigger. You can't do it while you're in this mode, I'm gonna click off have become once they can hold shift to make it bigger, just outside of these anchor points. Remember not on it, just out here and rotated around somewhere in the middle. And what I wanted to happen is actually let's just preview it for the moment because it's not going to work. I'm going to show you. And so Click on this one, preview it. First of all, I haven't added my animation so when this gets clicked, let's switch to prototype mode. When the button gets clicked it's going to go tap and it's going to go to order animate. Cool. So let's give that a go ready City. Just kind of faded like it seemed not what I wanted to watch. What happens just fades across. This happens because of one of the rules. We can break the rules, but it means that remember I hear in my layers panel, if I click on this one, I've got an ellipse and you can see the little icon, it's like I am in the lips. I am clearly a square over here because we've destroyed their lips. I'm no longer in the lips. I'm this little pin path type thing. So there's different names, which is not really the problem. It's mainly that it's a kind of a different core object. So to make this guy over here instead of being an ellipse, you want that, you can't make them both ellipses because he's not an ellipse. But you can make them both paths. So with the selected go to object and go down to path and convert to path. You are no longer no longer an ellipse. You can see he's a path. Problem is he has a different name. So we've got um 235 and 236. So let's just call this one Sun Moon. Just make sure they're both called sun moon. It's over here. You're my friend called Sunday, lovely. Now let's give it a go. Let's have a little look ready. Look at it morph doesn't go back yet. Let's make it go back. So when this is clicked actually, let's win this whole art board is clicked. You can just make this button actually let's just do it for this button. When this button is clicked, go to you can say go drag it back to this one here or you can say go to previous outboard. It will go back to where it was often. That can be more handy if you've got more than like it's a nonlinear animation. You can get to it anyway, preview it's Clickety click. Cool. Huh? Can't really zoom in. The editor will zoom in. Okay, so you can see it. I love it. So what do we do with the sparkles? Let's have a look. So they start their on this one. We want to go to design. I've grouped all mine together. You don't have to, I'm going to group them all because I want them to go all separate ways. This guy's going to go up so it's gonna go over here Now when you're dragging a held shift to get it to go strapping down. But dragging this way you just kind of like guess it and it really wants to go out 45 degrees. You can do some cool stuff with like adding, I know 20 pixels and then minus ng 20 pixels on the X. And the Y. If you want to get nerdy about it but nobody's going to notice you might be very different. You might have a very different opinion about that casual dan? Let's just get it looking good. It doesn't matter if it doesn't work properly. Okay. The other thing I want to do is when it's out here, I want it to be faded. So I'm going to select them all. We're going to use a shortcut, select them all hit zero on your keyboard But we can't because if we type in zero doesn't work. Okay we can get down to 10%, which is probably near enough that we need casual dan. But I'm gonna select them both and put them all at zero. All right now let's give it a preview. You ready. Can't prove you from this outboard, but I can prove you from this one. Ready city victor goodness does not work. Okay, why didn't the little sparkles fly out? Because I grouped them over here. So over here, it's a group. Okay, and saying I am group # 28 over here. The little sparkles are, they've got their own little names. So let's go and see if we can fix this. So it's a new group. It they all come back to life, luckily they also have the same name. Yeah, preview it and preview the right art board, preview it and there we go sparkle sparkle out, The moon changes. Just a simple thing, but you can see cool little micro indirection. You might be asking yourself why, why have you got this Micro indirection. How does it fit in with the instructor? HQ. It doesn't just needed an example. Sunday moon seemed like a good, seems like a good and easy thing for us to all do and get our heads around. Remember john to dribble and look for the gifts and get ideas of how it might work for you and your app, especially when you're working on your own projects. Alright, let's jump into the next video.

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.

Full Vector Change

Full Vector Change

Lesson Info

73. Full Vector Change

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