Skip to main content

Advanced Symbols

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

Daniel Walter Scott

Advanced Symbols

Lesson 69 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

69. Advanced Symbols

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

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

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