Create a Design System library in Sketch App - Tutorial for beginners Step by Step (Part 1)

hey guys in this video we'll create a basic design system now before we started why should you create a design system the reason being is that a design system allows us to have one single place in which you can change that prog rafi color styles and much much more just for in a few seconds and basically in this basic design systems that will create will be having a page in which we have all of the typography another one in which we have all of the color styles and the we regardless of the size of the project if you have two screens or 200 screens you can change the detail prog rafi of all of the entire project in just a few seconds which is an amazing thing especially if you're working on large enterprise companies or even startups that just require you to change maybe the text or they want to go through a year we designer with branding you can do that in just a few seconds which is amazing so in this decisis tum' we will create the prog rafi and color styles and also use these symbols but feel free to go even further in my personal design system which is in each CEO actually created like my personal and favorite framework for allowing me to work with multi-million dollar clients with you know all sorts of different fields and the industries but I'll show you exactly what are the tools for you to create your personal design system which is tailor-made for you so let's just jump into the video hey guys so let's create a design system so the way we're going to create it is by going on pages and we're going to add two pages the first one is going to be textiles and the second one is going to be color styles and basically what these pages are are going to be the pages in which we can control all of the colors and all of the text of the entire project we are working on so as you recall in the last two videos we created these two - per screens however we haven't synced them into a design system yet so that's basically what we're going to do right now and you can do this earlier or you can do it more along liner in the process but I would like to create it in a once I first create the first pages and the structure is going to be similar to in detail which is my personal design system which you can download on you iater and as you can see in detail I have these color styles which are the primary secondary tertiary and so on and basically we also we not only have the solid options but the outlines to you so this is something to consider and also the borders and the dark and the shadows so basically if I change something from this panel it's going to reflect in all of the project and the same is true for the textiles and here we go it's basically both the dark text on a white background and also vice versa and basically what we're gonna do is going to replicate and create something very similar to in easier so let's go and actually apply this on these on this UI kit so let's go over here NART words let's create a artboard I'm going to make it around the 1500 of width and give it a height of nah maybe something like mm we're going to readjust that so it's not really a big deal so let's go ahead and create the the texture that will allow us to navigate through this so I'm just going to start by creating the very bottom border and let's use the text tool to create the headline so let me change the color and for this specific text like it's not really important to have it styled or formatted in any specific way because just for our personal reference so just don't worry too much about this and I'm going to right here it's gonna be the heading 1 and let's make it item smaller - okay and I'm going to give it a little bit of less opacity so I'm at 70% over here so yeah I think we're in good shape when it comes to this and I'm going to repeat it just a few times and again I'm selecting the entire group and using alt + I moved it and then command + D in order to repeat this quite a few times so let's go ahead and catch up the last one I'm also going to make it just a little bit higher maybe add some lateral weight to this so let's go ahead and substitute in numbers gonna be the heading free it's gonna be heading for basically here lying all of the main styles just considered that for this specific UIKit this is going to be a ref so don't don't be too strict with the naming conventions and all that so we're gonna use label here and then as you can see over here I have the all the headings from 1 to 6 then with the paragraph primary font secondary font hyperlinks labels smaller text and then call to actions we can update this on the go let me actually add the labels over here and I'll have the paragraphs right below the headings and I'm also going to keep these smaller text too so that in this way we can have a little bit of wiggle room when it comes to certain elements of the design so that small text and also hyperlinks those are a must okay okay so we're in good shape when it comes to the actual structure now let's go ahead and add some text let's duplicate this and here we're going to create all of the styles so it's going to be and one let's change the transform so let's actually actually go ahead in the web app and let's thing out for heading one you consider having this one so I'm just going to copy the style of this one over here and this is gonna be heading 1 but the left version so I'm just going to type in left and let's do it like this I'm going to duplicate it just a few times it's gonna be Center is going to be the right one now we are going to do this for pretty much all of the other textiles now in this case the header - we definitely have it over here and if you have a web development experience and just bear with me on the header ones and twos I know that there are some technical issues that can arise and you know there's some some things to consider but this is just a UI kit with no real like we're not really looking to develop this so this is just for for reference for doing this for fun so don't be too strict on which one is which as long as you learn the concept everything is going to be pretty fine so and especially if you're working on the client projects you always want to want to speak to the developer and have these things sorted out between you simply because it's it's always good to be a liner when it comes to styling because most likely they're going to set these as CSS styles that will like general CSS styles that will repeat throughout all of the pages so I mean just something to keep in mind okay so or actually one thing that we'll do to simplify our life later on it's going to be we're going we're basically going to change the we're going to change the the parentheses over here and we're going to use this lash and the reason why we're doing this is going to become a pair and in just a bit but just bear with me on this it's going to help you save some time so in case you're wondering why we're doing all this this is basically the steps that are required for you to create a sight system you don't necessarily have to do it in this exact order this is just a way that I found it's the easier it is the easiest way at least for my personal workflow and you know I would recommend you to consider doing the same especially as you're learning this new concepts out and then you know once you create your first design system is going to be easier so yeah just dis considerate it does take a little bit of a learning curve but and first it might not seem as easy as straightforward but trust me once you actually get into the gist of it it's not that bad and this skill set that you will learn are going to be invaluable throughout your design career so yeah I mean I always encourage designers to learn about design systems to use them and yeah I think it's it's a pretty pretty cool way to level up and so over here we're going to do a few things a few different variations of this heading and let's change this heading 2 heading 3 this is going to be the green version okay we're also going to tap together just a few times so you again guys we're just laying out the foundations over here and the final result will become more apparent as we just lay down this basic foundation just things that we have to do so yeah just bear with me on this and by the way as you can notice I'm using shortcuts like all of the time and basically created custom shortcuts in order to make life easier on myself I guess and you can do that easily from the system preferences I also shot a video on this so you know feel free to check it out and it's on my youtube channel under the sketch basics playlist so up over here how to create a bold version of these that's actually just something and that's just distribute evenly these not again guys I would strongly encourage you to do it as the first time to really learn the processes but I mean you shouldn't really be doing this like often because the idea would be to for you to have a framework that you can work on like from myself over the years I designed in it in such a way that no I don't have to do this this process all over again all of the time I'm working on a science project I'm a big fan of automation not repeating things that aren't necessary so yeah I mean it's it's great to do it a few times to learn the process and know what it takes but I wouldn't recommend you to do it all of the time because it's just not worth your time at a certain point and so for example you want on board a a client say it's a kind that's doing 1 million revenue you just want to on boredom and once if they don't have anything in place and they're looking forward for our design system you can use a design system framework to speed up your work on integrating the new designs but yeah like doing it over and over again for it's probably not the best use of your time each and every time so I hope this is a pretty clean pretty clear actually so let's go ahead and see for the heading for I think we could use some of the previous styling let's let's use the team members one those are actually labels so I think that for now we'll just keep the I'll just keep the labels has instead of doing of using the heading size so let me copy up the labels super over here label guys just birthed me for just a few more moments as we are creating this design system for textiles and everything is going to become much more clear in just a moment so just bear with me on this now let's copy the styles of the paragraphs and I think that we have do you have two of these there's roughly yeah I mean so far we just have okay the small text and the paragraph okay that's totally fine it's even better all right so four paragraphs I usually like to have two styles the one which is regular and a bold version which can always come in handy and most likely you're going to use it if you're working on a project which is at least a medium at least at a medium amount of scale so yeah I think let's go with bold over here and so great we have pretty much everything the only thing that we're missing is the small text which we are adding right now so basically at this point as you can see we're not doing much really apart from just laying out all of these styles that we used or that we'll be using and once we have everything ordered in a neat way on this page we can actually start making the magic happen so let's go ahead and change this to small text change the this one as well okay so we are in good shape and as you can see we're still missing some parts of the assistance textiles and the reason being is that we're going to create this UI kit since this is a series in which we are going to create this UI kit from scratch and we were just at page to screen - we will add more textiles to the design system as time goes on so basically this is just a starting a reference point so yeah I mean at this point we have pretty much all of the textiles that we need really and so we can actually start renaming the layers in a way that will allow us to create this to add these textiles so let's start from this one heading one and one Center and heading one right we have to check that the left is going to be left aligned this Center is going to be Center aligned and the right is going to be right light and so far so good now the second thing that we have to check is that the layers on the left are going to be named in a way that allows us to create a nested version of this textile so by data I referring to the fact that I will batch created the textiles and basically the way I'm doing it is to use this plugin which is Styles generator now it's very easy to find just go on google and type for text for Styles generator Sketch up you're going to find it right away you simply have to download the plug-in it's just like every plugin super easy to set up one click its up and once you see it over here under plugins style generator so again just go on Google start generator for sketch you can find it like right away and then once you select all of these and their name correctly you can simply go under here generate shared styles and as you can see there is this notifications that the free styles were created and where do we find these styles it's very easy it's on the right and you can see or actually on my screen recording is cutting off some part so let me do like this and let's go heading one you can see that we created three styles center left and right and you can check them out you can see all this all the textiles that you have on the page by just clicking on organizing textiles and as you can see boom we have them now the reason why I told you to add these slashes instead of the parenthesis it's exactly for this specific reason over here because if you if we didn't have these lashes I will basically want to be able to see the nest at the center left and right but since we do its we can actually create this message version it works exactly like symbols so we can even create like more options available out of this so if for example we did something like heading 1 slash bolder slash Center would have one more option to browse through and we're going to explore that in just a second so let me get the you write again and we're going to do the same with beheading to sew or actually instead of going on one by one which can take some time let's just rename each and every one exactly like we wanted so in this case we have the heading free we have a few variables because the heading free not only has few colors but it has a few whites and different font weights so we're going to create a structure which is something around these lines heading three slash it's going to be either a regular or bold let's say regular slash then here we're going to use the color and it's lush the alignment so if it's going to be left center or right so again heading one heading three this is going to be the same for all of these guys the regular or Baldur which is actually the the default weight font weight is going to be either regular or bolder even though here it's a its regular and here it's lighter we can actually just change the no matter how we prefer when browsing through the textile so it really doesn't matter third option is the color so if it's going to be green red or black and the alignment so let's go ahead and do something that will allow us to have an easier time changing all of these and we're going to use this plugin which is a secret weapon of a plugin which is called the rename it so yeah basically if you download rename it this will allow you to rename these like the layers so one thing that I will do over here is I actually have a custom shortcut so I can access rename it just like this and I'm going to rename all of these to header free then I will add a slash I'll click on rename and as you can see each and every one of these layers are going to be renamed exactly heading free now let's go on the second layer which is the font weight now I'm going to select only the ones which are light I'm going to go on rename it use layer name so basically rename it once you select just like the layer name is going to just the Montaigne delay your name and I can just go on and out light and add a slash you can rename it as you can see each and every one of these now it's heading free / light which is pretty cool super super good to save time I'm gonna do the same here which is going to be a layer name then regular that's slash like this so this is a just a very fast way to rename everything and we're gonna do the same now with the further step which is the colors let's go ahead lay your name then this is going to be green slash me name it let's go ahead over here to and lay your name / red or actually let's go here red and then slash don't get the orders wrong like I just did so let's go here lay your name and black okay perfect so now we're we just need the alignment which is going to be the easiest part and you just have to go here like name and then left let select all of the center ones now your name Center select all of the right ones layer name right so as you can see we managed to a lot of renaming work in a very short amount of time and in a very easy way now let's go back to the style generator let's generate a new style and um we are basically having actually why this I mean let me try this again okay so here we go we basically have actually I'll need to stretch out this a little bit more and as you can see having free we have lighter or regular and we feel light we can choose if it's black green or red and then at the last point we can select if it's Center left or right so you can see that all of these nested layers naming will allow us to have a lot of flexibility when it comes to creating the actual style so we have everything organized and set in a very easy to follow away so here we go with the right center and the left of heading for we're going to do exactly the same and let's actually rename all of these directly so this in the case of paragraphs you just have two variables it's gonna be easier let's just rename everything paragraph slash and then we're going to have two options which is the first one gonna rename these guys over here with regular and these guys over here are going to be layer name and bold let's go and select all of the left lay your name left select all of the center ones lay your name Center and all of the right ones again your name and right now when it comes to the labels think everything is set one thing I might do is to just actually let's just leave them like this mr. forty small tags so I'm just going to select all of them and include the heading for I'm heading five which we haven't really tweaked but we're just going to stand there as a way to yeah for us to modify in the feature so generate shared styles and boom we are in business we have all of the textiles available and yeah this is a very easy way for us to work on the text part of the design system so let's go ahead here adjust screen and we are officially in business so now the next thing that we're going to do is to actually go ahead and implement the design system inside the wallet now let's go ahead and add the right part of the design system in the text so in this case I'm going to use a plugin which allows me to see all of these similar text and this plugin it's called select similar similar layers and I'm gonna select font and color that's okay and I'm going to use the paragraph the the bold version and the left now the design will change a little bit but you know that's fine it's not like a big deal my part so that's just how it is now let's run this again paragraph right your left and boom we are in business actually let's make the paragraph just one step that's smaller okay it's gonna be 13 and we're gonna update the textiles so that it will reflect in all of the textiles over there now I'm going to do the same with the labels so I select all of this and go under label and left sorry if you cannot see perfectly the the right area but now it's pretty much what we did earlier on actually this is not labels is a small text okay that's good and let's go ahead here and I am going actually let me do it like this so that you can see the whole process I go here light and left and I think we duplicated two times the negative so mmm I think we can just delete this one and okay so let's go ahead here left oops this one is the green left and we are in good shape okay this one since we use that that plug-in we didn't need to update it since it already been selected but these guys over here just gonna use that plug-in again so it will select font and colors this one is also updated that's that's very good it's very good indeed I think we're going to skip these ones for for this specific project guys just a lot of unnecessary work for these specific ones can I use the textile over here sky Center mm-hmm okay we are in good shape when it comes to symbols and you know one of the following videos also show you how you can readjust the symbols and make them much more organized in the page so let's go ahead here and let's like this this one over here and let's run font and color again basically we are selecting all of the heading twos or actually we didn't sink in the heading T so let's add those to the design system and again just go on style generator generate styles and we are in business so let's check again I think - perfect we're gonna use the left and we work it or actually we had 80% of paucity so yeah I'm just gonna select it again and change the top in here not if your about it oh yeah I understood so yeah let's just use like similar layers again let's use fountain color sign it - heading life I didn't - and I'm going to make this heading - just a little bit lighter I'm going to update the textiles that it will update automatically in all of the tags now I'm going to do the same also for the heading on select all of these and lets you Center and over here I'm going to select these ones too they use the custom shortcut in this case for using that plug-in just like the in the fonts and I think these ones are labels yup they are indeed I know let's just give it a quick save now we have the labels over here this one is synced let's check these ones and you can see if they are synced or not by just clicking on them looking under the appearance and it's going to be pretty evident from the start because you're gonna have something that which is your text design system if not you just going to see this no textile message so I think you're good now the way you test it out it's actually pretty simple we just select all of the textiles and I'm just going to select them just like this I'm doing custom selection so that I don't get these other guys and I don't want to lock them at this time and let's change the color for example to something like right and let's update the text cells in the entire design system now as you can see the textiles have been updated all thread this is a way to see if the prototype is working boom as you can see we're pretty much covered so let's say that three months from now you want to change the the entire typography from lotto to a veneer or to whatever type you want or maybe want all of the heading ones to six it to become bolder or you want to change the color of the entire process basically with the the design system you can do all of this in a very easy way now again we didn't update some of these simple reason is that I want to clip this video practical for you and I wanted to show you all of the tools and how it works if you want you can go on into the all of the - details since this is not the client projects though - it doesn't matter it's just for exercise and practicing and showing you exactly how you can create a design system that allow you to create extremely scalable projects because in this case we have only two screens but you could have four hundred screens and the same concept applies I had projects with a hundred screens and we needed to do some major typography our updates and revisions and we managed to do them in a very very short amount of time if you don't set up a design system you need to do like major updates it's gonna take like so much time it's a very tedious and boring process now it's not great for every company but if it's a very very small company you always need to maybe work lean and agile a bad design system is not the right investment for them but once things get serious about you know scalability and wanting to have like a custom solution which is very flexible design system can be amazing now I want to end this video here because we are focusing purely on textiles in this video but in the next one I'll show you how we can set up the color Styles just like you see here in media so that you can do the same for the color styles and have an extremely scalable project data will allow you to impress your clients or just have like a very automated and scalable way to work so I hope you enjoyed this video this is a part 1 of 2 of the design system so if you're interested in learning more about this design system the color styles and also we're gonna talk about these symbols in the next one feel free to check out the following video and I'll see you there

Channel: Pierluigi Giglio

Views: 40,515

Rating: 4.8915253 out of 5

Keywords: design system sketch, design system sketch together, design system sketch library, design system sketchapp, create design system sketch, atomic design system sketch, sketch app design system, solar system design using sketchup, sketch 52 design system, design system sketch template, design system sketch plugin, design system sketch download, design system sketch example, design system sketch app, design system sketch free

Id: iU-07copFDE

Length: 44min 42sec (2682 seconds)

Published: Sun Dec 09 2018