Advanced Symbols
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
Advanced Symbols
All right we are moving along in this course it feels like a really good time to cover. We've done symbols before. We've done symbols loads it's these guys over here my assets panel but there's some advanced features I want to share with you before we move on just to kind of help your flow go. The first one is we've kind of stumbled over it a couple of times but we're going to add a few extra features to it. So a regular old symbol we've done for the snack bar and let's say that I've done this mock up and it's a couple of months later and this happens a lot to me. So I do the first mock up and I do a few most of the pages that they need not come back and say actually can you mock up these other pages that we need? We didn't think we need but now we do. So what you do is or keep it as a separate document and let's say things like the navigation. I want to copy across. I'm just going to select it, copy it. I'm going to make a new document it's going to be my regular old size. I'm going t...
o paste it in here and a couple of things happen. One is that um it brings through the symbols it's brought through the top nav and the logo. Why is that is because I copied the top Nav and inside of that nav symbol there is another symbol called logo. Okay so they're kind of tied together. Now the difference between this symbol over here whereas the nav see the top nav No little linking icon. This one has a little link icon so by default it's actually connected to that original. It actually tells me he said it's up to date and it's connected to that other file called 70 advanced symbol, tricks tips and tricks XD. Don't worry about the naming for that. I have to do it for this course so that I don't lose the lose where I'm up to. Okay and what can we do? Let's say that the client like especially the X you know at a kind of a UX type project lots of things change like they come back and they're like you can't use a price tag like this or you can't change the you know the logo has changed a bit and we have with this logo let's say we move from being this kind of green color to white. Let's say we want to update that so it doesn't matter which one you do it in so how to get there you can either just open the document and start working but say you have no idea where this came from. You'd be like where did this come from? Okay if you have above the link icon it will tell you but you can right click it anywhere and say edit and source document and will open it up. Mine's already open but it's brought me here it's highlighted it there. I can see it here remember I'm I'm not sure where it is. I can highlight on the canvas shows me or see its all time together. Dan cool. So I want to get inside of here. I'm going to double click it. They will pick it again and I want to grab this green text. Just make it white. Now if I jump over here, nothing's changed. Okay so what you need to do is make sure you save it. So file save. Cool. Now jump to the document that's going to freak out. It's going to say hey he's gone blue update these ones. So a couple of things I can do if you're doing it on purpose like we are here you can just go yeah update them because I know what I want to do but say you don't, you're like somebody else is working on this file, why is it updating? You can ignore it or you can probably not ignore it. But like check it, you can go over here and see for hover above. It says it has been updated today from this file gives you a little bit more information about what changed. I'm happy with it. Okay so I'm gonna click update also you're not gonna click both of these right click them and I'm going to say make local, make local says there's still symbols only in this document it's not going to connect back. I'm gonna undo that because I am going to just click on the you can do it there. I clicked on it there. That update it. You can do the update all or you can just click this button here. You can click this button here. I thought you could give it a click. You can't, I'm sure you used to be able to anyway. So it is still connected. Green means I'm connected to another document but it's updated. You can see the way has changed. Another cool trick. I'm going to jump back to the original is what I've done in the between videos just to kind of make this video make more senses and see these little icons we made earlier. All the icons. It's kind of the logo. Okay. And I converted this into a symbol. And where is it here? It's called this one here. I HQ logo. White symbol only. And so they are the same symbol. Right? So yours might not be like that. But let's say you got a symbol somewhere. It might be this never burger. It might be the menu along the top. It could be the navigational top. And let's say you want to update it okay to something else? You want to switch symbols. You don't want to just update it. You want it to be something different. Okay, so I've got a gray version over here or let's say you want to switch it out for no good reason to the um microphone. One good thing about it is That's a symbol. It's used a few times in the document. We've only got three at pages. You might end up with 3000. Okay. Not that many, but you might end up with a load more. And what's cool about it is you might go actually, it needs to be something else now. So when you use the word microphone to just click hold and drag it over the top and watch them all update. There's a way of switching out some symbols and undo. I'm gonna switch it out for the gray version of the logo. You've got to make sure it goes right over the top. You can kind of see the icon changes from plus two. That thing I'm gonna undo because that's not really what I wanted. All right. Two more things before we move on. Is I want to It's a little trick. I use it. It's kind of a weird one. Let's say like this thing here is an entire group to get inside of that group. You've got to click it once. Double click it. So there's a group within a group. You gotta double click it again. Is that a group within a group? It is that we click it again. So you end up like double clicking there was like to get to this one little box. I had to click it like a zillion times. So a cool little trick is if you hold down the command key on a Mac or the control key on a pc, you just click anything. It just goes straight to the source all the way in. Okay lets say our navigation up here was another one. So this is a group inside of that group. Is this group for? Sorry, this is a symbol. Inside of the symbol is another symbol. So to change the color back to green, I kind of kind of double click it. Double click it again and just keep I keep smashing away at the clicking. Here we go. So I grab it all and then I change it to green because that's what I want to do anyway. But instead of doing all the clicking, just holding down the command key, click it once, go straight in their control key for a pc. You may you might not find that one handy. It's in my maybe list of advanced tips and tricks I use it though. All right. One of the other ones we covered a little earlier, but you really need to kind of redo it because we've learned so much. Let's come back and say remember this is a symbol. It's been used on lots of pages and it's being used across different documents right over here as well. But the client comes back in and says we don't want to call it sign up anymore. So we're gonna use, first of all, we're gonna use this. Cool little trick and command click it. Okay to jump straight in there and we're gonna call this one now. Register, register. The client says no more sign in. It's going to be register. Cool. I've changed the symbol and it's going to go an update. You'll notice when you change text, it doesn't feel like over there. Okay. So what we need to do is we need to go back to this original. Okay, right, click the symbol and go to this one that says push overrides and push overrides. And now over here girls girls girls all update if I save it. I jumped to the other one. We've looped back to the beginning. Look this guy is going to say I'm blue. You still can't click him but I'm going to update all. Let's see it first because there's two updates that's going to go green. That's going to change the register. Ah look at that, tied it all in a nice bow symbols. Across documents, symbol replacement might have a different navigation. You want to switch out. You might have a light and dark one. You can select inside big groups or inside symbols by holding command or control and updating. Text. Everything else updates automatically accept text. You need to push overrides and you can do that by coming out of the symbol. Right, looking at push overrides. Alright my friends, that is your advance symbols tips and tricks video. Let's get into the next group of videos. The next are my most exciting ones. It's late in the course, but we're ready for them now. All right, what is it you'll see in the next video?
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