Building a Design System In Figma for Beginners

hi design thinkers my name is Matthew here and today we are going to be building out our design system together this will be a series of videos for beginners and what we're going to be doing is we're going to use a design system I buil called the pixel link design System Light and we are going to be learning how to use our components and how to use our variables and how to merge them together and how to build out all these assets that we can use throughout all of our project and this is going to be a series of videos we're going to go through how to build up a couple of basic fundamental components and then we're going to start getting into how we can incorporate those components into larger components and then we're going to also get uh into how we can set up animations and interactions so if all of this interests you then go in the description box below you'll find the pixel Inc design design System Light download or clone the project and then strap in and let's get into a overview of the design system we're going to start with and then we're going to build out one of our first components just before we jump in the video if you're enjoying the content so far then let's make a deal if you're like comment and subscribe then we can continue to build better and more helpful content for the community we'd love to deliver you more helpful design material helpful design tools and plugins and much more but that can only happen with you letting us know so get involved all right here we are inside of figma and and we have our pixel link design system light kit overall we've start off got our thumbnail here we can jump in to the next page I use the atomic design as well as I am using the design thinking theory so we've got our Atomic design and some principles of our Atomic design and basically how we can segment that how we can apply design thinking and systems thinking throughout our design system and what I've also added in is my design process basically it's the Double Diamond but overall we can see the circle of things that are taking place over time we go through the discovery into identifying problems into evaluating into brain storming and solution and in to basically setting ourselves up with any particular project we'll run more in detail with these sort of things over time but this gives you a great like template to basically understand how to do any sort of design to development Pipeline and it's here to help with your design system structure in addition we're basically we're designing for people let's think about The Human Experience so make sure every design component every design asset we add into our design system is taking in The Human Experience we're looking at our cognitive processes our semantic processes and we're looking in our social cultural environmental all of these parts are to do with our design experience for humans and these are some great books to go through to basically learn a lot more about how we can design more appropriate Design Systems UI experiences for people and as we go down we have our color sets now inside the design system I have implemented a complete dark and light mode color set that also has these little dark and light modes are looped in from our dark styling set and then we have as well our light styling set so you'll be able to get those dark and light all threaded through into our primary color basically Prime set and that Prime set we'll be using in our semantic layers which are all set up as well so we've got a baseline of our semantics and in addition we also have it where we can have our primary text secondary text tertiary text styling colors and our detail styling colors so we got a bunch of variables all set up for us here and as we continue down the page we also have our numbers so basically had set up all of our rounding border base variables icon scaling and our basically default scaling you can add more in here and that's completely up to you and I also make sure we have our like basically multiplier scaling here now what I've also added in and that would be found here you'll be able to open up and you'll be able to see scale ing rounding and icons Etc so with all of this we are going to be also using we got some component text as well as we've got some styling text until we get our variable textes uh text Paces in we'll have that but for now we've got a bit of both here so we can use these throughout our design process as we're building out our design system we have our color set up with our styling so both for dark and light mode you've got your dark and light mode effects for shadow dark as well as your blending effects and our a focus effect that also works on dark and light because we're using our dark and light tokens added in some icons so you have a whole icon set and feel free to replace these and upgrade these good thing is that these are set up with the ability to Scale based on our varibles so if I was to grab any one of these drag it out now I have that component I can grab this Chuck it in here click it and now I have a simple way to scale up my icon so that's all set up for us we can start using this in our design work and building out our assets and when it gets to the components we're going to start filling this section up and we're going to start building out assets that go across our different semantic styling and basically set them up so that our system has a little bit of documentation a little a little bit of structure and it communicates what they do and how they work so a developer can jump in here switch on this and they'll be able to click on these and be able to inspect them they'll be able to read them we'll go through how to add in basically the annotations and also measurement parts to it so we're going to go through all of those in the following videos but first let's build out the first component inside of this design system and we're going to slowly work through this so that we can understand how to use the system and how to build the assets so let's get started so what we're going to start with is we're going to go up here we're going to grab a frame what we're going to do is we're going to draw out our frame and we're want to make this Frame at 56 High by let's say 64 multip by two and then now we can zoom in on this what this means is like 56 high is a nice height for a button uh for basically a desktop if you want to go for a mobile you could look at 48 or uh 44 42 Etc it's really up to you but you'll be able to find the most buttons are about a centimeter in height so what we're going to do is we're going to grab we're actually going to jump up in our design system because we've set up a couple of really fun assets I'm going to go grab one of my little text block assets I have these label assets here and I'm going to actually use one I'm going to grab my Center one right there drag that out and I can basically just copy and paste and cut that one and then jump back to my button and add it in there another way we could have done that is we could go to assets and in our assets we can actually see all of our actual components that are inside of our library itself and like this one it's inside of that type file and you can see that it says type and it says label and I can grab that out and I have my type label because I have this set up with a few nice little bits and pieces I can easily decide to adjust it and modify it the way that I want I want it like that I want it to be I want it to be on the original style let's get rid of that one don't need it we'll Chuck it in here there we go I can call this button and there we are now this Frame I want to be an auto layout because I have this text block that's inside of it it has a height to it it has a width to it I can turn this to an auto layout and what it does is it hugs that button block and by doing so we can see roughly the type of padding that's happening here and I'm going to actually just add in some variable padding and I'm going to actually use my existing variables as they are so I can click this little icon here and now I have a set of varibles now I do have my scaling and I labeled it under REM and REM is a unit measurement that's mostly used in web so if you're making a web application this is really good for you and it is based on a base point of 16 pixels so one ram would equal 16 here is my 16 so I have 0 1 0 0 which means one point and what I can do is that's as you can see that's about 29 right there and I'm probably want about a 32 if I was thinking of pixels so double 16 that's that one one right there and then what I can do is I can see that 16 so that one is a nice and easy one and what I can do now cuz I understand that formula I can actually say 0.1 and I can find that much faster there we go so now I found those two added those in I've got my actual variable signed up I don't need any of this right at this moment for this button as it is if I was to add icons yeah now what I'm going to do I'm going to take that button and I'm G to add some Browning now I already have my rounding variables so I'm going to go and I'm going to pick my medium and this gives it a medium which is a 30 basically round maybe I don't want that much round interestingly enough what I have set up in this system is that we can go to layers and we have now these helpful little different layer components this one makes it soft this one makes it medium and this one makes it really hard so it's like a much harder round so if you thought of the button like a bit of a jelly block that's what we got we got soft medium hard I'm going to go medium and this is another way we can use variables we can use varibles to define basically a style and here I'm I'm using it to define a style and I can say it's medium or I could say it's hard and you can see that the scale changes up the top there and if I wanted to adjust this again in my own way I can say okay I'm not 100% with this rounding I would like it to be a little different how do I change that so I can click out in the empty space here I can go to my local variable and because I have this inside a collection and that collection's called round I have all of these set up here and what I can start to do is actually just change some let's say my medium I wanted to switch my medium I want my medium to be less round right here CU at the moment this feels probably a little too much how about we start to alter our variables we're going to go in here I'm going to actually remember this is 03 which is a lot more let's bring it back to let's say the large is basically about two times which would be 32 pixels and then let's say the next one is a little less from that so we got that and that and then and we're going to go down again this will be about 24 pixels and then we're going to go to 16 pixels and then we are going to go down again that would be our 14 pixels and then here again I'm going down and so on so now I've adjusted that you can see that it will adjust on our button so I'm going to go to that Medium basically styling and now I have a nice 16 pixel basically rounding my Corners done I'm going to call this a button to begin with and what I'm going to also do is now add some outline to it and I can click this little button here and I can actually now start to apply my colors I've got a lot of here so what we're going to actually look at is actually our semantics and primarily focus on those so if I was to go over here I have this primary button and you'll see that in primary there's a fill and there's an outline and there's some detail so we're going to go fill uh sorry we'll go to our outline for our outline I'm going to go to my fill I can click this button over here and I'm going to go down to that semantic set I'm going to go pick that fill and apply the fill I'm going to click on my text and I'm going to go down to that semantic set and out of my semantic set I have uh a couple of text details this is going be primary text so primary text styling fantastic done now I have a button now I have my component that's inside my button that has a bunch of supports that I can change the weight of it I can change the size and Etc so there's a few things going on there and what I can do is basically create this and turn this into a component this means that if I was to drag it off here I can can reuse this component everywhere across my design system and this will be affected by the parent so if the parent changes for example if I was to let's say add in more padding the child will respond to it so that's how we can do that so what I'm going to do now is actually going to start setting up the different states and I'm going to use my semantic uh collection to set those States up so I'm going to click my button here and I'm going to go create I'm going to create a variant which means that this is going to be a variation of button different kind of type different state different version of that button and in my button I'm going to have basically a hover state I'm going to have have a selected State and I'm going to have a disabled state so this is going to be this button here if you click your button you'll notice you have your variable that you just your variant that you just made and I'm going to call this state and because that's going to be my main I'm going to call this main whatever you call it it's really up to you and how you want to build a design system I use main as my word of choice for the main button I'm going to go and I'm going to basically create a copy on going alt shift and drag you can copy and paste however you like or you can add and click that little plus button this one is going to be my hover and this is the value of what variables can do for you because now I can actually go down to that layer and I can go and I can select any of the actual variable layers that I have and one of them is semantic and I'm going to go to my semantic and I'm going to go hover and now as you can see it will change which is fantastic and while I'm hovering and before I go too far let's just click on our button we'll go to prototype because we going actually set up a interaction so I'm going to zoom in here I'm going to drag a little Noodle and this little noodle basically means that we want it to transition from here to here when something happens and that's something that's going to happen is going to be while hovering so while hovering I'll transition to this and you'll see this and what we're going to do is we're going to instead of doing it instantly we're going to do it over time we're going to use use Smart animate and now you'll see that you get a bunch of extra interactions and bits and pieces this is milliseconds so think of a second having a th000 milliseconds so in basically what it be like a quarter of a second it will transition over and that's a reasonable way to transition over you can choose different ways that it can transition we'll get more into this in future videos I'm going to just pick an ease in and ease out so I have that one picked and I have my hover effect going let's keep moving forward and let's make our next step so I'm going to drag this out and I can go back to the top here now I have this new state I'm going to call the new state selected and now that I have a selected State I can actually go down to that layering and I'm going to also set this one up as selected now this is the reason why we are setting this up like this is for what we're about to do next because although my semantic collection allows me to switch between the styling choices it does not allow me to make other changes to my component now what I can do in the selected state is I can go down to my effects add an effect and I can add a focus effect and if you don't see this make sure you have clipping on and that will give you that effect so now what I have is the ability to modify and change this component Beyond just The Styling that we have from our semantic collection and I can also Now set up an animation which I couldn't get from my just my token collection or my variable collection I'm going to Dr bag out another Noodle and this one instead is going to have a different event this one is going to have while pressing and while I'm pressing on the hovered button because you would have it be hovered before you can actually press it cuz you can't press this if it is this so basically we're going to be on this state we're going to press this this state and then it's going to transition to this state which is great and I'm happy making the press a little faster and what we can do now is we can actually just test this out I'm going to draw a frame and I'm going to grab this button and drag it out stick it into the frame and I click at the top here and I can actually add a little flow and I can go plus I'm going to call this button test by doing that I get this little tag and I can press this little button which will give me a popup demo of this Frame another way to do it would have been to go up the top here and choose preview when you have something selected so now I can click on this Frame I can hover over my button and I can press it and as you can see it changes it both changes the color styling as well as changes the actual basically yeah and that's the effect in addition you notice that the text is changing here and that's because the component that was set up with the same styling and semantic and color sets and it changes as well with the button because it's influenced by the parent layer this parent layer at the top here says that it's a select and it will tell the children inside of it to change accordingly so that's how we can set actually set up those sorts of interactions finally the last of all quite easy I'm going to drag this button out I'm dragging this one out I don't just to avoid removing the effect and I'm going to click on this button I'm going to say disabled and there we go I have my disabled button I'll just go change that layer I will call disabled and as you can see it changes to this and I'm going to make sure that that I'm going to remove this prototype noodle off it and when it's on this state nothing can happen there's no interactions it's just disabled so let's take these buttons and let's rapidly create the other variants from our semantic set what I can do is I drag that box down I'll select all of my buttons and duplicate my buttons and now what I can do is I can select for example my button here and I can select that fill and instead of using my primary on my primary semantic set I can use my alternative and I can also click on the text inside of here and also I can use those alternative I could click on multiple ones of my buttons and go there and I can go down and I should be able to and and there we go so I click on my button select this and I can select my primary and I can change that primary to a different primary which would be my alternative primary and I can go to my outline and I can change it to the different alternative outline and I can also set that one as well so you can go through and just basically switch between your sets I'd say grab that text value there and click on this and unfortunately figma errors so we can go primary that the primary alternative that will be the primary alternative text but for the hovered State I'll make sure that as well switched over correctly so we can see alternative outline alternative fill we can see alternative text we'll do the same here and that will be that with this having alternative fill outline and alternative text and here we can see that we have that alternative that we just don't have the alternative text we'll click on this and we can add that in and now I have this whole extra set of styles so I can go up to the top of my component and add another variant and I'm going to call this styles I'm going to select that set and I'm going to call this alternative and I can select and call this one primary and now I have set up a couple of my two Styles and this is basic basically what you'll need to do you just rinse repeat and you'll be able to set up all of your additional styles for your buttons eventually you will have all of the different styles of your buttons with the appropriate uh semantic set and scaling sets and other sets set to it and now I can mag this Buton out so before I do that I'm just going to go click that set I'm going to also click the plus because I have this text item inside I'm going to also add in the nested components which is called label and what I can do is actually call this another name make it a little bit more specific here so let's go over to our layers let's right click on our layers we'll go rename layers and this will allow us to rename all of our layers I'm going to use label but what I'm going to call it is I'm going to say your button label and by typing that text in the front and then using the dollar symbol and the and we are applying the name so now it's called button label which means that I can see button label there and I can see those pieces inside of it as well and now I can switch between my alternative style and my primary style I have my States and all let's just make sure that we tid things up a little more by saying that's a main and that is a hover and this here is my selected and that's my disabled in some circumstances you might not have different styling for disabled you might even just use one disabled button instead of multiple it's not really that necessary here but I just duplicated it so wasn't too much now we have all of those and we also have all of our layering that can apply to it for example this button here can technically be scaled up and we can make it big with the scaling part of after the set we also can use a hard style or we can use our other styles at least and a soft style and get back to my hard style and I can also switch it to my dark mode and I could switch it to the dark mode and I could change it to the alternative dark mode and there we go they got like a dark mode for alternative looks nice on the black just sits there someone so this is where we have the styling options and this is where we can have more of those interactive Dynamic options that take place so what I'm going to do is I'll leave you guys here and I'd love to see what you come up with I'd love to see what you do with building out the rest of the button sets and I would say give it a shot build out those button sets build out these Styles and then jump over here and then have a bit of a Play Change around the rounding change up the different colors that is inside your dark or light mode set so you can go to for example let's say your light mode set and you can come in and you can feel free to adjust these colors if you wish you can always duplicate the project and clone it again so have a play enjoy and in the next video we are going to start with building our input Fields then we're going to have our transitions we're going to make our label come into our input field and get a little blinking cursor in input field we're going to have our variables on our input field we're going to have the different uh ways to control our for our input field do search input fields and other types drop down input Fields Etc so that's what we're getting into next and before we wrap up for the day we have a beta for the variable toolkit that we've been building and this variable toolkit is a quick and easy toolkit that basically allows you to directly apply all of your variables straight to your assets so for example if you're using those buttons let's say we grab our frame here I could easily apply a fill apply an outline I could have a block inside I could apply quickly my assets directly to my component or my frame and I have all of my variables set up in addition it also allows you to quickly apply your different styling you can click on this you can go down here and add in some rounding you can pick from your rounding collection let's say we want the 16 on there and there we go now we have that 16 on our asset we can basically use this kit to rapidly create all of our assets we can easily add in some padding and go here and I can go to my scaling and I can add my 16 padding I'll add a auto layout padding 16 done and now you have your 16 added to your asset and you can be very specific if you like and assign different variables to different corners of it with one click so if you'd like to learn more about the variable tool kit as well the link for the beta test is in the description box below as well as the actual pixel in design System Light is in there and until next time design think is keep thinking keep creating and keep building amazing things and I'll see you all in the next video

Channel: Pixellink

Views: 856

Keywords:

Id: tIf36ojtVUM

Length: 36min 38sec (2198 seconds)

Published: Sun Feb 11 2024