Design System 101: free Beginner Figma Tutorial for UIUX Designers

by the end of this video you will learn what is  a design system and how to use a design system   to build this the formal definition of a design  system is a collection of reusable components   patterns and guidelines that helps designers and  developers build consistent and cohesive products   but you can just think of it as a lot of  templates for designers so if you need a   button just go find a button in the design  system copy it paste it in your file change   the text a design system component will specify  the spacing the color the font everything you need   so you don't have to worry about the nitty-gritty  details when you are doing your project usually   there's a dedicated team building the design  system your job is to learn how to use those   Design Systems to design for your team's  project and let's just dive right into it   please go to figma community and search for the  ant design design system the title is ant design   open source and the thumbnail shall look like this  please click into it and then click open in figma   as a designer who work in a large tech company  this is a design system that is similar to what   I use every day on the left side you can see  that there are so many pages in this design   system and it could feel overwhelming but here's  a secret you only need to know one page to use the   design system just go to the second page called  components overview and this is like a huge menu   of things every card here is clickable if you  need anything come here look for it click on it   and it will take you to the page that documents  that component now we are on the button component   page on the left side of this page it has all  the documentation that tells you how to use this   component and when to use this component and on  the right side of this page right after components   it has the component that you can copy and paste  to your design file if you need to find another   component just go back to the components overview  page on the left and then you can choose any other   component to look into again it will directly  take you to the page of this specific component   and on the left there's the documentation and  on the right there's the component you can copy   in a tech company it is unlikely that you  will start a project from an empty file   that is why I also want to introduce you to  this third page called templates and pages   usually for the main pages of your tech product  they will have a template for you ready in the   design system however it is also likely that you  will just simply copy some of your colleagues work   as the starting point of your new project because  your work could be just to add a feature to this   existing product starting now I will take you  through how to use this ant design system to build   this exact e-commerce page for Sellers and this  is a listing page first let's add a page to this   file and then call it design system practice keep  in mind that when you are actually working with a   tech company never add another page in the design  system just for your own project you should always   start your own project in a different file this  is more for the practice purpose so I put it here   let us start from the templates and Pages page and  then find a page that's the most similar to what   we want to create let's choose the search table  on the bottom right and then copy that to our   page you can see there are many elements in this  page is different from the page we want to create   the tip is to be patient and focus on one section  at a time let's start from the header I'm going   to create a rectangle just to highlight where I'm  focusing on you can do the same add a stroke and   then minus the fill so it won't block our content  now pause the video and try to adjust the header   part to this design here's how I did it first zoom  in and then click into the text to change the text   then click into the logo now keep in mind that  there are multiple layers so you might need to   click multiple times in order to select the  right thing and then hit delete when you are   working from a design system component deleting  an element doesn't really delete it it just hides   it so you can always turn it back on and on the  left side you can see that there's an eye icon   that you can turn on the eye and turn off the eye  so what is the point of using a design system here   let me demonstrate if you select this element and  then right click and then hit go to main component   you can see that there is a main component built  in the design system and then if you change the   main component in the design system usually it  will be the design system team making this change   for example if one day your entire design team  decides to change the font of your entire product   to SF Pro then if you go back to your design you  don't have to change anything in your file and   everything in your element will already be changed  into this new font SF Pro simply because this is   tied to the main component in the design system I  will hit command Z multiple times and let's keep   going for the right side of the header click into  the text to change the text click multiple times   on the profile icon and then hit fill and then  click choose image to replace the image with   your personal profile picture to turn this from  a square into a circle just select it again and   then go to the top right and then turn Corner  radius to its maximum we are now done with the   header now let's work on the sider now pause the  video and try to adjust the sider to this design   here's how I did it first delete all the icons by  clicking into these elements again because there's   multiple layers in each component that is why you  need to click multiple times to select the icon   once this is done replace all the content with the  new text and we don't really need the last row so   we can simply delete the entire last row please  also don't forget to replace the content for these   secondary pages now you may notice that the unsold  page is selected but we want the active page to   be selected this is where variants come in select  the active component and then go on the right side   toggle on selected and you can see that this  component becomes the selected component   there are actually three properties you can  play with here so for the unsold just turn   off the selected property and here we have  the sider if you're curious about how this   component is set up with multiple variants just  select one element right click and then select   go to main component this dashbox includes all  the variants and properties this component has   now that we're done with the sider let's work  on the breadcrumb the breadcrumb is the top   component on the right side so pause this video  again and see if you can build this breadcrumb   here's how I did it first update the content  for the first two texts then delete the rest   of the elements then let's select active and  then go to the right and then turn current on   current is a property that this design system  component has and it's not like every single figma   file will have this property named current it's  all based on how this component is built in the   design system so different components in different  design system will have different properties under   different names but you can always turn things  on and off to check what these properties are   and now let's also rename the header to active  listings and then you're done with this part   only two parts left for this part please  pause the video and try to see if you can   build this search bar I will give you a hint  you have to delete your current component and   then find the search bar element in the  design system and then paste it to here   here's how I did it first I select the component  that we have in the template and I deleted that   because this element is not really a traditional  search bar so in order to find the search bar   element let's go to the components overview page  and let's click the card that's named under input   and then the search bar is on the top right of  this search box so let's copy this one by hitting   command C or Ctrl C then let's go back to our page  and then try to paste this element on our page   here you might encounter some difficulties it is  difficult to place it exactly where you want it to   be this is because design system templates usually  utilize a lot of layers of Auto layout I have a   dedicated video on auto layout on the top right if  you want to check it out but here the solution is   that you have to select the right frame you need  to use some trial and error and the right frame   here is named under content once you've selected  content just hit command V or Ctrl V to paste   the element it will go directly below the table  because there's already Auto layout set up in this   Frame so in order to move it up just use your  keyboard to hit the up button and then it will   move it on top of the table to change its length  just select the element and you can drag The   Edge to the right or to the left now how can you  decide how long you want this element to be right   in a tech company you usually don't make this  decision just based on how it looks instead you   can use a column grid so select the larger element  that this component belongs to in this case it is   this large right side box that's named under page  container you can see that there's a column icon   and right beside it there's an eye icon click  the eye icon it will automatically turn on the   column grid and then you can see the guideline for  horizontal alignment so I'll reselect the search   bar and then drag it until its length is lined  up with the grid now grids are often used for   horizontal alignment but not vertical alignment  use the grid whenever you find horizontal   alignment difficult to make but don't let the grid  constrain your design it is okay to not follow the   grid sometimes now we are off to the final most  difficult part which is the table so pause the   video and see if you can figure out how to turn  your table to this here's how I did it changing   the text shouldn't be that difficult but each row  is repeated for several times and I don't want to   change the text every time so I'm going to delete  the rest of the rows and focus on making the first   one perfect you will have to click multiple times  to select the right component and you will have to   hold shift to multi-select and here as soon as you  delete all the rest of the rows you can see that   the column width has changed this is again because  of the auto layout of this design system component   and it also seems that this width is impossible  to edit this is because there's a limitation in   the design system component and this happens all  the time in this case right click and then select   detach instance you should be able to adjust the  width now detaching an instance means that you   are detaching it from the design system element  that it used which means you are detaching from   all the setups of this element that is why it  is more editable but the cons to this is that   whenever the design system component changes  it will no longer reflect on this new element   for the second column you might encounter the  difficulty of replacing this text with an image   so here's how I did it go to the components  overview page and then let's find image   once you are here copy this element and then  paste it in our practice page you can see that   it is difficult to put this exactly where we want  it to be this is because this element is also not   detached yet so let's select this element and  then right click and then detach instance here   I use the shortcut command option b now if  you select table cell text you shall be able   to paste the image directly into this element  and you shall also be able to delete the text   and you shall also be able to adjust the width  of this entire element to be more precise you can   go to the right and then choose hack content  you should be able to adjust the rest of the   first row by the same method detaching instances  many times and then replacing the content many   times and also clicking just to select the  right component and of course adjusting the   width and height because things are constantly  changing because of your editing when you are   doing a project on your own in the tech company  try not to detach instance if you can make the   adjustment without detaching the instance but if  you feel like this element is not changeable it   does not fit your need then definitely detach  the instance or work with the design system   team to create a new component so that it meets  your team's need and as a recall if you want to   select multiple rows just to delete the rest of  the rows you need to hold shift on your keyboard   and as soon as you finish polishing up the first  row you shall be able to easily copy the first   row to form the next few rows however you'll  have to do it one by one just because of the   order that these different elements are grouped  and once you finish this please also delete the   right side of the top element and in order to  left align search table you will have to select   table toolbar and then on the right side play  with the auto layout so change space between to   pack if you don't understand what this means check  out my auto layout tutorial on the top right and   finally change the content and you've completely  finished this tutorial wow I am so proud of you   you just learned how to use the design system and  do you know where this page actually came from is   actually the active listing page from eBay seller  Hub where eBay sellers manage their listings   and you can see the huge difference between using  the eBay design system versus the ant design   system right so even for the same set of design by  using a different set of design system the style   the visualization and the feeling of the product  will completely change I suggest you to take a   screenshot of another app or website that you like  and try to recreate that page by using this ant   design system you'll find it very entertaining  very fun and also just surprising to see the   final result now I also want to tell you that I'm  developing a figma course so please check out the   link in the description to help me fill out the  questionnaire and you will get Early Access also   discount whenever this figma course get released  this Figma course will be designed for people like   you who want to learn more in depth about figma  but in a fun and very concise way and don't forget   to also check out my other frigma tutorial videos  here I'm Aliana I will see you in this video bye

Channel: Aliena Cai

Views: 10,022

Keywords: ux design, ui design, figma tutorial, figma tutorial for beginners, figma design, figma basics, figma for beginners, figma ui tutorial, design system, figma design system, aliena cai, learn figma full course, figma course for beginners, design system figma, learn figma, ux design course, ui ux figma, ui ux design tutorial for beginners

Id: shuIfhrLIP0

Length: 15min 20sec (920 seconds)

Published: Mon May 08 2023