System design basics: How to create symbols in Sketch, for simple, fast and consistent design | Andrew Couldwell | Skillshare

System design basics: How to create symbols in Sketch, for simple, fast and consistent design

Andrew Couldwell, Digital Designer and Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 5m)
    • 1. Introduction

      1:40
    • 2. An introduction to symbols

      5:49
    • 3. Creating an input and all its states

      7:36
    • 4. Symbol dimensions are important

      6:21
    • 5. Responsive symbols

      9:52
    • 6. Creating checkboxes & radio buttons

      11:04
    • 7. A UX tip, and dealing with form errors

      5:14
    • 8. Creating buttons and all their states

      9:29
    • 9. Sharing & syncing your symbols

      6:43
    • 10. Have your team setup your Library

      1:24
    • 11. Fin

      0:17

About This Class

In this class you will graduate from the basics of creating symbols in Sketch, through to creating a very powerful set of design system components, to enable incredibly quick, simple and consistent design.

Your teacher will walk you through how to create symbols for common web and product design components like form inputs and buttons — covering their different states for more comprehensive designs, and how to efficiently name and organise it all. You will also learn how easy it is to sync those design components across different Sketch files, and share them with a team of designers.

You can learn more about the value and real-world application of the skills learned in this class in this system design case study, by this class's teacher.

- -

About Your Teacher

Andrew is the author of Laying the Foundations — a book about design systems. is an award-winning web designer and front-end web developer. His career has seen him freelance on projects for the likes of Red Bull, NASA, Foursquare and Nike. In 2014, he relocated to New York City to lead the design and creative direction of Adobe Portfolio at Behance. In 2016, he pioneered digital brand guidelines and lead the design and documentation of two design systems at WeWork.

You can learn more about Andrew and view his design work on his portfolio site, or follow him on Medium, Behance, Dribbble, and Twitter.

Transcripts

