Create a Design System with Figma – Full Course

Ecommerce Empire Academy

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 developed by Tim Sullivan. Check out his channel:

🔗 Tim's website:

⭐️ 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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

32 thoughts on “Create a Design System with Figma – Full Course”

  1. Team FreeCodeCamp,
    You guys are great. You are helping students to learn for free and provide high quality vidoes, God bless you 🙏😊

  2. Here are some exercise files you can duplicate to follow along and reference to have access to all of the components built in this video! Hope you enjoyed the video 🙂

    Color Palette File:
    https://www.figma.com/community/file/829552758151188415/Material-Design—Color-Palette

    Material Design System File (Before Adding Auto Layout, Variants, and States):
    https://www.figma.com/community/file/991525247245496517/Material-Design-System—Before-Adding-Auto-Layout%2C-Variants%2C-and-States

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

  4. Thanks for this amazing tutorial! Where can i find the link to the icons source file? I couldn’t find the link in the descriptions/comments !

  5. 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.

    1. I think the main takeaway is that it is optimal to have different design systems for different clients. Although, we’d normally see big clients and companies would require designers to have a design system for the project.

    2. Riccardo Rinaldi

      Also if you work full time for a big company a design system is essential to guarantee consistency and to easily mock-up / prototype new products and features.
      If you’re a freelancer with multiple clients, you could use a design system as a starting point and tailor it to your clients.

  6. Awesome video!! Could you please do courses around data analysis field?? excel or sql or python would be amazing… Thank you

  7. 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.

    1. Do you mean any element that is being used: hover over, clicking, high lighted etc..? When you are talking about “action” or elements that are “interacting” while the user is surfing around?

      Is that what you mean when Figma is referring that “A” in A100? Accent colors when a user is “interacting” with elements. I’m other words Accent color for interacting.

      I think I’m making sense of it lol sorry for the repeated words here

  8. Sabrine Tizaoui

    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

    1. Why should quality content be free all the time? Pay for these people’s time. Stop whining!

  9. A tip from a fellow designer:

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

    1. @khadidja moghrani Let’s say the developers are going to use material-ui framework for react, you can get the components and design the product using that

  10. 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

    1. @Tutorial Tim Thank you! I actually just bought your course on your website. So excited to get started!! Do you do one on ones ever?

  11. Thanks for the tutorial.
    I am a full stack developer and I recently started the google ux design specialisation with the aim of learning application design. However, after taking the first two courses in the specialisation, i started to have a feeling that it is not necessary for me as developer and youtube tutorial like this one could be better. What is your view?

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

  13. Amazing course, thank you so much for sharing all that content! I’m curious, what’s the opposite of Google’s Material Design style? Is there some sort of flat style design system which is also a free open source library like Material Design?

  14. 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

  15. CHITUS💖⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    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.

  16. Javiera Sanchez

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

  17. 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

  18. 7 hours of top class Figma lessons? My mind is blown. God, I love the Internet.

    Thanks so much freecodecamp!!!

Comments are closed.