Chapters (24)
- 0:00Introduction
- 3:03Creating a Color System
- 22:23Building a Type System in Figma
- 35:16Elevation
- 57:33Product & System Icons
- 1:11:26Text Legibility
- 1:30:58States
- 1:50:53Selection (Interaction)
- 1:55:02Understanding Layout
- 2:04:15Pixel Density
- 2:12:05Spacing Methods
- 2:24:19Responsive Grid Layout
- 2:48:59App Bar - Bottom
- 3:07:55App Bar - Top
- 3:22:37Backdrop
- 3:41:58Banners
- 4:06:45Bottom Navigation
- 4:19:15Buttons - Floating Action Button
- 4:38:54Buttons
- 5:06:04Cards
- 5:41:10Chips
- 5:58:15Dialogs
- 6:28:56Date Pickers
- 7:32:22Dividers
Show the creator's full description
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/UCTGmiyXawbVmFJjpiYSw0Gw
🔗 Tim's website: https://tutorialtim.com/
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.