1. Introduction: Hi, My name is under Caldwell. I'm a Web designer for development. Having let the design of products and designs systems that companies like the hands of we work. I've seen firsthand how library of well crafted symbols and sketch can be transformative. The design process system design is all about being consistent, efficient and organized on its not skeptical that you'd think the techniques learned in this plus will significantly simplify and speed up the process of designing problems as a real world example wants individual lords of a product found 26 different styles of persons and use. These states commonly happen when designers operate with no shared resources. Each time a designer need to put it, they draw a rectangle, choose a style of text making room for the right cola. On the end product gradually gets worse. And with us in this class, I'll show you how to completely avoid this problem. Make designing products more efficient and easy. It's maintain I'll teach you how to create to set design components and sketch to enable incredibly fast, simple, consistent desire. I will also show you how easy it is to sink those design components across different sketch files and share with team of designers. We hope you enjoy the class she looked. This is where she wasn't. 2. An introduction to symbols: I'm going to start with a basic introduction to symbols. So I've just got started here by creating two simple shapes on text. So if I If I select our first shape tax on hold down control on a Mac keyboard, click in this new menu, we want to go to create symbol here. Now we want to give our symbol a name. Now, for now, we're just gonna give this a simple name. But in the future, in the later classes, I'm gonna go into the importance off off naming symbols. So analysis Call this symbol wall Pete, that process control click. Great symbol. Call this warm number two. Now you can see outside symbols over here the layers list. So this little refresh icon here dictates that this is a symbol on the inherits. The automatically inherits its name now importantly, will pay. Although it is paid war on symbols on the pages. Now, Page one is what we've been looking at. This whole time on symbols is a page that is automatically generated the first time that you create a symbol on any additional symbols you create. From here on out will be stored in this simple page. So if we click on the simple page, you'll see the two symbols that we just created. Now we go back to Page one. Another really helpful feature of symbols is if we double click any of these symbols, it takes directly to where that simple is on the symbols page. Now that didn't look like tune to a big deal. Right now, we only have two symbols. But if you imagine a sketch about with 105 100 plus symbols, that's gonna be super convenient that you could just quickly job to a symbol in this way. Now, another important thing to note here is in the insert menu appear we now have. All of the symbols were creating may be stored away and symbols dropped out here, so we click and drag this onto the outboard. We could drop any of these symbols anywhere we like, so to demonstrate, actually, how symbols were on the actual you know, the real value of now we've actually gone ahead creates them just in a duplicate. A few of these, um now I want to change every instance off our number one symbol here. So to do that and I double click on that Simple. I just want to really, obviously visually change this simple so you could see that actually change. So if we go back to our outboards now, you will see that it's changed in every instance of a symbol which is super cool. Now, arguably the most powerful thing about symbols is override Sheltie. So you're noticing, right and panel here overrides. Now I'm just gonna go ahead and change lettuce of all these I'm gonna go with, um uh oh God. Not remove the second symbols from now. So now we can see over here in the lace list. We have the exact same symbol number one each time. But each symbol can now have a totally independent value, which is very useful if you're using a simple in dozens of different places. Um, another really cool, very useful feature of overrides is it will retain its value. So if I change from simple warm too simple to it will retain our value. Here changes Teoh. You see eso just to demonstrate that further changes to X change it back to under one symbol. It would change this value now another thing to know about overrides is the label here. So you'll notice Theis a label with without input here. So if I just change this one to be second symbol your noticed our second label be now in the first place. When we had a B, it made a lot of sense, but now we're changing it. Two different letters of the alphabet, our our A and B label is really making much sense now. This is really more about organization, which is a huge component part of system design. But it's also just, you know, it's really nice for organization. If you're a bit o c d like May, you're gonna really appreciate this wall and that, more importantly, if you're not the only designer working with the sketch files or this desire system if you're one of several designers on the design T, your label of a is not gonna make a lot sense to personable to using these files. So you should really be late. Be labeling these things more effectively. So to do that double click on that symbol and you see our A be labels appear now. These, by default are whenever the text you put in the first place, so just be using the alphabet. So let's just, you know, just go with that. Let's go. That checks both them. I will go back to our page wall here. You'll see that the label is now off that now that really is the basics symbols. Very, very basic stuff, hopefully to show you just how powerful they are. Andi, In the next plus the next videos in this class, we're going to go. We're gonna really delve into actually really what you could do with these using form text imports and bottoms. Asan example. 3. Creating an input and all its states: now the basics of creating a symbol. We're going to apply that knowledge to creating some design Capone's. So, for the sake of this example, we're gonna design four on. First, we're gonna create a text import. So let's create the itself. Draw a rectangle but a white background on odd a gray water, um, side, because this is an import, but more like them postal. Let's give it slightly rounded corners three with Let's go for multi height. Now I'm gonna zoom in Esso, conceive about one day. Now, this is the defaults. They have an import, so they need to add some placeholder text. So gonna go states. There is a label sense this put on the zoom in so we can see how pixel grid here I'm gonna in bed the tax 10 pixels. Laughter. The value itself is an important whatever visually looks, better fuel products, and we're gonna need to add a label. Now, label is important for two reasons for accessibility. Um, help screen readers Andi for you, X From a human point of view, it really just informed the user exactly what we want them to do with this import. So I'm gonna name this label. Um, like the label. Right now, that is the basic makeup off our symbol. So let's actually make it a symbol. Select everything on control. Click. Great symbol. Now, the naming, the symbol is really important. Both for organization, on ease of use later. Raw. So we're gonna name this what it is we're gonna have a for slash A, which is really important. You'll see why in a moment now, because this is that people state, Uh, let's just go something that makes sense. So let's go placeholder eso we create a symbol on. You can see that by this refresh icon again. Hear the name just given it. We now have painted symbols. So here's our symbol, Andi. Now we want to create the different states off this off this import. So that's gonna be really valuable to you and your team when it comes to product design, especially on market up use of flows. So we're gonna create the place all the state we're gonna create value, stay a hobby state. Maybe this created era disabled as well trying Coverall Ackles. So I just hit command D which duplicate the symbol which moves 100 pixels to the right by default. So I was gonna be creating a few of these. Just gonna stack the now. The first thing we need here is a value. If someone is actually filled out, I'm important. So I'm gonna make that black. I'm gonna change our symbol name here to be Well, you, um Now we're gonna need a whole estate song. Keep. Okay. Simple there again, um, for harvest A. Let's make the board be a Dhaka gray. Uh, something that makes sense. So go with over now for product design, you want to cover as many bases as possible. So it is possible to harbor a important in its place on the stay. Of course, it's also possible to, um, over over it with with texting it, put it into it. So we're gonna operate to here. So, like, why same was with Hubble on Great the doc people by six. Um, this time I'm gonna call this over while you on. I'm gonna do the same thing for our error because, of course, on import and error, with no text in it or with checks in it. So for our air estate, let's go with, uh, a, uh um these accordingly so era well, you Now, finally, it could be useful to also how on important it's disabled state. So for this, let's make everything a super light grey because we want it to be visible. Bore. Look inactive. It's the border. Finally. Right. So we now have a lower different states off eight secs import. Now, if we go back to our campus, we have our 1st 1 Here is from before on If you go open to insert now symbols, you'll see that sex input is a folder in itself with all of its states within it. Now, this explains why we had the forward slash here, so you can see later wrong. When you have a text in place, select a text area, a radio button, a check box. It's gonna become really valuable to organize your symbols in this way. So I'm gonna add a few different things there to demonstrate what we've done. So let's side. Uh, So it was some. These things be part was gonna duplicate these a few times, So I'm gonna go with we have on the right over here. You'll see if you click on this menu way we can access. All are different steaks. And again you can see that all that different states of the text simple have been organized neatly into this folder. So for our first, when we want to keep that as being a place all the state, let's show this. Want to have a value? This one, Teoh A. Uh oh, it's already an obviously. That's useful. I Let's go with an era for this wall, maybe disabled on this final wall. I'm gonna cheat here, and I'm gonna paste in some things I made earlier. Now, this is really, really useful for product design. Um, I just, uh the pace of the three. Simple says So you see the organizing the same way curses full of slash and then exactly what state These curses rid. So if I go back to campus, I go to insert symbols, you'll see that I have curses, organized folder and text import. So for the sake of the problems, I'm here just to make it super explicit. What's happening? Gonna walk? Um, once I hover over, you'll see that my borders changed with different color on a duplicate. That and then sport. Um, for ah, disabled state Here, change it to be, uh, no allowed. That's the basics of creating an import from here on out on the show you Well, she could do with these things. 4. Symbol dimensions are important: in the first video, you may have noticed that every symbol decorated with the exact same size. Now, there's a very good reason for that. And that is so we can flawlessly change between each one of these states, like so. So I'm going to show you exactly what happens if I try to change to a different sighs. Simple. So I will adjudicate one of our old symbols. I'm gonna make it very obviously, noticeably different size. So should make this 200 pixels. Well, uh, just to be really explicit, let's call it you Simple. So if I go back to our page one here and the gym to get the symbol, I'm gonna change it to be our new symbol, and you see that it's so horribly compressive, which obviously we don't want. So I'm gonna get rid of this, and I'm gonna take that a step further to demonstrate creating more than a text input. So we're gonna go on and Korea selecting a day import as well, just to slam different types of imports to show a different Ranger on. Then you'll start to see even further power change we sports. So I'm going to select all off my text inputs here. I'm gonna hold down. Controller. Sorry. Command D to duplicate them, actually going twice. I'm gonna change all this row symbols to bay slacked on all of this to be a date import on because we're going to create more of these in the future. It be nice, actually, stop labelling these. So I'm actually just for our insanity. Want to view? We are going to label these up. Andi, you know, you might be doing this for yourself, or you might be sharing us out with a team of designers. If you are sharing with a team of designers, they are really appreciate it. Just taking the extra Karen attentions watch label. You work in this way, So I'm gonna do something pretty painstaking hair. I'm gonna change. I'm gonna need to change the naming all of these symbols. So if you bear with me, I'm gonna stop this video and come back in a bomb. Okay? I've done the boring part. I've named all these symbols select place, oldest like valued eight import place or that date import value. So now we're ready to actually start making these imports different to the text import so versatile for a select we actually don't need a place old state. So I'm just gonna go ahead on and move those, Andi, to make these ace legs, we need to add a little arrow, so it's gonna zoom right, and, uh, on we need our vic. Turtle, I'm It's go for two, 468 10. So we have a little fill it blood just cause I'm a sucker for naming things. Let's go try and go with you. Uh, Aziz, we invented our text. 10 pixels. We on the left. We could do the same with now. We need to apply the same Teoh our three select. Now, a new feature off sketch is that if you copy and paste element between different outboards , it will retain its position. So fingers crossed that does that. It's like the sideboard paste, the same dimensions on position based not on into the disabled law. I'm actually gonna make this the same cola as everything else in. So now we have a select on for a date import. I'm going to cheat on D copy and paste in on. I can I made earlier. Some Zuma paste that the position that I want to pop this in se So, uh, I'm gonna look up to the right and it from my text. I want this the line the same in all of my dates imports, or when we change between states, the tax gonna start jumping around different positions. So if you know it's our 37 uh, pixel X value here, it's going to remember that 37 pixels on. I'm gonna select each instance off text date inputs here, change that to create 37 much like copy and pasting our triangle for a select earlier. I'm just gonna go ahead and do the same paste that into each of my date imports. It's position. So we have our imports. And now just to really show that actually start to take effect on it, we retain our values. Of course, Cold. I was gonna be useful for, uh, for a select Well, let's let's go ahead and do it anyway. So in this case, we could change it to be scope of country. We select Remar generic input. We want to make that a date import. Let's go ahead on change this to B go in date of birth on, um, So, uh, I'm gonna go with the sorry people in America. They rich format off of a date on. It's gonna stick in my day of because I'm really old. Um, so that's that place, all the state. If we don't want to change it to be a value, easily change that or if it's going for an era, could do that. 5. Responsive symbols: Now we're gonna look at what I think is one of the coolest beaches in sketch responsive design. So today, everything we've created is non responsive. I'm gonna demonstrate that by breaking this, So if you look at this symbol decreasing and increasing in size, you'll notice the word 100 there is moving now in the rial coded version of this online or in your product, that is simply behavior that would happen. So we definitely want that to happen. It's sketchy the to demonstrate this further. If you look at the triangle in this case that is stretching quite horribly, British is moving over. Likewise, um, date of birth. The icon is stretched, and if we changed the height vertically, it only gets worse. So let me show you how to deal with that. So if we go into our symbols, in fact, first of all I'm going to based I select data Ports is an example. So good of them in here. I'm going to very obviously break both that. Now we're just gonna deal with Select undated. So the first thing we want to do is we want to stop this tax moving over from the left on the edge. So that would mean while I select all of our text here, right now, over on the right on panel here, you'll see this section called Re Sizing. Now watch what happens to the text here when I select different ones here. If I select to talk, Yeah, because the text, or if I select top left, it will anchor it to the top left. If I am correct to the left, it was just Anchorage Swath center on. Likewise, if I anchored to the bottom left over that for the time being, we just want to send to this text. So I'm gonna keep that left that well, that works the same for date of birth down here. Now we want to do something about triangle being distorted. And we also wanted to be further to the right, so similarly to tax. I'm going to select all of my arrows. Andi, Now notice this fixed width on fixed height up here a few. Remember how stretched his triangle is here? Once I click fixed with a fixed height, you'll clean up. Besides that about triangle. So now, no matter what size I make, um, this symbol that triangle always retained its original size. Onda. We also want to just select this again. We also want to make sure that this anchors to the right, no matter how large our simple becomes. So we're gonna do the same thing for our stretch icon down here. Data back on by select each instance off our date icon on a related to things. I'm going. Teoh left the line it on. I'm going to fix the width and height on. Now we want to change our labels so it's hard to tell her. What if I see the outline of the shape of our symbol here, which is being distorted to be larger than it should be? You know, it's that nationality and date of birth here are not towards the top. So we're gonna fix that by selecting our labels for each of these. They're with me. We are going to anchor them to the top left so you can see that they now I'm good on. So now we have one more thing to clean up. You'll notice the import here is is just eyes too small. Remember, we have five picks or gap between our label on that imports. So we need this Teoh ankle here, so I'm gonna select each of our imports again. So I would do something a little bit different this time. Now, where the tax. We want this to be the top laughter. Want this The big left sensor? We want this to be the Rice center. The difference with this input is we actually wanted to retain its dimensions and its position in all directions, and we wanted to be towards the bottom. We wanted to be the left on the right. We also wanted to be the same distance from the top in each case. So we're actually gonna hit. So we're normally would hit laugh, talk or left or right this time we're gonna hit this box in the center here, which is gonna anchor it to four accesses eso. Now, you see, we have a pretty neat import. We could go one step further. I've decided to center these, but you can also tell leads to be So what's the top? I laughed. So in the case of our data labels, rather being less centered, maybe you want them to be top left. So similarly, we will want to follow suit with our triangles. Make these be top right. So the choice is yours, depending on your products and use cases. I think that demonstrates the the powerful thing about responsive symbols. One over a neat little trick is so in this case we have I've distorted the symbols for the sake of showing an example. But if you want to return to their original size, if you control click and you see sets original size out the bomb here, if I click that, it will actually store them to the normal size, which is really simple because, you know, you may accidentally have say something to a different size, and it's just really easy to be able to actually restore it to its normal state. Now I want to show you one final thing for responsive design. So if you remember a couple of videos back, we talked about the dimensions of a symbol with it being important that symbols that you want to see misled change between different different states. For example, you need the symbols to be the same size or they would distort. Now we're gonna combine that knowledge with our responsive knowledge to create a text area . Now, the difference when attacks there in a text import is while the text import is always going to be this height, a text area spans multiple lines, so will almost certainly be a greater height than its next import. Now, going on what we knew before, that wouldn't be possible because these simple would distort bought without responsive knowledge. We can now take that step further to allow for a text area. So I'm not gonna create every every state of a text area for speed. I'm just going to create it with a value. So I'm gonna duplicate at sex in books on just the consistency. Going to what a nice label appear. I'm going Teoh Rename it to be Is the area on gonna cheat now? And I'm gonna copy and paste in, uh, something I made Alia. So if you've seen a a text area formula, you'll noticed this little line towards the bottom right, which shows that you can click and drag to resize the text area. So we're just gonna drop that in the bottom right corner there. Andi, I'm going to insert this text area as a symbol I'm gonna expand it, Andi, you'll notice as before are Reese. I symbol has both stretched and it's no longer anchored to the bottom rise. We want so the same as before. We're going to select. I recycle. We're gonna fix the width and height. We are going to ankle apt to the bottom, right. And now you'll see if I set this back to its original size that we can now have this operate much like a text area. One final problem will get out of here is, uh I don't have any text competent pace that was gonna walk a lot of text in that on as you as you Comptel. This isn't how a text area should operate, So we're gonna do something a little differently here this time. We're gonna change the text alignment from auto to fixed, which is going to default to the off the text in this case. So we're just gonna drag this Teoh with when you see what's happened here. It's It's actually is wrapping now, so this will now be able to take any little road space and start there. Uh, but this will now take any flow attacks that we can throw it. It you're probably gonna want Teoh also fix the line. I hear too much. So Yeah. There you go. A responsive symbol. Take it a step further. 6. Creating checkboxes & radio buttons: So far, we've created text imports, select date imports on text areas that all share similar properties on. We've looked at how to make those responsive. Now, we're gonna take that step further. Look at check boxes of radio bulletins with John fundamentally a different size to a text and put some text areas. So we're going to want to create a different a different symbol of a different size Now account. So I'm just gonna quickly go ahead on create a let's not with a check box. So I'm gonna go with its going 12 pixel size white background. Got a border, These same greys with Done. Previously on we're gonna want to give that to pixel border radius to match up with our imports. Andi, I want to get this a lady ball. So mind that give it a 10 pixel putting here. Andi, that's that's it, actually, So right now we are gonna want to go ahead, create a simple so control click. Great symbol. This time, we're going to call it a check box. Um, this is going to be or checked. So if I double click on this now, it will take me to, um my new symbol in my symbols page gonna move this down here and I'm gonna make this 300 pixels wide. So it matches up with that No one's and you can see the label a bit better. Now, now we're gonna want to stack these symbols. I'm just gonna go back here. You see this actually distorted now because I changed size of a symbol to be 300 pixels. So what do here is I'm going to such original size, which will seal fix that. Also, you'll notice that that it's actually squishing itself. So going on what we learned in the last lesson, we want to first fix this left. You also want to fix this the top left, and we also want to fix the with height. But which si has now fix this symbol. So I want to do one more thing here. I'm gonna set this through an original size in a line. It's Where are the form elements? Andi, I'm gonna want to stack these like so we're just a little tip something that I use. We don't really want these check boxes to or brought up against each other, so I'm gonna go with, like, a five pixel parting in between so we could do two things. We can either just be disciplined enough to know that we're going to have these out. So I'll go five, um five. But this is what you'll find working with a team of people. This is where system designed tends to go wrong because one designer will decide that these things are just going to be put it up against each other. The next designer will decide that this 20 pixels behind between the 16 pixel between them and so on. So we want to get a bit more disciplined about it, That so we're gonna go back into our symbol and we're gonna add, Let's say, a bottom picks, bottom padding of five picks or so I'm just gonna walk this by five. So I want to before five. Andi, you'll see this this now this space on the neck here so that if I go back to our check box here to set this to its original size again and now you'll see that we have this padding here. So if I duplicate this now, the nice thing about sketches it will snap you see this red line when it's snapping into position. So now I can quickly duplicate and number of these. Andi will have the perfect padding between gentlemen. So we've essentially prayed to the field, set off check boxes here. One important thing is missing. Missing a legend. Oh, Rather. Label in this point, Pa. They field said it's it's a legend. So we're gonna need this for you. Exact accessibility, because Siri's of check boxes are absolutely no instructions to what we want to do with it . So let's go back into our symbols. I'm just gonna borrow this one. I think so. I'm gonna clean this so we don't need any of this. So this is going to be legend full label, whichever instance you're gonna use it full. So I want to follow suit. Remember, we have a five pixel gap or padding between our label on their input. So I'm gonna follow suit here, so we need to change the height of our symbol. So the height of our text there is 17 pixels. So we're gonna want are the height of our symbol to be five pixels greater than that. So 22. So I'm going to select the whole campus. Gonna change that to be 22 pixels, not see these two things combined Going to go back here? I'm gonna insert my legend drop into the canvas and again with the snapping pixels. Gonna snap, Just stop it. And it just very neatly aligned. So actually, we could go one step further here. I think we can go ahead and call legend. See, what's happening here is fixed is on, which is forcing it to wrap your Super nine. But we just click auto about, fix that. So gonna go about care. So we have our legend and we can change this to B. Anything I wanted to pay. I've also just the for the sake of continuity. I've been using a 20 pixel gap between each of these. So we're just gonna follow suit the same thing here and again. You'll see that that actually snaps to it, which makes things really simple. So we haven't unchecked check box. Now we're gonna need to have a check. 12. So gonna duplicate our label out. Sorry. How simple to on. I'm gonna cheat again. I had a little check mark on copy and paste pace that in. I'm gonna move to the center. Although it's, uh, broken that size. So just make that big, uh, on sent about. So this in this case is going to be checked, So Yep, we've got that. Andi now. Oh, look, it's so, uh Well, I'm in here. Hello. So so we have check box on. The cool thing now is with swapping out the symbols in the overrides weaken. Simply check this to be so we have to remember, before we had our organizing things into folders, Web check box checked on Jackson simply changes to be checked similar to before with the overrides. This will always retain. Oh, see, uh, I'm gonna fix. I'm gonna go back and fix that mistake. So if you remember, before we actually had the wrapping of text So you see pics If I changed two auto, that should fix that. And here it is. Good, clear never to experience to make mistakes. But that's all good for this tutorial. Making excuses. So the nice thing here is I can now very quickly change this to object. Object makes ah swamping these things out. Really simple. So I know some of the little mistake here have, Ah, a little re sizing so finitely don't need But so no one step further to create radio bulletins. These can share exactly the same properties as before, as we talked about of yearly videos about sharing dimensions. So in this case, great radia. Balto, this is gonna be she's gonna be really simple to do. So what we're gonna do here is gonna duplicate these two. Yeah, strange place. Onda will assume my name again. So these, uh, radio bulletins and we definitely don't need this check anymore. So in this case, the big difference. Well, too big difference between a check box in a radio button. A check boxes square in a radio button is a circle. So first things first, we just wanna make this a circle on. Secondly, a radio able to could only be selected ones, which is kind of where a check box could be. Multiple selections can happen, but that's kind of material. This saying I'm going Teoh a well, the radio jack. So it's gonna be a circle within this. It's gonna be like, so we just need to Italy's appropriately so radio check doesn't really make sense in this case. So let's go selected and, um, radio selected. So go back to our campus here. Gonna change, or for these to be a radia Bolton all on selected. And as I said earlier, numerous check boxes could be selected. So maybe put up to these only one radio able to be selected. So we're just gonna go ahead and change just to be hey, selected radio button and that's it. Check boxes and radio bulletins using the responsive on the different dimension symbols. 7. A UX tip, and dealing with form errors: form is really starting to take shape now. But one of something I want to give you is more of you extra. So I'm gonna take the example off a first name. Now inform design. You'll often see labour with star after are in asterisks. And I usually didn't say said it's a required field. So in this case, let's choose our states. Let's changes to placeholder. So So thanks that sense. Now zoom in on this Now. I mean, name is a pretty self explanatory field. Well, even then, you know, it's good to add a bit more clarity. So we're gonna so helpful text there something to the effect off. We'll miss the old details. Holds up a giving into that. So maybe this once. Okay. Maybe a little bit smaller. Maybe a little bit so small. Doesn't matter. We can change it later. So let's go with a gray sex. Maybe. So we're gonna position this maybe 10 pixels, five pixels, maybe five pixels below. We're gonna change this later. So now we want to make this a simple So we're gonna control click great symbol, and we're gonna call this hint stacks, So hints board slash so we could organizing two folders as you've seen in previous lessons . So let's call this expletive. I think that's what so back into us and bolster its now creating simple forest. Andi, I'm gonna go add. Make this three wides without the symbols on. Remember that five pixels high above the insects or between the text on the importance of it. We want to expand on that here. So we're gonna need Teoh. Increase the size of this by five picks also to Yep. Now we want to move this down. So too fine. So if I go back here now, two sets original size. Now that changed it. I remember our red lines for before we could very easily snapped this. The bottom, the simple. So it will always be nicely aligned now for the cool part and, uh, see why now I'm actually creating this as a symbol. So remembering our overrides from earlier um se we had some bits of this fall. I haven't filled out this import. It's gonna need to throw an era. So for the sake of mocking about designs here or use flows, we're gonna want to throw this an era with no value. Um, a u XT it. It's never a good idea for for a form to throw an arrow without actually explaining why it's throwing America's. It'll create a lot of frustration with the users, and it's also inaccessibility fall. So we're gonna want to repurpose this hidden message to be more a narrow message. So we're gonna change. So to do that, we're gonna extraordinary style. So let's go back in here. This well, this, um, there a message. Now, in keeping with that design, let's stick to the same cooler reviews before Paris. It's changed just cold to be read. So we now have a hidden message on expensive message. Share a message. Uh, now this we're probably gonna want this to remember and naming the labels earlier. This is not really a lot of sense. So let's change the label to be in follow through with him, so I actually, chains are changes on. Maybe you want to actually keep this be a little bit more generic because bear in mind, just design wise, we're going to use this across a wide variety of scenarios over time. So know him. Our label on that message actually say something different. So if we go back here, unfortunately have actually on my changes there, so I could change this to B message. This is a on here. I want this to be an error message now, So this form has for an error in this case because we didn't fill out this this import, that school situation. So I want to change this to B an error message. Um, this is why it hill. 8. Creating buttons and all their states: our form now needs a button. So too great at Botton Lattes samosa before let's create a basic shape. Zoom in on. Now I'm gonna want to match the size of this bottom up to the height of the important is 40 picks. Also, you can line your imports of boxes next to each other horizontally if need be good to have that flexibility. So we're gonna have this. Let's have a blue bullets unshowy. Of course, you would match the blue to your brown blue if you design your company or your product. So is this a bulletin? We want to make you a bit more money there, I say. So let's add a block radius of a little extra Go five. So we're gonna need some text on this altar. Just all this boats. And now you can have whatever label works right for you. Remember, this stinks too, Jack. Generic Because we're gonna be using this as override. Now I'm gonna leave. This is also for now, Bob. I want to show you a nice little tip. Yeah, So is this off centers like that? So, uh, let's say fraud bulletins were going along a left and right. Putting a 50 pixel. So two people five. I could say I'm actually making a mistake here, but I'm doing it. Show you why in a second. So 12345 A nice, sensible turn with more textile Lyman off Central. So we have our bottom. So I'm gonna make this a symbol same ways before control. Click. Great symbol. Now I'm gonna name this again. We want Teoh organized these nice and neatly So let's go for primary, cause we're gonna create Primary and second Report Two different styles Book. So let's have a look at Bolton. So again, this is added Teoh our well, let's symbols over here gonna this nice label again. Thing se Actually, we're going to be calling this three crime reports, so I'm gonna create a 2nd 1 hand. Adjudicate that Well, this one. Okay. Secondary. Milton Ana, Let's go with what's change. The core of this blue maddened it's make this. No, Phil. So is very lube all the showy? Yeah. Okay, so now we can have see bulletins. We can have a primary on the second Reporter. One thing I want to show you. Remember before we aren't a text set to auto here. Meaning the alignment. I'm gonna go ahead on change. Text for this now to be, uh, so met. Now, that's still working out pretty nicely. Is a 50 pixel left and right, But say if we have ah, much longer Bolton. So listen that games mad longer, Bolton, We've now sadly lost our notion of our 50 pixel left and right putting. Now, we can't do this and try and get it as close to it as we can, but we're only ever gonna be eyeballing on. Frankly, I'm a little bit more rosy on for the sake of your design system. You definitely gonna want to be more exact about this. So to get around this, we're going Teoh, I fall on, I'm gonna changed it to fix the linemen, and I'm gonna change it to be the entire shape off, Uh, the inside with off our Bolton, So won't think to know Here is that right now I do actually have a 50 pixel left the right book. If my Bolton was actually larger, um, I haven't actually made the initial calculation, are now being a little bit lost. So just to make sure I'm doing this right. I'm gonna take down the size of this wit until the point when this breaks. So I'm gonna keep increasing this warm by wall until the text no longer breaks. Right? So now I want to have the left, the right putting. So I'm gonna add 100 to this value. So 50 last fighting us. Plus, if the right products, like, 146. So I know at bottom needs to be 46 pixel wide, set the outboard of the simple the same size. So I want to do the same thing with this wall. Only this time I need to account for not to pick so to pixel border. So I'm actually going to take this lis, zoom in for our border for our pixels. Rather, I'm gonna take this in 50 pixels from this point. No, not 50 pixels in from the left. So two people five make this fix Whip. We know from before that I, with of this text, should be 46 so Well, um oh, no, my bad 126 pixels. So that's that s own our way. We need to increase the size of this, too. So for you. Well, so now our text fix, Um, it's nicely within this. Um, so now, method badness. We now know that well, before we were going toe eyeball, how big 50 pixels should be here Now we can do is we did before. So we're just going to reduce the size of this until the text brakes. So there we go. That is the point at which the text could no longer get any smaller. So once we get to that point, we just add 100. Also 50 pixels left, right? And then we go. That's long way. We could be sure that we've got the padding. Correct. Now there's one more thing we want to do. Here are two more things. I think so. Let's just do the probable We want to create a different states, just like we did before, up with our imports. So, um, lonely, I'd be a bit more exact about the whole life changer, but for sake of speed, we're just going to say that we want outputs of Harvard color to be significantly darker. Blue. Andi probably gonna want a disabled ones. Well, I don't think we need a era state for a Bolton, I think the scenario way. Stop, my girl. So no one today we don't need an era use myself. So let's make this be at six. This is the same disabled call that we used for some of our other imports back here in previous lessons. So we have that's let's create another two, which is gonna be able to remember our forward slash. So we're now going to create a folder, quote Bolton on a folder called Primer Within that So let's go with So your normal state off a button? Um, Andi disabled. And actually, you know what I'm gonna create. So let's match book our blue here so that unless change this text cooler be the same in order to be the same, Me too. Backdrop here. So secondary all the secondary us all the and I go back here. Um, so let's do these Ah, side by side. So we could see gonna make this. Walton. We have ah, remember that, too. But is amy structure? We did so have primary second within here. Different states on make. It's normal. And if you think back to the one of the lessons. I had these curses. So this is now in terms of blocking up a product where we could actually use, but these coma into pretty cool effect on that Spartans. 9. Sharing & syncing your symbols: right, So we're old on with creating design components and sketch, but now really important extra step is to make these assets available to the rest of your team or, if you're working on your own, to sink them across different projects using the same design system. Now, this is particularly important if you work on a team or like a team of designers at a company. Let's say you are one of two designers, 10 designer or 80 designers. Chances are you guys are sharing assets, so maybe you are copying and pasting bottoms and imports from one sketch file to another. Or worst of all, maybe every time you need a boater, you're just drawing a rectangle point texting it on. I bet us coming out differently every time on your developers hate you for it. So this is a really awesome way that you could cleanly avoid that problem on make sure the design system is being used and maintained. Well, um, it's called sketch library. So we're gonna turn this sketch file into a library right now that I'm gonna show you how to access maintained now. So up in the top left hand corner here is, if you go to file and go to add as a library. Now you'll see this actually opens up sketch preferences, Which is another way you could get to this. So you'll actually see that sketch actually has Teoh default library see which is pretty cool. And these are just maintained by sketch What you'll see here, Assistant design basics. That's the That's the library that we just set up. Now that's just inheriting the name of our sketch. Val here. So you can you can change that to be whatever you want to be. Well, the better the name is named, the better as you'll see in a moment, I'm gonna close this now. You'll notice this new message has appeared a bomb here. So this document is a library. Changes made to its symbols may be visible in the document. Now, this is really, really important, and you'll see why. So just for reference I'm just going to show you that I've actually saved this file on my desktop, which is a really a terrible place to save it. But I'm doing this for all for a demo. What if you're working on a team, you're gonna need this to be accessible by everyone else because the whole idea is that any changes you make to this file will sink to all the people you to file. So it stands to reason that they are gonna need to have access to about day to file. So it depends. What your company uses to share files, I would advise, is in Dropbox, but it's completely up to you. So make sure that you saving this file on dropbox or someplace that your team can can access on, they they get away old dates that you get when you make the war shortly thereafter. So I'm gonna create a new sketch foul right now. Completely new document. There's no symbols. There's nothing in there. It's all so the old way of creating bulletins is out created. That's a sex, and it's gonna come out a little bit differently every time we you know, that's what we want to avoid this horrible design, and it is gonna win badly every time. So a really cool thing here now is if I go to insert, you'll see that my system designed Basics folder is here, and that's actually reading from our sketch file and is pulling in every single symbol in that file. And it's maintaining all of our naming conventions that we don't know they're. So this is everything that we created this class the day it's gonna go ahead on add a text input, um, in a, uh, bottom as well. So this is gonna be very basic example. I'm now I'm gonna go back to our original file, which is now designed system. Let's say master library file and I want to make a change. Let's change the boat. So I just a nice, obvious change so we can assume that Brown has changed from being a blue Teoh go with this orange akel. So now if I hit save in this, we're gonna have to give it a second. Especially if using Dropbox it's gonna take time for a your your files to sink and that B files to sink on the other end over by now. It's sink ago. It's but you fail. You'll now see this library. Old dates available notification with top brand corner. So if you click that you get a list. I mean, we've only made one change, but you make you get a list of changes that he made on the left there. And then you see, before and afterwards you really awesome feature Because if, for example, someone on your team has made a change without meaning to which believe me can definitely happen a lot, depending on who's on your team, you don't necessarily want to sink those changes. So you might obviously be able to visually see that something is going wrong here, in which case you can investigate can go back to the library file. You can see when it was last days back to a previous version which is always useful for for damage limitation. But in this guise, we know that we made this change. We know this is right. We re grounded for blues orange. So I'm gonna go ahead on update symbols. So hopefully now clicking this You see, the bullets change here on the really cool thing. Additionally, from the difference between these linked symbols to a library file normal, simple XYZ, you'll notice I actually have no additional page off symbols here. So everything in there is just bringing directly from the library file that physically No. In this document, which is, which is amazing because there's no separation. You know, any changes that made the Libra file? It's gonna be changed here. It's really that smooth. But a really useful thing to know is, if you see, I double click this border on getting set. Well, no, we're not really an error message, but I get an informative message saying that this does actually belong to an external library. If you want to edit sit, it offers. You're quickly toe open the original document. We already have it open. So do that all you couldn't link from the library, friend. If for any reason you just wanted to attach this from it, I could click on link from library. And now you see, this is actually being created as a symbol. So we now have a separate symbols. Page can access this bulletin in there, and now I can make changes in this independent off. The original library, which is not advisable so far, is a desire system point of view. But it's definitely gonna be cases where it's gonna be useful to do that 10. Have your team setup your Library: If you're working with a team of designers, it's really important that everyone is working with same design system components, so we're gonna want to share our sketch library with them. So if you have your teammates follow these steps first, opened up sketch and go to preferences in the top left corner. Now open the library. Stop on Odd Library. Now, you should have saved your master system sketch file somewhere accessible by a team. Most importantly, so they will receive updates to their documents and symbols as you make them so they can sink the changes. So for the sake of this example, I just saved this. Found the death stop. Or ideally, you should be using something like Dropbox, for example. So if you select the sketch file and click open, you'll see that it's now rather than as a library to my sketch. So if I close this now, hopefully everyone on your team should not have access to all your library. Simple. So I just go in there and just stop systems. I'm basics by on a text import robots the campus. We should be able to change this to, say, a text area, uh, sounds great. We'll set 11. Fin: that concludes I Plus I hope you find it useful if you enjoy the plus. I really appreciate you review so like fire the