A design system is made up of a combination of colors, fonts, text styles, layer styles, components, templates, and even instructions. In this video, Join Drew Bridewell as he demonstrates adding elements to your DSM library.
- [Instructor] Now that we have our sticker sheet all set up, it's time to start adding these elements into the Design System Manager. So to do that, I'm gonna go over here to my Craft Manager and I can see the icon that's a hexagon with a circle inside. I'm gonna click that. That's gonna open up my Design System Manager, and right away, I can start zooming in to my sticker sheet and I can see my brands, I'm gonna zoom out just a tad bit so you can see. I'm panning over, so the first thing I'm gonna do, is I'm gonna select the colors that I want to add to this system, so my colors selected, and I'm gonna hit the plus button.
Now I'm gonna call this Brand, because these are my brand colors that I wanna use for this system. You could always rename this at a later time, but I'm gonna go ahead and continue. So I'm gonna add these now, and I can select the colors that I wanna add, so it's in auto-select all of them, I don't have to hold Shift, it's just gonna add them to the library, and it is trying to be really smart here by bringing all the other global colors that are inside my Sketch document, so if you have multiple Sketch documents open, and you wanted to open up your Design System Manager, it's gonna pull from that specific file, so I'm gonna add the colors now.
Now they're inside the system, so if I make my design system manager a little bit wider, you can see that they're in here. Now, the cool thing about this is, I'm gonna come in here and rename these, and if I rename these like Primary Pink, Dark Blue, and I'll just leave the other ones, it's gonna automatically reorder these to alphabetical order, but if you don't like that, sometimes I like to reorganize it manually. That gives me the power to be able to switch these the way I want to do. And InVision's giving me a little notification that'll make sure that I'm sure I want to do this, so I'm gonna tell it not to remind me again, switch to manual.
Now, I have the ability to drag and move these around. Now you want to name these actual names versus hex values, because when your engineers use these inside the design tokens, they're gonna be naming things as variable, and not as hex values. So if I was to toggle back to my web experience, you'll automatically see that my library is already out of date, and I can refresh this, and my items are inside the tool, right away. Now the cool thing about this is, if I was to want to be able to name these, light blue, and hit Return, it's already renamed inside of Sketch.
Now, this is helpful when you have multiple people working on the same library, and you need to be able to get up to speed really fast, so that's colors. Now, if you wanted multiple sections, which I do, I could just add those and get those on the way, but let's go ahead and continue to text styles. Let me just scroll this, move this a little bit smaller so you can see. Now, text styles inside the system are all made as text styles inside of Sketch, so whatever Sketch file that you have open, you just want to make sure that you have text styles set up.
So here, I don't have to select every single text style to get these into the system. All I need to do is select my text styles, and hit the plus button, and it's gonna pull all the text styles that make up my Sketch file, so I'm gonna select all, and add these to my library. Now that they're added, again, I can come in here and change this to Sort Manually, which is what I typically do because it shows me the larger text files and it's just a little bit easier to read. So you have that flexibility.
So let's continue. So now I'm gonna scroll down to the layer styles. Now, layer styles are often used when you have backgrounds and a lot of different box shadows and elements that you're using throughout your art boards. This is what you would want to use when you are having a design that has multiple backgrounds being used across your art boards. You would want to use layer styles over colors because layer styles are linked. What that means is if you make one change to this gradient right here, it's going to affect all the other art boards that are using this color, so let me add those to this system, and again, you don't have to select all of them.
You can just select the layer styles, hit plus, and then get those into the system, so here you see all the ones that I've used, add shared styles, and as those load, now I'm ready to start using this. All right, now let's move on to icons and then components, and then I'll show you how to start using some of this stuff. All right, so we have our icons. Now, I could add all the icons at once, but I'm just gonna start with the core black, so I can just select these icons, come over to my sections button, instead of me creating the plus button up first, this time, I'm gonna create the section first, so I'm gonna call this Core Black.
Now I have my core black. As long as I make sure that I'm selected on the right state, then I can just hit plus, and now they're in the system. And if you end up choosing the icon's top-level folder, it's gonna ask you to name the section first, so that's really important to know. So then if I wanted to be able to use this, all I have to do is drag it out and I'll be ready to go. But let's just zoom out on our sticker sheet and add a few more components and we'll be on our way. So now, I want to add a ton of different components.
Now, the cool thing about components are, these components have a lot of different things inside of them, so inside of Sketch, you can have multiple overrides and nested symbols inside of specific components. Now, all you need to do is create your components, and it's gonna ask me to create a section, so I'm gonna call this cards, cause these are all my cards inside my design. Now, I want to remind you that every single nested symbol and override that you add into Design System Manager is going to be maintained, so you're not gonna lose out all that cool functionality that you created when you were designing this in the first place.
Let me show you what I mean by that. If I zoom in on this card that has the 40, it's a chart box. If I select this card, I have a lot of overrides set up. Now, an override is a simple text edit change or color change that I have inside my system, so if I change this from 15 to 20, it's going to automatically change that number, but I would just have to add in the percent, too, that I have here, so that's an override. All that's gonna be maintained when you add that into the system, okay? So now I have this, I have cards set up, and I could add as many sections as I want, and I could be able to start utilizing this right away.
So I'm gonna zoom back out, and then create a new art board and just show you how to utilize some of the things that we just created. So I'm gonna hit A on my keyboard and create a new art board, and then if I wanted to use one of these components, or if I had a template that I had set up, all I need to do is just drag this out and it's telling me, hey, I'm adding a symbol to the document, and it's just letting me know, that there's nests inside, okay, thanks for letting me know that I'm ready to go, so these are inside the system, now I can utilize these, and if I make any changes, it's going to be maintained on my art board.
Same thing with my other elements, and if I have other layer styles where I've started creating shapes, let me zoom in just so you can see, all I need to do is select those, and I immediately get to benefit from all that hard work that my team put in from buttons to background colors and box shadows. So I go text styles, I'm gonna hit T on my keyboard and draw a text style and say, Hello world, and I'm gonna make this so you can actually see it, and I'll resize this up, and you can see that type that I changed, and if I wanted to quickly toggle this, I could easily do that, just by selecting the new typeface, and then from my colors, so I have this shape color, I can just go into my colors and change this as well.
And that's how easy it is to add elements to DSM, and to also use use them inside your art boards.
- Creating a new library
- Adding and editing components
- Adding context to your components
- Adding your design language to DSM
- Inviting team members to use DSM
- Setting roles and permissions
- Releasing design system versions
- Pulling the latest library inside of DSM
- Additional pro tips inside of DSM