Create a Design System with Figma - Full Course

Learn how to build a design system in Figma. By the end of this course you will become a master of building design systems in Figma and understanding master components.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:03:03) Creating a Color System
⌨️ (0:22:23) Building a Type System in Figma
⌨️ (0:35:16) Elevation
⌨️ (0:57:33) Product & System Icons
⌨️ (1:11:26) Text Legibility
⌨️ (1:30:58) States
⌨️ (1:50:53) Selection (Interaction)
⌨️ (1:55:02) Understanding Layout
⌨️ (2:04:15) Pixel Density
⌨️ (2:12:05) Spacing Methods
⌨️ (2:24:19) Responsive Grid Layout
⌨️ (2:48:59) App Bar - Bottom
⌨️ (3:07:55) App Bar - Top
⌨️ (3:22:37) Backdrop
⌨️ (3:41:58) Banners
⌨️ (4:06:45) Bottom Navigation
⌨️ (4:19:15) Buttons - Floating Action Button
⌨️ (4:38:54) Buttons
⌨️ (5:06:04) Cards
⌨️ (5:41:10) Chips
⌨️ (5:58:15) Dialogs
⌨️ (6:28:56) Date Pickers
⌨️ (7:32:22) Dividers

🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse

--

[sabrinetizaoui]

High value content! Thank you very much for making design knowledge accessible to everyone. It's really rare to find quality content for free nowadays unfortunately! I salute the initiative and the mindset behind it

[karaokewaala]

Wow y'all picking up the trends and releasing faster than many big websites and platforms. So great!

[Nabhel]

Thank you so much, this is very detailed, i truly appreciate the team for making this knowledge available for free.

[JaredMSewell]

Thanks for the Figma course. VERY helpful information...
The A prefix in the Material Design color charts (such as A100) refers to "Accent". Which is what the lighter colors are meant to be used for.
The accent should be used for the floating action button and interactive elements, such as text fields and cursors, text selection, progress bars, selection controls, buttons, and slider links.

[germanandresruizhernandez]

I love FCC, it's the best YouTube channel of the web

[DasJaegar]

A tip from a fellow designer:

Check if the developers plan to use a framework, you use the components from their to design

Oh shoot...this is a must! I haven't watch it yet but props for posting an 8h course for free!

[gregtegreg]

For around 15:49 > you can have it cleaner > a Frame called Colors > inside create an Auto Layout component and duplicate that for all the colors.
So instead of Frame / rectangle color / 2 text fields you'll have > Frame / Auto Layout Frames

[viciouz]

God bless you for churning high quality courses for free.

[nikolov]

Once i finish this video i will get a subscription from your page. I mean, you have to be somehow reimbursed for going that extra mile and providing amazing content. Thank you very much!

[brunorocha]

Amazing!!! thank you for the content.. 7 hours later I lerned a lot.. but I feel that I could watch this video more 3 times and still learn a lot

[blinyoman]

im watching this video every morning with a cup coffe

[thatthebee]

Thank you for creating such an amazing content. I wish I came across your video before I finish my case studies. Now it’s time to reconstruct them!

[Ajajqiqjaa]

I NEVER KNEW THE AMAZING WORK BEHIND PHOTOSHOP, BLENDER AND CANVA !!

[KazzyOfficial]

This is amazing thank you Tutorial Tim. I just started working with programmers and this video is exactly what I needed! Where are these files in the description box that the video keeps referencing that we can download ? Can’t find them

[jelilabudu]

😊 Is this fellow a lower grade teacher?
I'm one hour into the course, and each concept he explains get me closer to building my own efficient design system. ❤
One question though, why is he using three drop shadow for each elevation? Can someone explain it to me?

[javierasanchez]

What an amazing tutorial! Very helpfull! Thank you for making Figma and Material Design knowledge accessible and understandable to everyone. Hugs from Chile!

[LuBre]

I wish my clients where rich enough to pay me for this stuff. Which is indeed cool and all, but it's an insane "waste of time" for most common clients.

[stevedoetsch]

You know it will be well organized and detailed video when the very title of the video makes you ask a question that is immediately answered upon starting the video, which is: "What is a design system?

[LuBre]

Design Systems are very cool for if you're creating similar apps/websites for similar clients. In any other case they're almost useless. I've got very different clients in very different business areas (fashion, pharmacy, b2b, small stores, beauty, legal, ...) and it's just impossible to have one solid design system to fit them all. Of course you still follow some basic design/UI/UX rules (padding, margins, proper font choices, negative space, etc) but a legal firm will have a completely different website/app compared to a hospital website/app. There is no way to recycle the same guidelines.