UX/UI Digital Design: Building a Design Library for Sketch | Michael Lemma | Skillshare

UX/UI Digital Design: Building a Design Library for Sketch

Michael Lemma, Designer & Photographer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (2h 14m)
    • 1. Intro To the Course

      0:59
    • 2. What is a Library?

      5:00
    • 3. Creating a symbol

      8:17
    • 4. How to Changing and add Color to your library05

      11:05
    • 5. Creating Text Style for your library

      12:11
    • 6. How to nest items inside of each other

      16:16
    • 7. How to set up your library for pinning

      12:02
    • 8. Nesting inside of Nesting Components

      18:45
    • 9. Creating Dropdown Components for your library

      11:49
    • 10. Creating and Working with Swatches

      13:43
    • 11. Setting up spacing for your library

      4:26
    • 12. Preparing your file for Development and the design team

      11:48
    • 13. Bonus Video Resources

      7:10

About This Class

I've been a UX/UI design for ten years. In that time I've learned to build intricate libraries and design systems that are used across design teams. 

In this class, we will learn how to create libraries with symbols nested symbols, and text styles. After created items, we will learn how to organize and prepare the file to be used with other on your team. Finally, preparing the file to be handed off to development 

I will also show you different assets you can use instead of creating them from scratch this includes various plugins.  

One we build a library, you can use these elements to build a full-page design.

Transcripts

