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

In this Figma design system video tutorial, you'll learn how to develop two sections of a design system in Figma, giving you an idea of how to implement your own: typography, and sizing and spacing.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[abayomioloyinde]

Ardi Purdila as usual, great content, this man made me good designer as far back as 2015

[markovujanic]

Very much enjoyed this video, high quality as always from Adi. Thanks

[niwala]

thanks for this such a clear and brief explanation. my every doubt about typography design system is cleared now. thank you so much sir😍😍

[umerfarooq]

Thank you Thank you! This is very helpful.
Next on Color Theory in Figma and Some interesting Web Layout Design in Figma.
Thank you.

[ekaterinadergam]

So clear explanation and speech is perfect!Thank you!

[onyedikachiibejih]

Why did you opt for an Augmented Fourth Scale and not Golden Ratio Scale?

[jameshskim]

Is it possible to a have access to the figma file for Spacing and Sizing? :)

[SeanGilchrist]

Loved this! Very thorough....thank you!

[salemmohammad]

great video! Are there any guides that provide recommended values for padding and spacing within the various sections in the page? Or maybe some websites that can be used as a references for this?

[rachaeln]

You said what spacings you use are determined by the elements used but is this initially established by just seeing roughly how it looks on a page and then matching it up to the 8pt grid?

[thineshkumar]

What font name and size using in typography heading, description, body heading please teach

[ramzouu-gaming]

Thank you man really you deserve a big like and a subscribe.

[meetpandya]

I am always been a fan of his work, and keep coming for more videos to learn about the deisng, thanks for the video and can we get a figma file link for this?

[mintcat]

Is your explanation file on figma available for download?

[rogersmestanza]

Hi, I'd like to downland this material, i can't find the downland link. Please, help me!

[reemalhalbouni]

Where can I find the figma file for this?

[yeseniagonzalez]

How do you make the frame/background when you add elements?

[katoetonic]

Understanding that your using the 8pt grid method for design is there a simple calculation to keep in mind when establishing line height? I know it should be divisible by 8, but any advice on a rule to follow?

[mayank_upadhyay_]

I subscribed, this information is pure gold ♥️♥️

[therealnero]

How can you create a design system before even starting to sketch a lit bit of the project ui/ux, you need first to have an understanding of what you're going to build, a lo-fi design then before creating the hi-fi you make the system like which typography you're going to use and colors etc.