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

[READ MORE]

”