Skip to main content

Advanced Asset Panel

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

Daniel Walter Scott

Advanced Asset Panel

Lesson 68 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 2000+ more >

Lesson Info

68. Advanced Asset Panel

Next Lesson: 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 Asset Panel

Hey there, this video is all about advanced asset panel tricks and tips from the title. You might be like, what is this video going to be all about? Basically it's just kind of stuff. We've got to a point now in our skill level that we need a few helping tricks and tips, especially dealing with outboards and the asset panels just to make our life a little easier. Get on with it dan. Okay, okay, let's say we're working with more than one project. I'm going to copy this whole art board by kicking the little dotted line, the name, I'm going to copy it, I'm going to make a new outboard, whatever I'm going to zoom out so you can see what's going to happen. I'm gonna paste, it will bring in the whole outboard, let's say we bring it in. It's brought in a few symbols. Okay. Because I had made them in the other products. But what you can do is, you can actually just right click the name at the top, it doesn't matter how far away you are. So right, click the name of the top and say actually let'...

s add all the colors that we're using. Cool, huh. And actually add all the character styles as well. So that might be a great way to get started with a project or at least create all the colors styles you need character styles you need and all the colors from it. So that's trick number one, just robbing everything out of it. So back to my original one here. The other one is you might have noticed that you can actually search the assets. You can use this drop down and say actually just show me the colors because they can start getting really long. Right? Actually just show me the symbols. Okay, because if I go back to all, you'll notice to start having to scroll and lots going on and this is not a particularly big one. We've only got four main pages. Right? So that's easy. You can just kind of, you know, cut it down to maybe linked symbols. Cool. You can also do searches in here. So all assets, let's have a look at. Just, I just want to have a look at Roberto. Okay, just the stars have a rebuttal and I might be doing some font changes now and it just cuts them down nicely. You can type in hex values. Okay, so the colors, so you might be just dealing with this. I'm going to right click this, gotta copy and just paste that in there. Is that useful? It's totally not useful because yeah, anyway, you get the idea, you can just go to colors rather than only have one option. Good big man. So I'll take that away as a tip. We've still got to though. Let's look at one more. Let's say that we are dealing with this color and you're like, where did this come from? And I actually use this color. You can right click it and say highlight on canvas and watch the watch all the outboards over here. Ready? Highland campus. Can you see they all got a blue line around them, the ones where it's being used. So you can instantly say, yeah, it's been used and maybe I'm going to go and change it now. Going to edit and pick a different color. Getting an undue because sometimes it's just useful to see where it's been used. This one here, right like this and say hello on canvas. Where did they highlight only one. Okay, there. That's it. I created it before and I haven't actually used it. What if I'm really useful for as these symbols you like? Where did that come from? It's got a weird name. Right click it and say hold on canvas. Sit on the bottom here says there's zero copies of the symbol found. So that can be handy. Like actually good because I didn't want you anyway. Goodbye this one here. Let's go to highlighting canvas. That one is used. Where is it highlighted? Let's try it again. Highlight on canvas. Zero symbols. Cool. So I can delete that one as well. Looking forward to an option in here that says, show me unlinked or unused symbols, unused colors. Clear all unused would be handy. Not yet. Another way of working. And now another trick is let's say we're in here and we want to see where's this been? If I grab this, I right click it. I'm gonna say reveal color in assets and it shows me scrolls up, finds the color that it's being used, which is handy if it is a symbol, let's say, what do we know is a symbol? You know the image icon? Has he been used anywhere? Got rid of a lot of my symbols? What I've got. Oh, navigation clearly then. All right, click it. You can see the difference in here. It'll show me the colors that are in there, but also show me things like that character styles that have been used. You can see it's using all three of those in this little group here. It's going to show me the symbol in the assets panel. Okay, so I can see it in here. So that's kind of handy when you're dealing with other people's, you like it and you want to grab the symbol or work out what the name of it is. Works the same way with fonts. Right? So this one here, if I right click it, we've kind of looked at this, but I want to show you another one right click it, show me that there's Roboto, which is cool and this one here you'll be like, okay, show me the character style and I go into here and I'm like reveal colors but it won't show me it won't say reveal the character style because I haven't made one, you'd be like actually let's just add that one to my styles because I've used it a few times now. It's the same, very similar to one of my other styles, but it's green. I don't like it in green. I wanted to be gray now, but hey, we're too far. So those are some handy tips and tricks for the asset panel. Let's get on to 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