Pattern library with symbols

- [Instructor] Anytime you need to reuse elements, you can use symbols. In the project, you can see I have some symbols already created, but how can I make one? So let's get there. So I'll zoom in... to this area, and here I have one rectangle with rounded corners of four. Another rectangle here, and I have a text on top of it. And this should be a symbol. This should be this item that can reuse overall in my project. So if I select this guy in the background, and I right-click and say Make Symbol, now I have it in my symbols panel and I can then drag and create multiple instances of the same symbol.

I'll do the same with this guy. So select both the text. Hold shift, right-click, Make Symbol. Now I also have it there. And now let's add them to different of areas of your project. So I will have one here. I will align another one here and I will align it. I can then copy and paste here. Holding out. And you can see I'm using the grid to make it fit, and it'll look nicer.

I can also move it to my mobile design. So I can copy this and paste into that artboard. I'll do the same thing with the black one. So copy and paste. And then I can align them... to fit my artboard. That's nice. And I can zoom out. Hold option, click and drag. Hold option, click and drag.

And you can see the grid is helping me to place them in the best place possible. Wonderful. Now let's say you want to customize your symbols a little bit. XD gives you that power by letting you override text. So anytime, I can say let's say for some reason this button needs to have a different text. I can then double-click and have different text. And this is overriding only this button.

It's not changing all the other instances. This is very, very powerful. To show that in action with more detail, let's create some cards here. So, anytime we need to manage callers and typography, make sure use the asset panel, but anytime we need to manage components, let's use symbols. So let's select this guy. This entire thing and I will right-click and Make Symbol. Now I'll create one instance that will go here and another instance that will go here.

I'm holding option to create that. Remember I had my content in text files. Let's go there and let's select some things. So here I have a testimonial for the designer. So I have one testimonial from a designer, one from a developer, and one from an executive. So I'll grab the one from the designer, and I'll drag you here. So now it's overriding the text only on this instance of my symbol. I'll do the same thing for the developer, and I'll do the same thing for the executive.

I can then drag an image to be the image of my designer. But you can see that now that instance is replicated here and here because that's now the fill of my symbol, but I can override not only text, I can also override images which is really powerful. So if I have another bitmap, I can then override just that, and that's also true for the executive.

And I can then say... This is... my designer. Another trick here, another tip here is that if you need to direct select anything in XD, you can click on the element you want and hold command and select that entirely. So I can say this is my developer. I can direct select this one. This would be my developer.

And this is... our executive. Wonderful. So now I have my cards with very specific content using the same symbol structure. Meaning that if I come here and I change any behavior, that's replicated throughout the whole symbol. All the properties are global to the symbol, but content here can be unique, and then you can use elements. Just remember, if you need to manage colors and typography, colors, character styles here on the asset panel.

If you need to use components, make sure you create symbols and reuse them in your project.