Create a Figma Design System - Fundamentals (Part 1)

hey beautiful people it's misgo here you guys have been asking for a design system video for quite some time well guess what today is your day let's get fired up all right guys so before we get into it i've actually created a bit of a presentation and if you appreciate the love and care that i have for you guys please make sure to gently smash that like button so i want to give you guys all a bit of an introduction about design systems mainly because i don't want to go in and show you guys how to tactically create one in figma if you don't understand the fundamentals so without further ado let's get into it what i want you guys to imagine is every single web page or screen in an ios or android app is created by atoms molecules and then organisms and you're thinking what is this this is science class msco what are we talking about well i'm actually referencing brad frost's atomic design framework brad frost is a ui designer or ux designer and he created his very own framework about how he thinks about design systems so let me walk you through how we break this down on a web page the atom the basic fundamental building blocks of a web page is called an atom and you might see this through a color a label or even the spacing between specific elements these are called the atoms or what we refer to as the atoms in the atomic design framework then when you combine a couple of atoms so it could be like colors and a label and a shape then you will create something called a molecule and this molecule can be seen as a button a form input or even a checkbox so as you can see here on this example you have a label and you also have a rectangle and a color so you've joined a few atoms and you've created a molecule all right so then once you've got a number of molecules and you join them together and you create some magic and something happens then you actually create an organism and an organism is born so generally you can see this as a sidebar or even a header so then if you take a look here we have a cyber that is actually created with a number of organisms so you've got like a profile card at the top and then you've also got a button which is more of a molecule and then you've got a bit of a navigation over here and if you dig deeper into that you've actually got individual atoms that have created all these elements right now once you've got your atoms then you've got your molecules then you've got your organisms what happens when you combine all these organisms together so you combine a header you combine a sidebar you combine a content block what do you create you create a template so obviously this would be a template that you have for potentially a landing page that gets utilized on lots of different pages across the website so once you've joined all these organisms together you create this final form called the template now once you've got the template the most important thing that you do need to do is to actually gently smash that like button if you appreciate this presentation i'm kidding guys but what you no seriously like what you really do need to do is you actually need to subscribe and then turn on the bell notification so you get notified every single time i launch a new video seriously guys jokes aside what you really do need to do so you've got your atoms you've got your molecules you've got your organisms and you've got your templates once you understand that concept then you need to start actually creating your very first design system and i'm going to walk you through exactly how we do that now here is the designer ship design system that i've mentioned in a number of videos as well oh and by the way if you are interested in this design system it is for sale you can go to the link that i have left in the description below use the coupon code to get 10 bucks off and you'll get a lifetime of updates as we are consistently updating this design system that you can utilize across all your design projects so now that you guys understand the sort of atomic design framework you will realize that on the left side in this layers panel you will realize that we have broken our design system based on this fundamental understanding so you've got your atoms and you've got your molecules then you've got your organisms and then you've got your templates so the atoms in our design system obviously design systems can be designed in many different ways this is just our unique take on it colors we've got all our colors are set out we have neutrals primary secondary success morning error and shades this has been perfect for us and we don't want to blow up our color system because we don't want to be using so many different shades of all the different colors that we have now the most important thing that you do need to understand is that each color is part of a color system in our color styles so for example if i was to draw down two boxes and i wanted to make these our primary blue which is over here let's just quickly do that and if i wanted to change this and update this primary blue across our entire design file it would be very time consuming if i had to go through each one and update this uh for each item now what we have done is we have turned this blue into a color style as you can see here and what this allows us to do is actually pick it out from our color styles and if we decide to change this color this blue primary blue to for example just a shade darker then you will see that it changes all the items or elements in our design file that is using that color system so you'll realize that this is extremely powerful and the reason why you need to get the atoms down and sort of set in stone right away is because every little thing in our design system is leveraging the atoms so the colors of the primary buttons is leveraging the primary color from the color system so i'm not going to go into too much detail with this because we can spend hours talking about design systems but in this introduction video i'm going to walk you through what we have feel free to take what we have and apply it to your own design system but if you also want to purchase our design system feel free and it is on a limited sale right now so we have our colors then we also have our topography and this is very important for you guys to understand as well because type pretty much helps us create every single category of elements in our design system so we have two display types which i generally used for marketing websites so if you have a marketing landing page you generally want a larger heading you don't want to use a tiny little heading which gives which doesn't really feel important you want to have something that's really big and bold then we also have our headings as you can see here and then we have a subheading which is something that a lot of design systems actually forget to include and the one thing that you really don't want to do is break out from a type scale so if you have a heading for example let's just grab this and put it over here it is very common for you to have a subheading underneath it so generally what we will do is we've actually created our own subheading to fit nicely underneath the heading and it still scales quite nicely so something that you want to make sure you don't forget then we also have our basic paragraph uh styles we generally have three starting from 14 16 to 18 depending on where the paragraph will be placed 18 generally works a little bit better on marketing websites because you have larger fonts then on ui design work we generally work within 14 to 16. then we have our captions and our footers so this is how we set everything up we also make sure we have styles for the weights as well because this will allow us to let's just say we have a heading i can go in and i can quickly select whatever i want without having to having to tinker and specifically define should this be semi-bold bold or just regular so here we have that already defined within our type scale sorry our type styles so boom and boom and then we can obviously change this to a primary blue and if we ever decide to change the primary blue then it all updates as well then we have our spacing that's included this is the four point uh this is the four point spacing grid so generally not all design systems will have spacing included but we generally will work with um not all projects but some projects do have vertical rhythm so we include that as well then we have our grid system this is based off the bootstrap grid system so if you have a custom grid layout feel free to use it there have been questions around specific details about a responsive grid layout guys what i want to reassure you we are designing for responsive web in the 21st century each grid layout is going to be a little bit different because each web app or design or project that you work on is going to be different so work within the realms of what is best for your project there is no one way to defining the exact or perfect grid layout for your project guys so just rest assured then we also have our icons in our atoms because these icons are pulled through into everything that we do so for example if i put down a button let's just quickly show you guys pull down a button over here a little bit slow sorry guys and i want to turn on the icon on the left hand side then if i decide to change the icon i can go back to my layers i can go here let's just pull this up and i can change the icon over here so i can make this a cloud boom cloudy button so this is really important guys that's why you have to set up your atoms really well then you we also have a drop shadows so once you've got your atoms set up then you need to start to think about your molecules so obviously you have like alerts you will have accordions you have breadcrumbs check boxes we have drop downs buttons pagination all this already set up in our molecules now this obviously this video isn't about how to create this this is more of an introduction to help you guys understand how to set up your design system and how to think about your design system so i'll walk you guys through all the different categories we have buttons we have tags as well we have sliders we have progress bars we have tabs we have inputs toggles lists forms tables modals throats getting dry tool tips date pickers and toasters and this is something that's actually currently our work in progress then as you notice that we have our organisms underneath then we have a set of headers and also the side the sidebars now something to help you guys understand is that a design system can be very can get quite advanced as well so for example what we are currently doing with these organisms over here and this is uh going to be really really deep so if you get lost don't worry we will be covering this in an upcoming video about design systems but we are structuring all our organisms with master components now if you take a look at the sidebar over here right so you can actually turn on whatever you want in a sidebar so let's say you want to have a bit of a profile at the top and it brings out the profile of the user you might want a cta to it could be and create it create a new campaign and then you can actually turn on an icon on that you can turn the icon on the left and pretty much you can do whatever you want you can add some lower content to the bottom of the actual uh sidebar or you can turn it into a collapsed one so this is the power of a design system and the power really comes into the planning and the thinking and the creation of your design system because a lot of design systems will potentially create all these different variations of a for example sidebar and you would turn all these sidebars into a component and really you would just be flicking through these ones depending on what you which sidebar you want but what we are creating is a master component which allows us to toggle whatever we want on and off within one sidebar alright guys so hopefully this video was extremely useful and it helped you gain a better understanding of how you can think about design systems how to get started some of the categories that you should focus on because it is extremely important for you to understand the power of a design system to really streamline your workflow and become a better and more consistent ui designer oh and just remember guys there is a limited sale if you do want a copy of our design system that we are updating and releasing new updates every single month then make sure to check the link in the description and make sure to use the coupon code to get 10 bucks off oh and by the way my seven figure freelance to agency course is finally coming close to launch i plan to be launching this in june or july and this is going to be a video based course where i will help you guide step by step on how to build a personal brand to getting your first leads to building and growing your freelancing career into a seven-figure design agency i'm going to walk you through step by step on how i did it and also walk you through all the little details on how you can excel as a designer so if you are interested as well make sure to check the link in the description to register and subscribe to get earlybird access i will see you in another video very very soon [Music] you

Channel: Mizko

Views: 33,708

Rating: 4.9604707 out of 5

Keywords: figma, figma tutorial, ux design, web design, ui design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on, figma design system, design system, ui design system

Id: G1xmkQeExJo

Length: 13min 42sec (822 seconds)

Published: Sun May 02 2021