1. Intro To the Course: Hey everybody. So we're gonna be talking about this class, how to build libraries. And these libraries can be applied to your projects, mobile app designs, web designs, and we're going to be going into detail on how to build certain buttons, styling, and making different types of styles like a default hover primary, I'm sorry, pressed and disabled checkboxes, cards, toggles, anything that you might need in your project. We're gonna go ahead and build right here I have a document as an example of something I did when I worked at JPMorgan Chase that I've contributed to. And I'm gonna go ahead and do something kind of similar and show you how to build a really intricate library that you can use with your team on your own personal projects. So with that being said, let's go ahead and dive into the next course. And we're gonna go ahead and learn how to build awesome libraries in sketch here. Alright, I'll talk to you guys soon. 2. What is a Library?: Hey everybody. Okay, so first-class, what is a library? While he sketched before? I'm sure if you come up here to the file section and you've come down and you say open from template, you'll see that they have these pieces that you can use in your designs. Now they're very limited What's available, but there are pieces that you can use in this particular case, stuff from Google, Material Design that I believe sketch accompanying aid, not Google. And then you have other pieces like you have here, that's Apple. That shows different pieces and elements that you use like navigation bars that are dark and light, Search Bar, Status Bars, anything related to system elements, keyboards. So that is what a library is, building these components and using them in your designs. So just to give you a quick example, I'm going to open a new file and let's use the Apple example here. And so if I go ahead and click one of these, I could put it in. And voila, we have a design here that we can start editing and adding things in. And the purpose of the class is to show you how to build these things and how to make the complicated elements and here available to UT, use for yourself or a team that you're working on. Libraries are very, very powerful. They're very intricate in design. And if you are well organized, you can make really, really awesome libraries that can be reused within your projects over and over and over again. With that said, because this is sketch, sketches generally in the industry standard right now, I think the industry is shifting towards sigma. You can, there's hot debate there whether it's a good program to use or sketch is still a good program to use. But minus, you know, the, the controversy there, the system that we'll be building is kinda the same all around no matter what type of programmer using, whether it's XD, sigma or sketch, the building processes essentially the same. It's just the tool that you're using might have different ways of doing it. So in this particular class, we will be doing it in sketch. But what you learn here doesn't mean you can't apply it to the other programs. So I'll show you how to build these elements and components. And as I said, a component is a piece that has different elements in it that you can use, like text elements, icons, more text elements, images. You could do a lot with components and make them really interchangeable and really powerful. And then when you take this library and you apply it to other projects and you make a change in the library. Those changes will cascade across everybody's project. So you're really designing, really smart. It's smart design. I like what I like to call your, your thinking ten steps ahead. You know, you're not just doing general folders and then going in and editing something 50 times, you know, a libraries to help you use elements that are common across her designs, as well as trying to think a little bit down the road and saving yourself headaches and making things scalable. In the sense that if you need to add to the design, you can and building your design even better and better and better. And getting to that final look and feel of what you want from a project standpoint. So with that being said, that's generally what a library is. Now, there's two terms, UI component library and Design System, two separate things. We're gonna be focusing on the UI component portion, which is what you see here. And I'll just throw in another one here just to give you another example. Could be a good word here. C. So buttons, there's a whole bunch of buttons here for Apple, but different size buttons. And if you come over here you can see all the different types of buttons that you can utilize. And I'll show you also where to get these pieces for Apple, google, and things like that. There are resources on the web and we'll get to that in this class. So that way you don't have to build things from scratch. You know, the purpose of, again, a library is to utilize all these components and use them across your project. But why reinvent the wheel if there are certain things that are already available to you on the web. I don't. I'll show you where to get those things and when it's appropriate to use them versus when it's appropriate to build something from scratch. So with that being said, let's hop into the next class that actually gets started. Alright, talk to you guys soon. 3. Creating a symbol: Go ahead and dive in, actually start creating this library. Today we're gonna be starting with buttons, make it really, really easy for you to understand how it works. And then we're going to dive into a more intricate way of building a really complex library system. So I'm going to show you two ways how to do it. First and I'll show you the easy way. And then we'll kind of get into the little bit more challenging way. So first and foremost, you're gonna come up here at the top bar that you have. Here are things you can do within your canvas area. If you haven't used sketch already. Everything up here allows you to edit things on your canvas. This is the page area where you can add pages. And this area here is for you to heavier shapes and text. And essentially your layers will show up here on the left. And then everything that you need to do from a colour perspective or, or outline or text will show up here on the right. And you'll see that as we're working through. So let's go ahead and dive, right I'm in. Let's go ahead and create a shape and distract the shape onto the actual canvas. Nothing too crazy. You just click and drag and come over here to the right after selecting your shape. And you're gonna see all the properties here. So we're going to have the area that it's based on X and Y. Sizing radius, you can change the radius of it. Resizing are pinning essentially. We can talk about that later on, would actually be doing prototyping or fixed positioning. So we won't get into that, but we will talk about layer styling and appearances. So that'll happen. You have your capacity here, phil. So essentially you're coloring that you can change the button two and border for an outline. Just a little tidbit every time you create a shape, fill in border will automatically be added. So make sure to keep an eye on that border section because sometimes you might not want an outline and what you're doing. So make sure you uncheck it so it doesn't default to having a outline when you don't need one. You can add your shadow here, your inner shadow, and a blurry if you need to blurt something. And then you can make it exportable as well by selecting the item and clicking export. And we'll get into that later on in the course. This bar here is a plugin called craft. We're not going to be using that right now, so just ignore it. So let's go ahead and continue on. Alright, so we're gonna go ahead and go back to this plus icon. And as you just saw me, we're going to go ahead and select the Text tool and we're gonna go ahead and click inside are actually not inside of it anywhere on the canvas. So click inside, it's fine. It's gonna say type something. So start typing what you want the button to say. In this case, let's make it really easy to do. You're gonna see to handle points here a left and a right. This allows you to stretch the text to go anywhere on the screen from left to right. In this particular case, we're gonna go ahead and make it the exact same width as the button. Now I'm doing this because I'm thinking down the road. In terms of Button resizing and pinning, which we'll talk about later on it. But I'm allowing for that to happen. So if down the road, we need to adjust the button size like this. From a symbols perspective, it will adjust proportionately to the center as you can see what it's doing here. Now. Now that we've established that we're gonna go ahead and select the text. We're going to come over here and you can go ahead and change it to wherever you want. And we haven't set it opened stands right now. I'll just make it I'll make it bold, make it easy. And then I'll just a text to be, let's say 14. Maybe a little more than that. And as you saw here, you can adjust this to have purple guides to tell you when it's centered or what it's not centered. Now, right now, the text is centered a line, but you can set it to be left to line, right align or justified in this particular instance will make it centered. Down here, there are a couple options that you can do. You can do a strikethrough and underline. You can also do all caps or all lowercase. In this case, let's make it all caps. So now that that's done and we've established the button that we're going to create as a symbol. Now let's go ahead and create the symbol. I'm going to be skipping actually a couple of steps here because I want to show you the easy way of doing this first and then we're gonna go into the complex way later on, like I said earlier. So we're gonna hit create symbol. And this is kinda where the magic really happens and sibling in creating your system. What they really don't explain to you is that you can essentially create a library inside of a library. So by that I mean, we haven't button here, so we're going to call it button. And then we're going to do forward slash is a little bit, I wouldn't call it coating here, but it's really simple. So button is going to be the parent name, forward slash the color we can say. So forward slash black. Or we can change it to something called default because that's what it is. It's a default style for slash, maybe the color. I did it backwards, but at time, you know, you could do however way you see fit that works for you and your organization. Once that is done, we're gonna hit create. I set it up this way because in future lessons we're going to be breaking this down. So I like to establish it now how to name these? It's really important to do this because you're going to be adding more pieces to this button and forward slash, default, forward slash. We might call it white when they click something else. And I'll get into that later on. So once you hit create, your symbol is created and you'll see the little arrow icon here. And it kinda does little circle thing and your button is now an individual element. So you cannot edit the button here. In order to edit the button, There are a couple ways of doing it. You can go into the symbols panel down here in your pages. This makes a little bit longer by clicking that and you'll see your button. Or if you're on your page, you can either double-click it. Well, double-click outside the text area. And I'll take you to the symbols area, or you can just hit the return key and it'll take you to your instance or symbol. So with that being said, the symbol is now created. And now what we can do is if you needed to make a change to that symbol, let's say we have three buttons across the page. And for some reason the button needed to be a different color. They can come in and change the color to, let's say, a gray. And then if you do that, you want to come in here and change the name so it stays consistent to the color that you've changed it to. Let's say if we did blue, just make it easier. So to make it blue, we changed the name to blue and then you select your glue. And now if we come back here, all the buttons are blue. Same thing with the text. So once you make one change, it cascades across everywhere. Now what happens if you want to overwrite that change? Well, I'll get into the coloring later on. But in terms of text, very straightforward. If you need to override the tax and you don't want it to say button over here, there's overrides panel. You're just coming here and call to name that it is. So we can call it continue instead of button. And then maybe this one's gonna say back. And maybe this one will say start. Keep in mind, these elements are not overriding the word button. Because if we go back into the actual instance or they assemble, it still sends button. We're just overriding the text on that button. So we can reuse one piece and use it over and over again, but change the tax, not all of them. So that's really how you're going to create the journey of starting your library here. So that's it will get into the other detailed stuff later in the next class. And I'll kinda explain habit change colors and stuff like that. Right top DEA has an excellent 4. How to Changing and add Color to your library05: Everybody. Ok, welcome back. So we've created our symbol for our button. Now I went ahead and I just alluded to the other two and I have just the one button here. And I did a slight name change and add button slashed normal. Just for the sake of this lecture that I'm going to be telling just so it's easy to understand. So there are actually a couple different ways to change a color and a button. There are actually three ways. So I'm going to go over each one individually. So we have our button with our normal state. If we come in to our actual symbol by hitting the return key or going to the symbols page. We're gonna see our button here. Now. We're going to have this button have three-stage, right? We're going to have a normal state, oppress state and a disabled state. So if you want to change the color and let's say Make this button darker. We're gonna go ahead and duplicate this button by dragging it over to the right. And we're going to call it pressed. And we're gonna go ahead and select the color. We're gonna go ahead and make a little bit darker in the fill section here. So that's changing the color there. And we're gonna do that again. We'll call it disabled. And we're gonna go ahead and go ahead and do that and change the color here. And there you have it. So we have our button that has three different colors. And we have our normal blue, light blue, or dark blue to light blue. And if we come in here, we're gonna go ahead and see from my drop down that we have all three buttons disabled, normal pressed. So if I go ahead and select it, the color is changed. And if I go here again, select again, the color has changed. So that is one way of changing the colors a couple of different ways by making sure you name them properly. And it doesn't have to be pressed disabled and things like that. You can call it button orange button blue, black and change the color via that way. Second way is, we're gonna go ahead and duplicate it again in the symbols panel. And this time we're going to call it button swatch. And as you can see here, we have a shape that has a color. But there is a layer style here where you can start adding different types of switches. Now there is multiple ways of doing this. And this is actually probably the, one of the preferred way to do it, but I'll kinda get into that in the next button. But it create. So what you can do is you can actually go ahead and create a swatch here. And we're going to actually create a symbol of it on the actual page, and we'll just call it swatch. Flash will give red. So because I've created that, I don't need this here anymore and because we're in the symbols page is created a copy of it. And I'll just put it next to here. And I'm gonna go ahead and select the red. That's a little bit orange. Let's go a little bit darker. And woman do is I'm going to come up here to Insert. And I'm gonna go and document swatch. And I'm gonna go ahead and put it into my document here and put it underneath everything. And just make it the size of the button. Now in order for this to work so you can see what I'm doing. I'm going to duplicate this swatch. And I'm going to call it blue here. And I'll switch to the blue. We don't need a believer in this one, so I will delete that. So now we have a red and blue. So now if I come back here, if I add my button, because it's not going to be the one that we created. If it come here, documents, buttons, we're gonna see disabled, almost pressed in swatch. Select swatch. We put it here. And then if we select the button, we come over to the right. Now created another section where you can select from the items that you've made. So we've created Blue and we've created red. So if I go and select blue, and it will switch to the blue. And then we can switch it to the red. So that is another way of changing color in a button. It's a two step process by creating the swatches and then adding this watch and tear symbol and the switching it out. Now the third way, and actually the most preferred way to do this is using Layer Styles. So by using a layer style, you don't have to do any of this. You just have one button. And everything happens in one single source of truth. And it doesn't mean you can't do this in your library. This actually might make sense if you have certain types of colors that do need to change in a particular item. And we'll get that later on. So with that being separated duplicated button again, and we're going to just call it button. Button cobalt blue. So we've done our normal press disable, we've done our swatches, and now we're gonna do a layer style. So if we come over here, you're going to see the layer styling here. You're gonna go ahead and create a Layer Style for this blue. So if I go ahead and hit Create, it's gonna go ahead and take all the elements that I have here. And it's going to, it's going to create the style here, but you're going to name it. Instead of calling it rectangular style, let's call it what it is, blue slash home. And then we've added a layer style. But in order for you to see how it works, we're gonna go ahead and change it again. So we're gonna go ahead and change the color. And by doing so, because it's a layer style, it's gonna give you a little asterisk. And now this asteroids is basically telling you, hey, you've made a change to the color blue. Do you want to change it to orange? And if you do, you hit the update, buying it updates. In this particular case, we're not doing that. We're creating a brand new one. I'm just changing it so we can easily just add it in here. So if I hit Create a New Layer Style, it's gonna duplicate what I've created. And then we can call it something else, button slash about right. Or we can call it the same color that it is. But just for the sake of Examples come in here. Let's add our button. So now here's the home. And if we come here, now we can see our home and about that are here. But at this particular case, there is no watching that you were swatches, I should say that you created more, created a layer style that's in the system itself. And you don't have to worry about managing, you know, ten or 20 different color swatches. It's all done here. Now VD to change the name or anything in the swatches. If you come up here in the Components panel, come over here to show Layer Styles. You'll see that we've created the button. And then the two swatches about home, so we can actually change it to the colors that we've named it. And then if I go back to the page, blue, orange show up. And then we can change it back and forth. And then we have our other button with the swatches, with the nested component with blue, red. And then we have are ones that we can select individually. So in this particular case, we created three separate symbols that we can go ahead and create an if you look here, we have the disabled Duomo pressed. But for all intents and purposes of organization, you really just want the one button that we've created, right? The, the home one, the orange and blue because it's a single source of truth, right? You don't need to do three different symbols for one button. You don't need to do the swatches. As of yet. You wanna do exactly what I was just showing you, which is creating the Layer Style and changing the color. And if you need to add another color, you literally just come into the button. The Select the shape by hitting the command key. And make sure layers are here so you can see what you're doing. And then you can come in here and change the color again if you need to write so we can select a teal, let's say, and I add it and say t. So this is the preferred method of actually creating layer styles within a button. Like I said, it's the single source of truth. So you don't wanna do this because it creates a lot of chaos in your document and your library. This only comes in handy having the separate pieces if you're making different states where things right, like showing a drop-down, showing the selected state, showing a checkbox on and off, things like that. And this type of scenario, you want to use this scenario if you need to change certain swatches for branding purposes, right? So you can use it on buttons if you want. I don't recommend it, but you can use it. On other things, icons. You can use it for different purposes. Like the swatch can actually be an image and switching the image in and out in your file. And maybe you have a profile image. You need to switch out to a boy from Boise River or something like that. So they're different applications you can use it in. It's just a question of how you use it. And we'll get into the more complex stuff later on. But this is the preferred method of actually creating your button styling. So there you have it. That is how to create different colors. And what we'll be talking about next is actually going a step further and doing textiles and actually adding more life and detail to our document. All right, so I'll see you guys in the next one. Looking forward to it. 5. Creating Text Style for your library: Hey everybody. Okay, so we've created our buttons. I showed you how to change the colors and three different ways. Now I've gone ahead and deleted the other ones and my symbols page because I don't need them, right. The preferred method that I showed you was the changing of the layer styles here by adding a layer styles and selecting the actual shape and then coming in and creating a new layer style. I've gone ahead and just change them to match what we did before, which was normal precedent disabled from the orange and teal. So I just went in simple change and by doing that, very, very easy, you just come here, come to more, hit renamed style, and then just change the name, change a color. So this particular instance, if I want to change this color to a lighter blue, it's gonna give me the asterisks and I can hit update and then we'll update that biotin. It's color on the main page. But in this particular case, I don't wanna do that, so I'm just going to undo that. So what we're gonna be talking about in this lecture is actually going over textiles. Textiles can get very, very complex when you build them. But using lamb is actually really, really beneficial to you and your library. So how to add a textile? Well, textile is pretty simple to add. We're going to do is you go into your symbol here. You're gonna go ahead and select your title. And you're going to come over here to textile. We have our text set as Open Sans, semi bold 16, character of 1.52. We can make this 0 if we wish, or we can add one. It's your discretion. But if we come over here, like I said, you want to grab those handles and make them left and right. And what we're gonna do actually for this textile is we want to make sure that it's centered. And I'll get into that as to why later. So creating a textile just like layer cell that I showed you before him were changing colors. By creating a textile. You're going to come over here and select Create textile. Just like the color. It's going to ask you to type something in. And this is actually where it gets a little bit complex. Just like we named the naming convention in the symbol here, button slash home or swatch slash slash red. You're creating many folders for stuff to be housed in, essentially. So you can go as deep as four or five levels, right? So button slash, home slash default slash blue. You can get really complex if you need to. But this is where probably most of the complex writing is going to come into play. And it's really about your organizational skills. So it's probably best to write the actual thats kinda set up for you here. The name of the font, right? So recall Open Sans, forward slash the item or using it on. So button, forward slash the color of the actual font. So in this case, white forward slash the actual size, 16 pixels. And Just if you wanna take it a step further. You could do forward slash and say center because we've centered it. But in this particular case, we aren't going to be creating anymore styles for this particular button. If we did, we would actually just change the weight of it. So what you could do is you could say semi bold, right? Instead of centered. So that's done. We're going to hit Enter. And we've created our textile. Now if we wanna go add another one, like I said, you know, if we're going to change this to a bolt, It's going to go ahead and do the same thing like a Layer Style and give me an asterisk. So we're gonna hit create. We're going to come here and we're just going to delete those and create folder. We're going to hit enter and now we've created two of them. So if I come here to my textile, we're gonna see bold and semi bold. But this is how it breaks down this document. Open Sans button, the color, size, and then the weight. So I can now go between the two. And if I come back here, I can come here and select again bold or semi bulb. Now, if I want to make an adjustment to that style and I say, you know what, I want my text to actually be, caps, all caps. If you come over here and the text option area, there's actually a section where you can select the double a and that indicates it's gonna go all caps. So if you do that, all you have to do is hit update and it will update that across all your buttons. And the same thing for the bold. We're gonna come back to bold. It's going to jump back to lowercase. But if you select Transform to all caps and hit the Update button, it'll update that so that way it's updated across all your buttons. So that is how to create a textile. So I highly recommend to start building your tech styles as you need them. So if you think you're gonna need a multiple weights, I would continue adding them there. But that's just not the only place to add them, right? We're gonna be doing stuff with body copy and things like that. So to make things really, really simple, I'll just create a couple of now just give you an idea of what that'll be like. So again, we're going to just select the same one. And we're gonna go ahead and go to Regular. And let's say we're going to be 14. And then we're gonna go ahead and not do caps ever going to create a new style. But in this case, instead of button, because we're not putting this in the button. We're going to call it body because the body copy, we're gonna go ahead and call it black because I want to change the black. And the second, we're going to change the weight to 14. And we're going to call it regular or actually go regular. And then we're going to add one more. I'm going to call it left. Align. And we're going to change the color. And then we're going to hit enter. So now I've changed the actual text in the button itself. It's telling me that, hey, you made a change to sit the update just so it up-to-date. We can change that back by going to this document, Open Sans. And now we're going to see our body and our button. So if we want to change it back to button, we can come here and select the one that we want for the button changes back. No harm, no foul. But if I want to add a textile, my document and I can add some text. And there's going to be no textile here, but I can come here, go to style this document. The name of the font. Body, black, 14, regular left align. So see that we built Open Sans body left black 14 regulated left align. It gets a little complex and you can go pretty deep. I think one more layer deep. But if you want to really make your stuff really organized and know when and where are you going to use it. I highly recommend building it like this because then it's going to help you out that you can select the body ODE white texture, black text, I need black. Okay, cool. Is it, what's the size? 14. Okay, great. Well type regular Bold. Well, in this case, you either DGA left aligned. Yes. You don't have to do it this way. You can do it ways that feels best to you. So you might wanna do body 14 pixels, black, regular, left align, ie, you can adjust it however you see fit in this particular instance. That's how I wrote it out. But there isn't any right or wrong and how to do it. That's really just based upon your preference and how your team works. Alright, so we're going to go ahead and select it. And it's been applied now nothing obviously happening because it's at 14. Regular Open Sans, stuff like that. So it's been added. But if we were to change it now, we can come in here. And if we did want the Button one, you can come in selected. It's going to be white, so you're not going to see it, but just to give you context, it'll change. So if we want to add more styling to this, we can come back. And we can actually literally need to come back and know that it's been here. We can now come in here and do it at the top level, and it would have to do it in symbols level. So we can come in here and now choose Open Sans body, black. And then we could say bold. Make sure that's changed. And then there you go. Bold. And now I can change between the two. So body black. So Boltzmann selected left, regular left. So and this is where you would want to get a little bit detailed and what you're writing. So now bringing to a centered one, creating new ones, left align, center. And then I'll do right align creating neuron, do right. And then we're gonna go ahead and do that to create a new one to 12. Right align. Yeah. Let's do it again. Center. And one more time we're gonna make it left align. So now if I come here and you will understand this better if I make this a little bit wider. So now I've drawn up my box just so you can see what happens. So right now it's left aligned, but if I come in here, I can change. But I want to show you the breakdown. So body black, 12 pixel regular center, left, right? So now if I go to center, it's gonna go to centre. If I go to right, it's going to go right. And then if I want to change the actual styling and come in here and I go back to 14, and then I select the one that I want. And that's how you change or add textiles. So the same thing now can happen in button. We've created a textile in the button. And because we only have the two, we can change between the two, whether it's bold or semi bolt. This case we'll just keep it bold. And then if I need to change the color, I can come here and change the color. So as you can see, we're starting to build a system. And these are the key pieces you need to do first in order to get into the nitty gritty stuff. So we've created the button and we've created our Layer Styles, and we've created our textiles. So let's get into the cooler stuff in the next section and I'll, I'll go a little bit deeper. Alright. See you guys in the next one of i. 6. How to nest items inside of each other: Okay, so welcome back. Now that we've created our buttons, our textiles, and our coloring now we can actually get into a little bit more complex stuff, which is the nesting elements inside of other elements, inside of element, other elements, basically inception. So in order to do this, we're gonna go into our symbols here. And I'm not going to play with the button that I have here. What we created is good enough. I don't need to add anything, but let's say you do an add something. In this particular scenario, we can duplicate this button and we're gonna go ahead and rename it. And we're going to call button slash icon. And now what we're gonna do is we're gonna go ahead and just make it slightly bigger or wider, I should say. And we're gonna go ahead and come up here. You can't see it, but there's a bunch of plugins up here that you can download online. And if you go on Google and just do a search for Sketch plugins, you can go ahead and find a bunch. You go to Sketch website, they have them. And there's even a plugin manager plugging, or he came open and download plug-ins to your sketch as well. As you can see here, a sketch Plug-in manager. So we're gonna come over here and select sketch material. I'm gonna go to icons as a great way to actually get icons for free from Google. You don't have to go to your template and pull it from here. You could just do a straight AMI document that you're working in. Now, in this particular instance, we're gonna go ahead and grab a random icon. I'm gonna go ahead and grab this one here. And when I drag and drop this in, it's going to go ahead and place it on the board and closest. But when it does that, and I don't have to do it necessarily in symbols page and I could have dragged and dropped it in the normal buttons page. But what happens is this, sorry, this thing is in the way. But what happens is it creates a symbol. And I'm gonna move this here. This here. It creates a symbol with a swatch. And it does that automatically. And the basically the swatch is nested inside this icon here. But actually I'm going to bring that back. But what I wanna do is I want to actually change the color of the icon here we're gonna put the icon in the actual symbol, right? So if I come back here and I've come in, I had But we're going to see that the icon there is there, but the icon is gray. And if I select this, we're going to see that the icon has already been placed as IC account balance. And then you can select if you need to change the icon, and then you have the color, if you need to change the color. So we're going to make a couple small tweaks here. Now we don't want gray, obviously, greater doesn't make sense for this scenario. So we're gonna go ahead and change it to white. By doing so, we need to change the name over here as well. So it's see gray 600. I don't have to snip at that naming convention, so I'm going to call it White, C slash white. And then just to make things easier, I'm gonna duplicate it and do C slash black. And then I'm gonna go ahead and black. And then if I want to change that, if I come over here, I can go ahead and select the swatch and change it to black or white. And I now I could do the same thing in my actual button here, under color. And then I can change the color back and forth. So I've essentially play something in there that has a symbol. And within that symbol we have a swatch. And then we've taken that symbol and we put it in another symbol. And I will come to our button and we have our style or textile or icon. And then we have the icon itself, which is set to white on a default because that's what we have it as. And then we can change it to black if we need to for any different scenario. And if you want it to be not black, you can come over here and adjust the color and have it be black. And when you do this, it has a mask that you need to kind of expand. I don't know why it does that. I guess the swatch is smaller. So that's the side of the swatch, so that's where it comes down to it. You just need to expand it here. And it'll expand a 100%, or it's made it black, but we've defaulted to white in our symbol. So color, white, even though it's default until black in the original. And if we come here, we can see in the button. And if I were to delete it and plays it back in, it should default to the white. And there it is. And what we're gonna do now is we're gonna go ahead and make sure that the button name is pretty proportionate to everything else. So but it is I just took a handle and I dragged it so it snaps to the square. I try to keep things about a pixels from the edge. Fault rules, 88162432 and things like that. So it makes your life a lot easier. Okay, so it's actually best practice if you're going to be using an icon inside of an element to just put it next to it. It really helps you. From an organizational standpoint, and as you're building things, it really helps to organize your symbols and your symbols page. You don't want stuff to be everywhere. So we have our icon, we have the button. And you can even take this a step further and add an element to the here and now too, so let's say you needed to duplicate this. Call it alert. Add an alert. And we're gonna come here and go to shape it a little circle on top right. The border borders annoying. And then change it to red. We can snapping to that. Okay, so now we have a balance and alert. So to come back to the buttons, come here and come to our icy account balance. Now we have account balance alert and I'm going to select this. It'll change. But because it's defaulted to black, we want to change it to white. And when I say defaulted to blank, it's defaulted to black here so I can make the change. It'll default to this one. And all you have to do a select from the color to adjust it. And that is how to build a nested symbol inside of a nested symbol. And you can get pretty complex with these things too, right? So again, to take it a step further, we can go ahead and take this element and make it a symbol. And now we're going to call it alerts us. So we've made that assemble, right, so that now has its own symbol. And we can come over here, take that piece. And now I teach it and duplicate it and start making elements of it. And then make it sleep. Okay, so now I've named them this and I can actually take action on them. So here we're going to go ahead and text. Now, obviously this is too big and this is where the textiles come back into play. So let's call it, let's near it, or change size to 86 to white. Create textile. And this style is going to be called button slash. Slush. Six pixels. Styles can be created and we can add it to the next one. And this one actually can get a little bit bigger, but because I'm going to adjust, this might not show up in my proportionately bigger and it's going to get wider. Might not show up in my dropdowns. Okay, so if a comeback here, we've created the account icon with alert. But then I pulled out the piece and I made another symbol called alert single no digit, so showing no digits. And then I showed single digit and then double-digit. I'll have to change the term for that. But it looks like the shape did not change. So if I right-click it, doesn't say that. Okay. So then what I have to do is I have to come back here and just pull it out of its. And I've created solar double digit. So if we come back here, single digit, actually, because it was in the same one. So we can go and alert single digit. So now I have alert single digit. Then if I need to change it to double digit, I come why alert double-digit. Any or you haven't got wide alert double-digit. Now because it's not getting wide. Oops. It's because the actual one here is circular. So I gotta actually make a third one and call it double. And then when I have to do is I have to place the Double one in there. So you can see the devil. And now to come back here, we have account balance or account balance double. And then they're go and it gets wider. So we've created our account balance icon. We've created the symbol, the normal symbol that we pulled from Google's symbol library or their icon library. And then we've taken a sheep and we made a Alert shape as assemble. And then we added a text with the textile and that symbol. And then in order to actually not make it in the same proportions, we want it to be wider. We went ahead and create a third one and added a wider digit one, and then we just placed it in the third one. So and like I said earlier on, sometimes you're gonna need to create multiple symbols of things to create different states. And this is the example of doing that essentially. So, with that being said, that's really getting into the nesting. So you can go pretty deep if you'd wish. Regarding one level, two, level three level. So as you can see, we're building this button. We started from working with layer styles to add textiles, to adding the icon. At the top here, just a normal icon. And then adding the color swatches for that icon. And then breaking that down even further to another icon with a symbol inside of that icon that we can now change. And we can make slight changes here by actually typing in a number. And there we have 123456 elements. And we've also added a style for the alerts as well. So we're getting pretty, pretty deep in the nesting, but that is really how nesting works, you know, going a couple levels deep and making things available to really switch in and out. You know, if you don't need the alert, you just switch it to the regular one. And then the next iteration that you want to show is, is one month and alert, right? So you're going to build that in your library and start building these out and showing what these look like. And that way, when you actually, when you actually have the library ready to hand off, people are going to be coming in here and grabbing the elements that are needed for them to put into their document. If you can see. So we're starting to build that up here. And that's really turning into what this is, like, what Apple did here and building this. So this is the library that you're building for yourself and your team. And this is just the button section. We haven't even gotten to. Different pieces and elements get inside a library regarding calendars or pictures and stuff like that. We'll get to some of those just you can understand how to build them as well, but the process is pretty much the same. Ok, so this was a little bit longer lecture, but I wanted to really go into detail and show you how that worked. So now that we've done, we're gonna go ahead and dive into the next one and talk about some more things there. Alright, talk to you guys soon. 7. How to set up your library for pinning: Hey everybody, okay, we've gone ahead and created our nested symbols inside of the buttons here. And now what we're going to be talking about next is pinning. And what pinning is, is pinning allows us to take elements inside of a symbol, sticking it to the place that we've placed it in it. Because if I want to add and I were to stretch us, but and this icon's gonna get really out of whack. And pitting is really great for a lot of elements on a page that you need to adjust. So for an example, a table for, as you see here, and we can adjust this to have it pin correctly. So I'm going to show you how to do that in this lesson here. So let's go ahead and actually do it in the button to make things easier. So I'm gonna go ahead and just clean this up a bit and move all these elements under here. For the sake of our lesson. Just so you can have a visual. Okay, so now that I've cleaned this up, I'm gonna go ahead and come into the button. No correlation. I just want you guys to see what I'm going to be doing. So I stretches button, obviously as you saw the text or I'm sorry, the icon is stretching and the text is kind of adjusting as well. We don't want that icon to stretch. We want that outcome to stay where it is, and we want it to stretch with the button proportionality. So to do that, you're going to come in here and you're gonna select the icon and there's a resizing section here. You have a little preview window that shows what you do. So there's a couple little lines that you can select from that allow you to do things to this icon regarding where you want to place it. It's very straightforward, but sometimes it's trial and error. You'd have to kind of preview the window and then go back and resize it, see if it works to how you need it. So essentially we want the icon to be pinned to the right-hand side, right? So in order to do that, we're gonna go ahead and click this little white line here is pinning line, this edge line. And then we go to the preview. And the preview is telling us if we were to stretch it, that icon is still going to go ahead and stretch wide. We don't want that. We want it to be a fixed size. So that's why there's a fixed size section here. And in order to fix the size, we're going to have to select the I, the lines. But in this particular case now it's telling us, okay, we select the vertical line. So it's saying it's still gonna stretch wide and just wide but not the height of it. But if we select the other line Now it's telling us, okay, the height and width is not going to stretch. It's going to be fixed to the size, but the item is still going to stretch with the shape. So if I come back here and I were to stretch this, the item now is pinned to the right. And now if you wanted to do that with button, the actual word, you can do it with texts as well. So let's say you wanted the text to actually be pinned to the left. And again, it's showing you it's going to stretch on resize and then maybe wanted to stay word is so again, we're going to pin it and trial and error. So go ahead and select the button, and then we're gonna go ahead and move it. So now it's being pinned to the left and I can adjust this with the icon moving however I see fit. And if I don't like that, I can go ahead and pin it to a different point. And again, it's based on the preference. So maybe I want to pin it to the bottom. It shouldn't really make a difference. Let's see. So by pinning it to the bottom, it just keeps it centered in the bottom. So if you want the button to stay in the position that it's in because of the way that the outline is set up, as you can see here, the outline box at the button. I'm saying pin this box to the left, even though I haven't soldered a line, I'm going to tell it to pin it to the left. You can also do bottom, left, left and bottom, so pitting it to the bottom right corner. But in this particular case we want to pin it to the left. But if I were to do that, just to show you, it moves the element left and right, just like it would if you were to pin it left. So by pinning it to the bottom, it doesn't do anything. So we can unpin acts that doesn't affect it. Still does the same thing. Now, let's say you have text that you saw in this one and I haven't set any petting it that kinda folds in on itself and becomes that sometimes that will happen in order get around that, just make sure when you create your layer styles and things like that, you select Auto with. So that way, even though I said to have the panels be as wide as the but in this particular case, it won't allow the text to fold in on itself. And as you can see, it stays exactly where it needs to be. A comeback here I can go ahead and change it. If I wanted it to make a change the height. And this basically just allows it to go up and down. In this particular case, we just want to keep it wide up left to right. So if I were to stretch this, it's gonna change back to auto height. So just leave it at auto width and everything should be fine. You don't always have to do that, but in this particular case, it doesn't hurt. So now all of my bot and should do that exact same thing. Green. Yep. And there you go. Now for tables, same thing. So I've created this long table here, and I'm gonna go ahead and create the symbol. I'm going to call it a line or a table line. Again, same for this table. Better. And if I go ahead and stretch this, it's going to be really wonky and we don't want that. So if we go into it, first things first, we want our checkbox to. The left pinned to the left, and we don't want it to resize. And then we want the position of the text to be fixed. And let me go ahead and change the textiles and I'll be really quick so we have them in our actual document. Then we're going to adjust lately. Justin. Ok. So now if I come in here and I pin this to the bottom, see how that is. And it's telling me that's how it's kinda react. And select the Ulman and append them to the bottom. And this icon, and then append to the right. Again, trial and error. So now let's see how that functions. So things get a little bit wonky, which we don't want. Looks like it's pulling things down. So all you have to do is just come back and adjust. Say okay. Did not move. And there you have it. Go. As wide or as close as you need to. By doing that, all we did was to just pinned the bottom and haven't fixed width. Sometimes you can't select both top and bottom. That's only because we set our alignment too wide. So there's no vertical for two smushed down. So let's go ahead and do the same thing here. Textile. We've already created the bold, a little bigger. And let's go ahead and change textile. And there are times you're gonna make textiles and I'm not going to work, you need to change them. So just basically continually add them on. Since body. If you want, you can change the name too. And I'll show you how to do that in a second. So let's go ahead and pin this to the left. And let's do what we did up there, called text select everything down. Kinda table. This now should. And there you have it. Now if I wanted to change those textiles as I was telling you, if you come over here to the component section, and I had mentioned this earlier on, there are three different tabs that you can choose from. The actual symbols that you're using. The textiles and the colors styles. So in this particular case here, our textiles, we have Open Sans. And then we can see the breakdown that we've built. So body, we have black, we have 1214. So in this case, 12 bold regular. And then we have 14 boulder regular. And that is how you break it down to see the breakdown. But if he and make a change and let's say you want it to be called something else. You can either change it in here by just double-clicking on it and changing it, or you just come here and go to more renamed style. And then instead of body, we can call it a table, right? And leave everything else the same. And same thing here, rename style table. And now all of these should be called table, as you can see. And table now has been added in here. And if we go to our document just to see, here is our textiles with table and regular. And we can also go to textiles in our document here. And it shows us all of our breakdowns that we built as well. And that is how to create pinning. Pending is really, really powerful and I highly recommend using it in your library because as you start creating pieces and components and things you're gonna need to use. For example, the buttons and stuff needs to start scaling. Pinning is going to be very, very crucial for that. So things don't get too wonky in your design. You know, keep in mind as a little tip. When you pin, makes sure that you're keeping on your layers. You don't want to pin a folder. That kinda creates a bit of a mess. And you don't want to pin the actual nested piece. You want to pin the peace inside of the actual icon. I'm sorry, outside at the inside of the symbol, not the icon itself. Alright. So there you go. That's pinning. Hopefully you took away from that. And we'll do some more in the learning in the next one. Alright, see you guys. 8. Nesting inside of Nesting Components: Hey guys, okay, so we've created our buttons, we've created our tables, we learned them a pinning. And now we're gonna go into actually learning while building more components and elements that you might need to use inside of your libraries, such as cards and stuff like that. But I'm gonna go ahead and take a component that's going to be reused in the library that we're building, which is a header. And we're going to go really deep into the nesting here. And then we're gonna kinda break down the pieces that you're going to use. It, it's kind of a recap of what we've been doing, but getting a little bit more granular with our naming and stuff like that. So I created a header piece here for the iPhone. So it's 80 high, 375. Why'd I grabbed my bar, my status bar from the Apple iOS kit. And I placed it in here, and then I've also put some text in here and I haven't done anything to this yet. I'm gonna go ahead and create the symbol and kind of break it down with you guys. So I'm gonna go ahead and select everything. And actually before I do that, I have textiles in here. So I'm gonna go ahead and just change the textiles just so they're in there. What I create them, sorry, textiles would be ready to go. So we'll have a left, bold, right? And because we don't have a right, let's go ahead and create a right. And these are scenarios that will happen as you're working. Because sometimes you might not know when you need it until you need it. So let's say we write a line and we'll do a center one. Select what awards you made, and then we'll just go ahead and add the center one. So we've critter a textiles for this that's now added into our element here are component and now we can actually start building it out. So I'm gonna go ahead and create the symbol. And here's where the naming is actually going to get really, really intricate. So I'm gonna call it navigation bar, slash bar because that's what it is. Slash small nav and in-between bar in small map. Actually, I'm not gonna do a slash, I'm gonna do a USDA symbol. That symbol. There you go. And do its Tai intermediates will do height of 88. So we didn't, it's a navigation bar or building the bar. And it's the small Math. I put this little line here which doesn't affect the forward slash portion of it. It's just to break up so you know what's what. You can either do that or put a dash, whatever works for you. So we'll stick with the dash, dash right now. So. Hit create, and then now we've created it. And let's go into it and actually start editing it now. So we're actually going to make different pieces of this navigational element here. I'm gonna go ahead and actually adjust my text to be high and wide with leaving some gap pixels. Okay? This 16. So as you can see here are textboxes. Snap. And I can now centeredness. And it's actually a purpose to why I'm doing this. So you'll see in a second. Snaps and that snaps, they're perfect. Okay. So why did that was so I can do a left component, so that way we can add all the icons and stuff on the left. And then we can add a centerpiece, and then we can have a right piece with all the components on the right. So I'm gonna show you how to name all that. So let's start with the right side. So we're gonna go ahead and create a symbol, and we're gonna go ahead and call it bars nav. Underline, because we're not, doesn't represent anything empty. And we're gonna make an empty state, um, which I will edit once I've created this. Okay, so now that that's done, I'm gonna go ahead and duplicate this and the empty state, I'm going to delete that because we want it to be empty because there's nothing there. But in this version, we're going to call it right, or our label, because that's the right label. And then we're going to leave it as text because we're going to add the text there. And then we're gonna go ahead and duplicate that again and call it right? And we're going to delete that cuts, but we'll meet that. Ever come in our plug-ins sketch icon. And then we're gonna go ahead and put in a glyph that so there. So in this particular case, you know, maybe you want a clothes for this one. We're going to go do a really quick. And now you can hear icon has showed up. But that there, but the swatch is gonna show up as well, which we don't want. And we're gonna go ahead and move that. Let's do small tomatoes. I gotta move it. So that way, no, it's with that. And we can rename it a color, blue or something. That way I can come in here and just change it to black and then I can delete the blue because I don't need it. And I did that only because if I were to delete it before I did anything, it would be difficult to actually add it back in, so I'd have to do exactly what I'm doing now. Just come in, select swatch and select the color and then add it in. Okay, so we have our empty bar, label, bar glyph. So now if I come in here, I can, actually, if I go to the main instance, we have bar, nav and t, And then now we have glyph, so it has the x. And then we also have text if we need to add the text. But if I come back to the glyph, it's actually not align the way you need it to be. So let's go ahead and fix that really quick. So in this particular case, we're just going to pin it to the top here, move it to the top, I should say, and that should fix it. So if I come back here and you can see now it looks more aligned, I can move it up a little bit more, but that's okay. It's fine as as so we've handled a right side and now let's go to the left side. So kinda the same thing. So now we're gonna go ahead and make a symbol out of this. And now we're going to name it exactly the same thing. Br slash slash, underscore slash empty. But I'm going to put L empty for left empty. And then now it's been created here. And we're gonna do the exact same thing. And I can even come in this one, do our empty, just sorry, keep it consistent. So let's duplicate three times. So empty will be empty. And this'll be text or a label. So L stands for left. If you guys out no. And then glyph here, which can put in a icon. And we'll put in the menu button, is a new menu button under there. And like before, it'll create a grey one. We don't want to delete this fleet. Come here and actually at the element that needs to be added. So this is actually the issue that comes up if you delete it too early, I just want to show you it. It will be hard to get back to what you need. So actually it makes more sense to do what I did before, which was having it here. And we do enough to move it there. We can just rename it here. Keep the name. Come over here, change it black, and adjust the mask. And it's gray here because it shows up as gray. So let's change it to black. And then we can come back over here and delete it. And now it doesn't affect the actual file. So now that we have everything, if we come back again to our header piece selected, now we can see we have our Menu button and then text in the center. Now for the center, it's just going to be text. But we're gonna go ahead and create, assemble. Again, same thing, bars slash nav, slash, underscore, slash c for center. Empty. Or actually we'll call title because technically the empty, empty. And then duplicate it three times. Empty label. And then this one actually called label, the light. And what we're gonna do is we're going to select our canvas or, or, or canvas. We're going to go here and go background-color. And then we're gonna go here and select the color and select black. And then we're going to select the actual text. And we're gonna go ahead and see if we have a white. I don't believe we do. Here. We check bold black, so there's no white. So, okay, we're gonna go ahead and change the color to white. And we're going to add the element here, change black to white. And now that should be added in. And now what we can do is we can actually take this piece, our rectangle, or a background piece, and create a symbol with that. And we'll call it bars, nav, forward slash underscore, background. Light. Duplicate it. Called dark. And we'll change the color to black, dark gray. And because we didn't do the light label here, we're going to have to do it here. So heading one more here called label light. In here as well. Down. Label light. And we're gonna go ahead and select both. Change background black. And now we can select our text. And it's left aligned. So let's go ahead and make it white. And then we're gonna add it. Black, white, right align. So same thing added and we'll go from there, we have it and never come back to our header. We have all the pieces added. So we've added barton app center and T. We can add text. We also have the background, which is down here. And you can change it to dark if you wish. And then now you can come in and change elements to be on that, later, to be lighter on the dark area. So come up here. Now, I pulled this from apples. So you're going to have to come in and I believe, manually timing and tell it that you want dark. And then finally for a centerpiece McDowell, you change it. A little quick tip here. You can. If you hold down your command key and this is getting too much for you. And you just want to isolate to a certain section. You can hold your command key and click. And it will show the override for that section. And that's really the purpose of building sections like this. So you can kinda go in and isolate what you want to change so you don't have to look at it at this point, which looks really confusing. And it will get confusing as built it up. But you can, you know, point-and-click by holding the shift key, I'm sorry, the command key. And isolating those elements, you can kind of focus in on what you need to do. And now that we've added that element, backgrounds gray, and then now you can use that background and for other things. So if we come here, we can see bars, background light, and now we can take it and use it elsewhere if we need to adjust it because it's just a background piece. And that could be another element that's reused in your design. And there you have it. That's a really, really deep way of building a intricate element. It's one piece and all the other pieces are kinda housed, as you can see, are broken down into different sections. And I will go ahead and do this. And as you build us, like I said, it, it's probably best to start breaking this up so you know what's what and stuff doesn't get overlapped with each other. And then you can start building titles in here to help you out so you know what's what. So you could say tables and swatches and things like that. So you can kind of break it up and clean it up. I can get everything ready. Prove yourself to look at and know where things are, when you need them. And there you have it. All right. So that's it. I look forward to telling you some more stuff from the next one will be going over different background elements that you can reuse and working with images and swapping those in and out with what we talked about earlier in the course with the swatches and doing that now with images and seeing how that works out. All right, see you guys in the next one. 9. Creating Dropdown Components for your library: Okay, welcome back. So now we're going to create some dropdowns in our library. And we're gonna be using a lot of the same techniques we've already learned. So by this point, if you're following along, you should be able to understand what we're doing now and building out these pieces pretty intricately. So I have a dropdown, it's called dropdown and put title with the textile in here. And I use that one a textiles we built. And now what I'm gonna do is I'm gonna create symbol and I call it dropped down and I'll call it normal. And then I'm gonna go into it. And now this is kinda where you want to play with textiles a little bit more. So we have a normal one. So I'm gonna go ahead and actually add this and call it dropped down. And everything seems to be fine. Going to actually make it semi bold there. And I want to actually add disabled state and less. So in order to do that, I'm gonna go ahead and change the text to be light. And I'm gonna go ahead and add it. And we'll call it disabled. But make sure you change it. You go back to the normal one because you don't want the non-disabled known to be your default one. So as for the dropdown here, we can actually start adding some layer styles and this, and we can create a Layer Style and call it dropdown arrow. Or actually we, you're need arrow normal. And then if we call it disabled. Finally, what we're gonna do is we're going to pin our text to the left. And we would want it to, want this element to stretch so we can type on a pin this to the right, and we don't want it to be changing size. Let's go ahead and test that out. There. You have it. But but you probably want to make sure that that color is actually normal color. So the reason why it's doing that, it's probably because I set the elements to pin. Here we go. So now I can go as close in as it needs to be, or as wide as it needs to be. And now we can have a normal version, great, returned to its size. So we can call it normal. And then we can select it and say Save. And come in here. And then select from the one that we select good. Predominately created, excuse me. Adjust that and then creating essentially two component pieces out of one. Very straightforward. Now if you want to add a little bit more to this and do, let's say, maybe there is an error in selecting a drop-down or you want to show a couple of states, what you can do is you can duplicate this. And what we're gonna do is gonna make it bigger and bigger. And now we're going to delete that because we don't need that. One. Duplicate it again. It'll do eight pixels. I'm hitting Command D to duplicate that several times. To label three. They will for the label. Oops. I said earlier in the class you're going to start making multiple duplicates or state, and this is kinda what I was referencing. You're gonna be making a state here. And using that, put a little drop shadow in here. And now if we go back to our components, I'm sorry, our dropdowns, we can duplicate that again. And if we come here, we select sheet. Now the sheet shows up. And then if you'd like, oops. Now if you want to show different states of selection, this is kinda where you get into doing job. She selected, selected. This normal cell in this case, we can see here, put it under and then show our selection on one of them. And you can even get really granular about it too. If you want to show all the selections, you make five different versions. So selected 12. And this is where the states come into play, where you can get really granular it, read it very. Or you're building a library, something like this might come in handy showing all the different labels here. And then if you want to even take it a step further, you can build another textile for selection state. So if we come here called select, we could call it blue. Select the blue. Left to I just want to left, rename this. And now I can come into here and change that. And you have to drill down to D PUT these. I'm just doing this for the sake of showing you the select and then the size and then just left, you don't have to have semi Bolden stop to, that's really up to you how you want to break it down. You don't have to go that deep in terms of nesting all them. But at least now we have options. Okay, so we've done all our stage 12345 or normal one, and then our dropdown title. And then now if you come here to dropdowns, we can create several versions of these. And it really just change the state. For each one. We can show it to three. And if you need to, you can change the title of the label as you see fit. But in this particular instance we have all the different labeling and then all the selections. And again, you can take it even a step further and having this background element, the Layer Style and change that. And then we can call it dropped down. Such selected it. And now it's gray. But let's say you want different color. So it's going to change the color. So I maybe wanted to be like the yellow and the purple on thermal works and that blue, dark blue. So let's say we want a teal at it and call this one will change back to gray. And then if you need again changer layer style to match what you need, you can add a new one. Or if you've already created a weight version, you can select a weight version. But since we didn't create a white version, that we can change that if we see fit. But I'm gonna go ahead and change up back to the original grey is back to blue. And now I can come in here and I can even now change the label and I can change the text color to white. And then you go into rotational will pieces. We did the draft down as we did the components, we did swatches tables by little headers. Since you're building a library, it actually really helps to build spacing and stuff as well. So I'll show you how to do that next. That doesn't really show up in your document per se for coming up in here. But it doesn't hurt to have some sort of spacing and I will show you how to do that. Alright, next. 10. Creating and Working with Swatches: Hey everybody. Okay, so in this one we're gonna be talking about just different components we can build and swatches. I've created a components page here, and I have a swatches page up here. And in my components page I have just a card that I built. I haven't made it into a symbol yet, so let's go ahead and do that. And I made this 300 by 300, I added a corner radius of six and then it put a drop shadow in and I'll change it down to 24. And just to give it a little light touch. And I'm gonna go ahead and create a symbol. So I'm going to just call it card slash. And now we have our card and now if we go into it, Ricard is there. And we can now adjust it based on sizing if we need to make it bigger, wider or things like that. Great. But I want to actually now start adding pieces to this card, right? So we're gonna do the nesting symbol again, so become a swatches. I have a couple of images here, and I started actually naming these images are ready. So I started naming this swatch image, swatch image two, and so on and so forth. So let's go ahead and do that. Continue on here. Swatch slash three. She for swatch slash five. And now that I've created my swatches, I can come in here and I can come symbols and essentially changed it out. And it will switch the image sizing proportionately to what you change it to me. So I could change this to house one. And it will proportionately to inch. What you can also do too, which is great, is, let's say you have an image and you just use one image. You can come in here and you can actually look for an image. All right, so I have pixels library or pixels, I should say. And I can change it to, let's say, this person's face or these beer mugs. And I can do that in essentially override it. But the image itself will still be there. So it's really cool because you can take an image, pop it in, and replace it while you still have the original image. Okay, so now that that's done, let's come in here and let's say that we wanted to create a a guard with an image in it and stuff. So what I can do is I can take my swatch and take one of the images and populate it in. But if I go ahead and scale this down, as you can see, it's scaling on proportionately. So to get around that you can either you can either hold the Shift key and drag down and snap it and drag it up. And then you can go ahead and do that. Or you can do as you come into the swash. And we can do is you can take the card. And this has a corner six. So what we can do is we can actually shaping said taking a card, please that shape behind the image. And now let's say we want that shaped to be 300 by 306. And then we select both, hit the Mask button up here and it will mascot. You can drag it around or adjusted. You do that. You can actually hit this button called the fit, and it will fit it to the image sizing, so called swatch image sonata. Come here, come here. A swatch is now changed and proportion to be element that I originally created. So for Trauma here right-click and I say set to original size such that the original size set to original size sets the original size. So if I have this as the card, I can drag this down silver. And then we have our elements in here. And then what I can do is I can come in here and I can switch it out. But it's going to be crazy size. So in order to get around that and you've been either a cheesy edge and come in here and change it like I just showed you. Or you can come in to the actual image and kinda do what I just did before. So I can actually copy this and just duplicate it to select it, paste it, resize it. And then we might not even need this anymore. Or you can keep it if you want to use it for the the size that it is. So then we can bring in this swatch to swatch one. And then if we want do card image, and let's say we want this card to be. I have a 125 pixels wide. And then we can take our swatch. We want swipes and place it in here. And if we want to scale it proportionately, again, we could do the pinning. And surely it would be the image self. So now here we go here and select card image. You should adjust based on what we needed to be. Obviously showing at the bottom. We wanted to show up at the top. And there it goes, without the top. Sar images now proportionate. And we did that by pitting the actual image itself in the swatch, created another card. Because then we can have elements on here that we can create if we won't want. So then we can come in here and start building stuff out and start naming things and get coffee roaster. And then adding our textiles. And because this is now a title, we can now create a new one and bump the size. And then we can add a new one, and then everything stays the same except body cams title. And then we can adjust and then select Open Source body 12. But because we want this to be left to line, we'll create another one. And and then now we can start typing, now yeast. And so I've now started building all the elements in pieces and adding them in here. And if I wanted it to be disproportionate size, let's say I wanted this to be 700 and Twenty-five. We could easy. You can come back in here and then I can just take my card that I just created and make it that size. So that way it's fixed. And now we have our two images. So we have long where you're just created the swatch in the card itself. And then we have one that we actually put the swatch in there. So now if you come over here to the right, I can come here and I can switch, he's out. Relatively simply. Simple. But if I choose one of the other ones, as you can see, it proportionately. To the min. So there are several ways of doing it, as you can see. And then we color swatches. If you don't want to have your color swatches show up here, you just add another layer. So in this particular case, it was swatch slice image. So then I would just rename it flash image. And then copy that is to then too, 33. And before going on with our actual swatches, the swatch color red, splotch color blue. Now if we come vector into components, I now have my swatches where they need to be. And then if I come in here, they could see color is broken up, images is broken up, and then the thumbs are broken up. And if I need to put the film in their own section, same thing. All I'm doing is just adding another line, slash, one. Swatch them, splash. So again, coming here and we can see our swatches, color, image, thumb, they've all broken down if it's like color and it's just going to change the color of it to the swatch itself. But if I come back and I switch it to something else, its gonna change it to the actual one. And then I can change it back to the card with the image on it. And there you have it. And that is creating multiple different components, kinda using other elements and using them at the same time. Again, you wanna make sure these are nice and clean. From your layout standpoint and see you know, what's, what you don't want things falling on top of each other. So just make sure at the end of what you're when you're finished, put these on the correct order, that they need to be in, that we know where they are and there's no mess. And that way, if you need to go in the document and change something, you can with no issues after this, we're just going to build a drop-downs and do that process. And then we'll get into a couple other things and go from there. Alright, talk to you guys soon. Bye. 11. Setting up spacing for your library: Everybody, welcome back. Okay, spacing. So we have our buttons here. Now if there's a particular spacing that you need to do with the spacing between elements on your page and whatnot. There are a couple ways of doing it. You can build a document that kinda outlines what the spacing is like. So this is eight pixels, right? And you can say, hey, this spacing has to be eight pixels between everything. That's k. So I'll make it pink. And then you show, you know, a button next to each other to indicate aids, eight pixels, right? So you can do that so people understand how spatial rules work. Or if you don't want to do that, you can come to your button itself. And this is all preference based on what you want, but you'd come to about in yourself and you can expand the actual canvas itself. So the button is exactly eight pixels all around. Now let's go ahead and check it. It's probably not accurate, so 76 more. So now what we're doing is we're adding spatial lines or spatial guiding around the button. So it's eight all around. So if I come here, the button itself is eight pixels. Why it around? So it created a padding essentially. And that way you can use that as a guide. That way you don't have to manually hold down the option key and figure out what it is. At least it's there for you, it's done, you don't have to worry about it. And depending what elements you have, whether it's 8162432, you can add that piece inside of your elements, your symbol here, whether you make a padding of eight all around 1632, At least you have it. And then you don't have to worry about actually building up those things. So you can add the spacing ruling here to indicate what the rules are regarding the spacing or the padding, I should say around everything. And you can add text here, here and here. And showcasing here just to indicate an eight and then show an actual example of it being used. And then you can kind of say, Hey, eight pixels, the pixels. And then it should, these are the pixels high, cool, awesome nerds. And adjust as needed. Maybe I'll you show your, your spacing, but that's one way of doing it. You can either do it this way or you can do it by having the button and holding down the Alt key and doing that. Now if you wanted to get rid of everything and bring it back to its normal state, I might have mentioned this before. You come here and there's a fit. And if you click it, it'll fit it right flush with the button. And there you have it. And so then you don't have your padding, but the spacing is still there. You just have to manually adjust and it tells you what it is. All right, so that's it. I'm going to show you how to now hand this off to developers. Muslim talk about plug-ins and getting those elements for you and also going through resources like the Apple stuff. And getting all these from Apple's websites. And I'll show you where to get all that stuff. Alright. See you next week. 12. Preparing your file for Development and the design team: Hi guys. Welcome back. Okay. So our document's pretty much done and we want to get it ready to push for developers to use. So what you're going to do is you're gonna go ahead and download the plugging called Zeppelin. You can go on the website just to show you a window to Zeppelin dot io. And you can go ahead and download it here for free. I believe you're only allowed one project, but you will have to pay if you do more than one. So if you come here and you come to Zeppelin and you say export selected, you can export selected or you can export all. So our boards from all pages, if I select that, it will export all my art boards. But before I do that, I want to make sure that everything is cleaned up and ready to use. So come through, make sure everything's good. Table swatches, components, the dropdowns that we made, spacing. So everything seems to be there. It's, I'd like a header piece here just so we know it is header. And so we'll put a plug-in, Zeppelin export all art boards from all pages. Or you can say symbols from all pages, which I will explain in a second. So our ports are on pages. I want you to save the file before you upload it. It's kinda pop up. You're gonna hit Export and then it's going to do its thing as it's doing it and start to export. Edits are sex for all the pages. And you can see all the pages that are here. And I, all my pages were named desktops. So it's going to all say desktop, but you can name your pages accordingly. We can name them accordingly in coming here and just change the names and then upload them and chit-chat. So you could say button, swatch, dropdowns, spacing, and header. And if I do it again, it will ask me to save. And then I'm gonna export again. And it will push it again. But it's gonna push, I believe, new pages because they're newly names. So we can just delete all the desktop H T1's. And now we have all of our pages here. Header, drop-down components, spacing swatches until you're a couple are missing. Buttons. Sometimes it doesn't push all of them, but it's okay. Tables and such. Swatches there. Okay, so we got our header and let's just rearrange it. Buttons, swatches, components, dropdowns, spacing, table goes up. And there you have it, everything is on here. And what happens is a double burden comment and start copying code and doing their thing. Now, coming back here, because we've created all these symbols and all these pieces, elements, they might need those. So what you can do is you can come over here and say export all symbols from all pages. And then all the symbols can be exported and show up in the document here. Snafus style guiding. I'm gonna go ahead and go down to components. And now all the components that we have built our in here for them to pull and use. Same thing for the text styling since we've added all of our textiles, This is why textile is very important. We can add them here to use for reference in their development. So everything here is nice and neat for them to reference. And there's no messiness or anything like that. And that's why the naming is very, very important. And then again, color palettes or your colors that we've added, we've been adding and that we've named are now showing up here in zeppelins. And there you have it. That is how to get everything ready for the developers and now for the designers. So what you're gonna do is your saber file. Most likely this is, I believe it's going to save the iCloud sketch. Icloud. Okay. But if I were to start a new document, so let's say you're going to be starting a new document with your team. You're going to come over here to preferences. And you're gonna say add library. And we're gonna do is you're gonna go find that file. And here it is, Librarian EFL class. And we're gonna go ahead and select it. And it's going to be put into the actual document. So now if I come here, library example classes here and everything that we've built, like the buttons and stuff are now available to us in this new document. Now let's say we made a change to one of these. And I'll show you really quickly how that works. So let's say we go ahead and add another button, or let's go ahead and add maybe an icon or something just to make it easy. So over here it says, This document is a library. Changes made to its component may be visible and other documents. And that is basically, so. If let's say we're going to add a icon, make it easy. And let's go ahead and select a icon from here. So we've gone ahead and added an icon is placed somewhere in our file. We have to find it. If you can't find it. And turn will take you to it placed over there. And that we're going to go ahead and move it where it needs to be. Where do we go? Let me do that. Their revenues per second, almost their ships and copy it. No, I did that. So we have our icon here. We enter. So now we have our icon. We're gonna go ahead and change the elements of it to black. Dr. mask. Get rid of this gray one because we don't need it. And now if we come over here to buttons, that should be available is complete. So if we hit File Save, saves, and come over to this document, and we come to preferences. This document as example. Kp saved it. Here we go. So at the top right corner it's going to say library updates available. If we click it, it's gonna tell us what's been updated. So this component has been updated, but T element inside the component, you hit update components. You come here and you select from here. And here is your Delete button. And there you go. Everything is in there. And it updates and cast carried two currents, all your documents. You will be adding a library, a one-off, you might, you might not like. Let's say that the you use a Cloud version, you can always apply, load your library to the cloud if you're doing a version controls and stuff like that and then that way the library, so isn't a cloud in a cascades across everybody's document. And that's how you prepare it for designers and get it ready for them. And when you need to make changes, you just open a library again. Make whatever changes you need to make, ad whatever pieces for you to make, and then grow your library. And that way, when you are working your document, you can go ahead and start building all the pieces that you need. For example, if you're working on mobile and making buttons and mobile, and then you've got a header piece that you're adding that you can start expanding on it and keep adding to your document. So here we have all the pieces that we've created. And let's go add the navigational element that we built. Right, so we want to switch to an iPhone. And then now let's go ahead and add the pieces that we've created. Anything in the bar, whoops. Say there's an x. And then let's say we want some text, right? Or maybe we don't want to text, maybe we want that. And then we can go ahead and add our elements in there, such as the cards and stuff. And then we could scale that down. Just and we can always make those changes later on. So we can add buttons and, and really, you know, adjust as needed from there. And there you have it that is how to add different pieces to your library. I'm going to go on about how to add the plugins and resources in the next course. And that's generally it. Hopefully, this is definitely helped you and check out some bonus videos after this, write CSS. 13. Bonus Video Resources: Hey everybody, okay, now, for the resources, as I promised, I'm gonna be giving you resources that you can use it in your sketch documents. These are not really known, or maybe they are, but the company is actually put some pieces together that you can grab it used so you don't have to reuse the elements. So if you go to Google and you just do apple scarce resources, there'll be a link for Apple's developer website. If you come over here, they're going to have all the pieces and components for you made. And they're going to have the sketch file here. If you're using XD, they'll have it here. It looks like there is no sigma as of yet. Since sketches pretty much the main program that everybody's using. But you can go ahead and download the beta library here. And you saw me use are already in the file, but you can go ahead and delve into here and use it. And then they have other resources that you can use as well. Whoops, that's the same, exactly. So you can download the, download some images from them. You can download the thoughts. Go up to the top here. So you can download a couple of things such as the San Francisco font. I believe they have a section for marketing where you can download images of an iPhone and things like that, how to use their videos. And There's a whole bunch of stuff that's available to you to utilize in your designs if you need them, which is great. So that's Apple. If you need to use anything from them. And it's at developer dot apple.com. Explore the site of it. You'll be able to find a lot of really interesting things on their website. So there you have it. Now, next one would be Facebook. If you need to get any resources from Facebook, go to Facebook's website. And then they have resources that you can now mode. So you can download devices, you can download some Facebook, 11, iOS, 11 components, Desktop components. You can download a lot of really interesting things. Someone holding a device. Going back to iOS 109, things like that. So you can click on these and download. And it looks like they have stuff for Sketch. Their version of sketch, I guess origami, framer, GST and I guess a wallpaper. If you want to use wallpaper and you can grab all the elements there. So go to the websites you might need, so you don't have to utilize it. Obviously, Apple is the primary phone maker that people are using Besides Android. So you can go ahead and use all their kits and stuff from there and have it accurately so you don't have to build anything from scratch. Are increasingly looking for things. It's all there for you to utilize accurate and their team built it, so it's all been free? Yeah. The other website that I like to use, which is free and paid, the paid version, it's actually pretty cool because you can get a lot of templates on here. But if you come here, you go to freebies that's called UI eight.net. And you can download different templates and kits and stuff from here for Photoshop Sketch XD, also fig mode, if you're going to be using it. Illustrator aftereffects, framer. Powerpoint, envision, and keynote. So there's a whole bunch of you can choose from. So if I select sketch, you can come in here and they have icons. You can download kits, different components and pieces, and you can add this to your library if you need to, or it really saves trouble of designing stuff from scratch. So it's really helpful depending on the type of system that you're building. So looks like there's a system here with a small demo on. And you can use pieces in here in your own system or use their system and your designs and the kind of break down how it works. So they Bernstein everything we've discussed. It looks like that one a little bit deeper on a lot of things, but this class is basically showing you how to get from a to Z and how to get from obviously, what I was showing you two, something like this where you can break everything out very, very neatly. And you can grab pieces from here. And then finally, as the final area for resources is SketchUp resource.com, and this is completely free. You can come in here and search anything that you want and downloading and utilize and use or tweak or change or whatever the case may be. Whether it's components, pieces, a full design, you name it. It's all on here. It's continually growing. They have kits for Android and stuff to you. So it's not just tied to iPhone or things like that. You'll have stuff for the web and a whole bunch of soft. So it's a great resource to look for kids and elements to using your designs. One more thing about UI eight. There is a paid subscription you'd have to get, but you can have unlimited amount of downloads. And it's called an all access pass. A little bit pricey. People leave it's like a 180 bucks for three months. They used to have it for the year was like a $170 or $200. But they I think they did away with that because everybody who was abusing it, downloading over, downloading every day said you're limiting your database now and stuff. So with that being said you can't do the purchased ones and they have a lot of actually interesting purchase ones available. So first sketch, there's over 1000 to 500 of them. And again, like the other ones, it's continually growing. And some of these are really intricately built. And it really can help you understand design libraries even a step further. Look at what other people are doing that might help you out. So that's generally it. Those are where you can get all the assets and resources that you might need. I might be missing some. I guess the final one for the plugins is if you go to sketch this website, there's a section here for plugins, I believe, extensions you go and you can go ahead and download all the extensions here that you might potentially need for your file, or you can just do a general search. Now here's applying. So check them out, see what they have available. You can google some plugins if you want to think of something like failing and lorem ipsum or stuff like that, just Google, lorem ipsum, sketch plug-in and there's plenty of them out there. So that's it for this class. Hopefully you guys enjoy it. Hopefully you learned something. Obviously we didn't build a completely full library, but enough where you can understand going from start from scratch to finish and kind of taking those elements and pieces up, we bill and expanding upon that and building your own library. So see what you can build. Let's see what you can do and hopefully you enjoyed it and please leave a good review. All right, I'll see you guys in another class soon. See you then.