Build it in Figma: Create a Design System — Foundations

Create your style guide, type scale, and brand color scheme and turn them into shared styles, grids, and typography to kick off designing a design system from scratch.

#Figma #DesignSystem #DesignSystems #UXDesign

[fajleyrabbe]

6:00 Typography
35:30 Color
44:30 Create color shade with gradient(tips)

[katscandance]

The more complex designs I’m creating, the more I love and appreciate design systems 🤩

[thegreatdream]

Just a little fact from someone who loves math: it's a myth that the golden ratio is found "everywhere in nature". It's found in cacti and in some flowers, but most other places it's "found" are by people who are explicitly looking for it because they've heard it's so cool.

Don't get me wrong, it's *mathematically* an amazing number - a Pisot number (irrational number whose powers approach integers) - the most irrational number (by a certain measure of irrationality) in existence - its continued fraction form contains an infinite series of 1s - etc.

But it is *not* actually aesthetically much more special than any other number except because people use it all the time so we're used to seeing it and it looks familiar!

[albertalbaba]

For a moment I asked myself: "How does the lady in the video keep that smile for 1 hour?" 🤣🤣🤣

[mandadtabrizi]

Thanks for doing these. I feel I just watched an episode of Bob Ross if he was a UI/UX designer

[mariachiara]

Thank you so much for the clarity and step-by-step examples! One hour flew by with you!

[fernaaki]

Why did I pay for a Figma tutorial online class? 😭this is way better and it's free 😭

[windmaomao]

For some reason, i felt people work in Figma always choose to use bigger font size. However if you look at the website, even this website, you will see the base case is 14px. Not only that, the <h1> is only 20px. Shocking?

[dhritimansen]

Thank you lord for this. Thank you Figma team. 👏🏾👏🏾👏🏾👏🏾👏🏾🙏🏾🙏🏾🙏🏾🙏🏾🙏🏾

[YUGlMOTTO]

I love Figma - thank you for making the tool & resources to educate designers around the world! - Fellow Product Designer

[sarahtara]

This was really great! I’m looking forward to watching the whole process. You have an amazing teaching style! 🙏💥

[dmitriireadz]

Would be great if you could drop all the links mentioned in the video in the description.

[jeremykerner]

Love that you're doing this series! Considering the move from Sketch and this is a really great walkthrough.

[human-connections]

Your style of talking and comedy reminds me so much of Mac in Always Sunny. Also great stuff, super helpful.

[Heydjcam]

Very helpful! New to figma but it's been fun and easy to get into a productive groove. Thanks for the help!

[paulocgrf]

23:15 - The shortcut to increase or decrease font size is Cmd+shift+<>

[specialkate]

This is so great! thank you so much, I am just learning to build my first Design Systems, these tips are super insightful

[ninajarah]

I'm two years late, this is cool-overwhelming stuff. love the FONTS t-shirt!

[newtonheath]

This is an amazing resource. One thing I would love to see is that if you could list the plugins you used in this video in the description. Thanks.

[HopeBettaDayz]

When you randomly come across family while looking for tutorials. Holla! Thanks for this! It really helped!