Create a Design System with Figma

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.

Time Stamps:

  • ⌨️ (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

Frank

#DataScientist, #DataEngineer, Blogger, Vlogger, Podcaster at http://DataDriven.tv . Back @Microsoft to help customers leverage #AI Opinions mine. #武當派 fan. I blog to help you become a better data scientist/ML engineer Opinions are mine. All mine.