How to make & use symbols in Adobe XD – UI/UX & Web Design using Adobe XD [12/42]

How to make & use symbols in Adobe XD – UI/UX & Web Design using Adobe XD [12/42]


Hey there, my name is Dan Scott. This is one video from
my larger Adobe XD course… which you can check out on
bringyourownlaptop.com You can also go in there to download
the free exercise files… and the free cheat sheet if you like. All right, enjoy the video. Hi there, in this video we’re going to
look at Symbols in XD. Why are they good? It’s because
when I’ve got a symbol… you can see here, I’ve got the Navigation
used on more than one page… and when I update it,
they both update and change… which is super helpful for
things that are reused… across lots of documents,
like Footers and Headers. Let’s go and look at how
to create those now. To create a symbol, we’re going to
reuse both this Header and the Footer. So I’m going to create a new page. There’s lots of ways,
I keep showing you different ways. I’m going to go back to the Page tool… and click on this, which is my default
that I used at the beginning. I’ll drag it by dragging
the name underneath. And I’ll give it a name, I’ll call this one
‘Instructor Dashboard’. And I want to extend it out
just a little bit. So, remember, the benefit for
using a symbol is… I can connect them all together… and whenever it updates
to the navigation… say on this Home Page here, it will update
for all instances of it. I’m going to zoom in here. What I want is, I want all of this.
So I’m starting up here in the gray area… with my Black arrow, I’m just
clicking, holding, and dragging… just a little across, like this
top little wee bit. And what I want to do is… you can see, I’ve selected lots,
but I’ve also selected… this blue thing that I’m using
to kind of give me my width. So I’m going to hold ‘Shift’, and just
click on him to get rid of him. So I’ve got everything along the top here. How do I know?
I kind of drag it off to check. They all came along for the ride. So what I’m going to do is… you might be on your Layers panel… you want to go to this top one here,
the Assets panel. Within here, it’s something called Symbols,
click ‘+’, and that’s it. That is now a symbol that I get to reuse. So let me click, hold, and drag it. And that’s useful, I guess, I got
a nice little thing that I get to reuse. But I could have copied
and pasted, I guess. And what’s really useful is… now if client comes back and says,
“Actually you’ve spelt login like… Some people use login as one word,
it should be two words, it’s up to you. Let’s say we’ve been convinced,
and it should be log ‘space’ in. So we’ve done that… but by default it actually
becomes a unique symbol. So this one here, has not changed yet. So what we need to do is
right click this fellow, and say… ‘Update all Symbols’. It updates symbol of the library. I’m going to have to zoom out. This one here, ‘Command 3’
to zoom in on it, maybe a little bit more. And you can see, it’s ‘Log In’. So that is the perk of symbols. You get to link them to this thing,
so they easily drag out, and reusable. But what’s really super useful is,
you’d update one, and it updates them all. So obviously good for navigation. Anything up here is on all the pages,
so I’m going to do the same down here. I’m going to grab you, my friend. I’m going to ‘Shift’ click this guy,
so I’ve only got this selected. I’ll just check that I’ve got it all. And I’m going to go to ‘Symbol’,
I can’t name them yet. Our icons are a little bit small
for this one, that’s okay. Is this the right page? It is. Drag him on, in here, and there you go. So if I update one now,
they’ll both update. Couple of things I want to do
to finish this off. I want to put that big blue stripe
in the background… so I know where the edges are. So you, copy, and over here, paste. Wrong one. So I want you, and go to unlock it. Copy it, lock it again. Then come over here, click on
this dashboard, and if you hit ‘Paste’… the cool thing about it is
it goes perfectly where it should. The only trouble is, it’s probably
on top of everything else. So I’m just going to
right click it, and say… ‘Send to Back’, and then,
I can either use… ‘Command L’ or ‘Control L’,
I can right click, and go ‘Lock’. So this gives me my boundaries,
what I need now is a left hand menu. So I’m looking at my hand drawn
Wireframe here. So I want that Left Nav… and I’m going to jump out
to this thing here… and I’m going to find a left hand there.
Where can I see one? There’s a Navigation over here
that looks good. It’s going to be my starting anyway. So I’m going to grab you. Awesome. Copy it, drag it across,
paste it. That will be my starting for this one. I’m going to ungroup it all,
because of a few things I need to do. For you at the bottom, I’ll have
to tighten it up a little bit. And I don’t need the word ‘XD’ there. I do want the word ‘Dashboard’. So I am going to probably
delete you, you… Moving at the top, I’m going to
make this with dashboard… but I’m going to use my 14. That’s 75%, bad habit, you got to be
at 100, so you could do font sizes. This one’s going to be dashboard. ‘Dashboard’. And I will make this bold. Cool. Underneath here–
actually I’ll make this ’16’. Using 12 and 16, they kind of
differentiate heights. Now what I’ll do also is grab my Type tool. Click in here, I’ve got some text for… This is the text we’re going to use
with my guy there. I’m mumbling now, because I’m
just filling in forms. To be honest, if there’s going to be
any more genius in this class… that you might want to hang around for… I think I’m out of genius. So I’m just putting these in. What I might do is put the
little dots in the front… to make it look like something new. Remember, there I am putting in… it’s holding ‘Alt’, and hitting ‘8’… or ‘Option 8’ on a PC. This doesn’t have bullet points
to start with. So Dashboard, you, for the different
things we can choose. Awesome! One last thing that’s on my little
hand drawn Wireframe here… is I’ve got that little ad
from the Home Page. Now there’s not a really
easy way to jump between pages. You can use the Layers panel, go back
to here, and go back to Home Page. It’s not that great, I don’t think. Hopefully, one of the upgrades will give
us a feature like that. So here– I’m not sure why I’ve come back
for this bit of text, but I did. So we’re going to use it. It’s going here, just a little bit more. Paste. And this is going to go in this
little area here. Now I think this needs to be bigger… because I’m going to have longer names
in there definitely. Download the ?? thing,
maybe even smaller. Here is actually, zero genius coming. The last thing we’re going to do is… because we’re going to use this across
all of the Instructor pages… we’re going to turn it
into a symbol itself. So we’re going to drag a box
around all of this. Deselect the lighter blue color,
and say add symbol. All right, that’s going to be it
for this video. If you’ve waited till the end,
you are awesome. That got a bit painful there
at the end, I know. But the next video is going to be awesome. We start doing Repeated Grids. Oh my goodness, it’s awesome! Let’s go and do that now
in the next video. haere rā. Hey there, please ‘like’ the video. Consider subscribing to
my YouTube channel as well. If you want the full course for Adobe XD… check out my website
bringyourownlaptop.com That’s it. Bye now.

4 comments

  1. Hi gr8 tut man …really enjoying the course right now,
    I cant add the bullet points to the dashboard items for some reason, i am on windows n trying the alt + 8 key but nothing happens
    cud u help plz

  2. You have 2 files? 1 is for the ui kit and the other one is your ui design or the pages of the website? or its all combined in one file uikit and ui design? does affect your pc performance for having tons of components?

  3. God dammit! Everyone says to click the "update all symbols" button but it's not there for me. pisses me off.

Leave a Reply

Your email address will not be published. Required fields are marked *