Create a Design System with Figma – Full Course
By freeCodeCamp.org
Published: Jun 28, 2021“
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: https://www.youtube.com/channel…
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
”