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