Creating a Figma Design System: Typography, Spacing, and Sizing

hello and welcome to an envato test plus tutorial i'm adi pordilla and in today's video you'll learn how to create a design system in figma well actually a part of a design system you see recently i designed this wordpress gardening theme and this will eventually be coded and you'll be able to download it as well now because the theme will end up in the hands of a developer i wanted to create a design system for it and this system will help both of us it will help me design new pages in the future and make sure everything is consistent and it will also help the developer by creating an efficient coding process because the system contains all the colors all the typography information all the specs for sizing spacing and so on now in this tutorial i'm going to show you how to tackle two sections of this design system and hopefully that will give you an idea of how to implement your own and those two sections are typography and spacing and sizing so let's begin with typography okay when it comes to typography the very first thing i do is start by defining the typefaces this is a wordpress theme for a gardening website right so as with any other web design project it's really important to match the typefaces that we're using to the actual content of the website and for this i chose to go with a classic pairing between a serif and a sans serif typeface the serif will be used mainly for the headings or large titles while the sans serif will be used for body text now for the serif i chose rooney this is a typeface that i got from adobe fonts because i have a creative cloud subscription and it just makes sense for me to get my my fonts from here so rooney is i think a very organic very natural feeling and very playful serif typeface it's not as decorative or ordinate as the old style serifs instead it has a slightly more modern vibe to it so i think for the topic of this wordpress theme gardening it will work beautifully now to pair this i chose freight sans pro this is a sans serif typeface that i think works really well for pages that have lots and lots of text like in a blog for example it has a slightly higher x height than your typical uh typeface and that makes sure it its readability is also pretty good and it matches pretty well with uh with rooney now obviously for your project you would be choosing any type faces you want but this is my my process so what i do after that is i go to figma and i of course create my my new document here and the first page i call it design system typography and in here i have four frames one where i'll create a visual representation of the typefaces next is for headlines links and then the last one is for paragraphs and other miscellaneous items so for the typefaces what i like to do is just grab my text tool type in a text it doesn't really matter what you type in and then i set that that text to the typeface that i chose and i can also change the the font size and the line height to uh to whatever i see fit here this doesn't really matter these metrics don't have to be exact what matters is that you have a visual representation of that uh typeface here and then i just in a different typeface one that i'm not using in the the actual design i just type in the typeface name and i just create usually i just add an auto layout here and i set 16 pixels of distance between these two items and just call it a day just so that i know okay this corresponds to this and then i duplicate this and i use the other typeface freight sounds pro and i also changed the name here and that's it now i have a visual representation of the two typefaces that that i'm using now moving on let's cover headlines or headings or titles whatever you want to call this basically here i'm going to create again a visual representation of that heading or headline and then underneath uh we'll have some text with the key metrics for that for that style meaning font family font size line height letter spacing and font weight now one of these items will look like this so let me zoom in here so you can see what we what we have we have the visual representation so this is a full size replica of the actual style so we're using rooney medium 72 font size 96 line height and then underneath i just write down these properties on family size line height letter spacing and weight and i'm doing this so that the developer can simply print this uh this frame this artboard or open it as a pdf on the side and just have all this information available to him without having to you know open figma click on each individual text element and get its properties from here i think it's much much easier now how exactly did i get to these values 72 96 well when i'm creating the typography for a project i always like to use a type scale and a type scale basically looks something like this we start from a base font size and then each font size that follows is a multiple of the base and a set ratio so in our case this scale starts from the base of 16 pixels and the next value is 20 pixels which is 16 times 1.250 this is the ratio now for our project i'm going to be using an 18 pixel base size and the scale will be an augmented fourth or 1.414 and here you can actually get a a demo of what or how those headings will look like and if you look here we have 71.96 pixels i always round these off to the nearest full value so 71.96 i round it off to 72. uh 50.89 i round it to 51. 25.45 i round it to 25 and not 26. my rule here is basically if the decimal places or the value after the decimal point is higher than 50 then i round up if it's lower than 50 i round down so if this were 25.51 i would round it off to 26. so based on these i got 72 pixels from here and i used 72 pixels on the font size now what about this line height well i usually start with this if you don't specify a line height figma just automatically calculates it for you and if you click on it it actually tells you in this gray text here that the calculated line height is 90. now you can change this and because i like to use the eight point grid system in web design where margins paddings heights things like that are calculated in multiples of eight i like to set the line height in multiples of eight the font size doesn't really matter it doesn't have to be a multiple of 8 as long as the line height is a multiple of 8. this is of course totally optional you can set whatever line height you feel works best but for me uh setting this up property to a multiple of eight just makes it so much easier for me so in my case i'm going to choose 96 pixels so with that the very first headline is done what i do now is i select this i duplicate it and i set the styles for headline two so for headline two i'm going to be using the next value on the scale which is 51. so i'm going to say 51. to get that value to where i want i delete this line height hit enter now it's automatically calculated to 64. and for headings i usually like to go a little bit higher so i'm going to select 72 and 72 again is a multiple of 8. so our headline 2 is going to be 51 pixel font size 72 line height zero letter spacing and weight will also be medium and then what i do is i simply replace these values here and then i move on to headline three and then i just repeat the process so for headline three we're going to be using 36 pixels but this time we're going to be using a regular and for line height we'll be using 48 pixels and then update these values as well so 36 48 regular and then you just repeat the process for the rest of the headlines heading 4 5 and six so let me do that for you right now all right so for headline four i'm using the next value on the scale with a weight of regular for headline five i'm actually switching things up because this is now a lower font size it's getting close to the font size of the body text so i'm going to use the body text as a font family which is freight sounds pro and here i'm setting this to 18 pixels 24 pixel line height and semi bold as a weight also this style will be used for headline five but also for the form label the active pagination item and the active filtering item now when you're first creating this system you will probably just have the headline 5 selected or entered here these values can be added as you're using the system and as you're adding new elements to the pages finally headline six we'll be using the same body text typeface 14 pixels size 24 line height four percent letter spacing and weight semi bold now i added some letter spacing to this because one it's a small font size it's um a bigger weight than usual and also it's uppercase and whenever you're using uppercase letter small font size it's always a good idea to add a little bit of letter spacing because it's much easier to read that text as opposed to not using letter spacing so with that the headlines are now done and what i'm gonna do now is create the links and the styles for paragraphs and other miscellaneous items just like i created these uh these headings so let me show you those right now so i'm just going to walk you through these because the process is very very similar for links we have a regular link we have a special link that we'll use in places like post metadata maybe in the footer and then we have a filtering link because in our theme we're going to be using a filtering system where we can click on certain links to filter a list of items so this is what it looks like in its default state if you remember previously we defined the active filtering item right here and it's using the same style as headline five but this is this will not actually be a link so that's why i um i didn't put it in this other frame so those are the links and then paragraphs and other miscellaneous items well we just have the style for the paragraph something for a muted text then a style for caption or helper text a style for breadcrumbs because we are using breadcrumbs in the design and a microtext that's something really really small and with that the typography part is complete these styles that you define here are more than enough to get you started now of course depending on your project you might find that you have other styles that uh you could add to this system so go ahead and do that either in one of these categories or just create another category here that matches the purpose of those elements so now let's talk about spacing and sizing now for spacing and sizing i'm just going to browse through these and show you how i i prepared this in figma and what kind of information i include in here so i've created a new page called design system spacing and sizing and i have two frames for sizing and spacing so let's start with this and let me actually hide the ui here so we can see a little bit better first i start with a brief explanation of the eight point grid system i'm using or eight pixel system i'd say what it is i give a short example and then i move on to images on images i specify that on large images i don't use the eight point system because i prefer using a 16 by nine ratio and usually when you have a set width the height will change proportionally so you can't have that height set to an to a multiple of eight if you want to have a fixed width then i uh talk about the text i talk about how the font size is based on the type scale and i also talk about the line height and how the line height value is based on the eight point system uh then i talk about the icons so what should we know about the icons well again they're following the eight point system the height of the icons should be 16 24 and 32. then i cover dividers so what kind of dividers are we using and i also talk about the width of the dividers next are margins and paddings now i am using the eight point system not only for width and height but also for margins and paddings and especially the top and bottom values and here i actually give an example of an actual element that was designed with this rule and i specify what that element is and i also specify some of its characteristics here so the developer can look at this and say okay so this is a button and based on what i read here i can now see that this button has a padding of 32 pixels left and right which is a multiple of 8 and 16 pixels top and bottom which is also a multiple of eight so this is how i must now code this button so that's for sizing for spacing i talk about horizontal spacing so how much space do i need to put in between these two items for example i document this and i say that horizontally items close to one another are spaced apart using these values and what value you use of course depends on what elements you use so for example in this tag cloud the items are separated or are spaced 16 pixels apart but in this menu the menu items are spaced 64 pixels apart then i talk about vertical spacing right so vertically how much space should i leave between elements and again i document this using a few examples here i have a footer and further down below i have a form and of course all of these elements are documented separately here i'm talking about spacing and sizing in general so these are examples of how i create the spacing and sizing section from a design system yours might vary but feel free to copy this and use it as a template for your own projects and when doing um documentation like this you don't really need to do it in figma you can create a pdf with it and have it as an annex to the design system it's really up to you how uh how you decide to do that and that's how you can start working on a design system in figma you take things step by step and you create one element at a time now this video is part of a series of three tutorials and in the other two i will show you how to create some of the other parts of the design system so make sure to stay tuned for that for now thank you for watching and i'm adi pardillo i'll see you next time

Channel: Envato Tuts+

Views: 20,663

Keywords: figma design system, figma design system tutorial, creating a design system in figma, wordpress design system, design systems, design system figma, design systems figma, design system sketch, how to build a design system, ui kits figma, design system tutorial, figma course 2020, figma tutorial for beginners, design systems ui, figma ui design, figma for beginners, design system, figma design, figma, how to use figma, product design, adi purdila, ui design

Id: FsdG6uwJ_vc

Length: 21min 54sec (1314 seconds)

Published: Mon Sep 28 2020