Create a Design System with Figma - Full Course

Create a Design System with Figma - Full Course

freeCodeCamp.org via freeCodeCamp Direct link

Introduction

1 of 24

1 of 24

Introduction

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Create a Design System with Figma - Full Course

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Introduction
  2. 2 Creating a Color System
  3. 3 Building a Type System in Figma
  4. 4 Elevation
  5. 5 Product & System Icons
  6. 6 Text Legibility
  7. 7 States
  8. 8 Selection (Interaction)
  9. 9 Understanding Layout
  10. 10 Pixel Density
  11. 11 Spacing Methods
  12. 12 Responsive Grid Layout
  13. 13 App Bar - Bottom
  14. 14 App Bar - Top
  15. 15 Backdrop
  16. 16 Banners
  17. 17 Bottom Navigation
  18. 18 Buttons - Floating Action Button
  19. 19 Buttons
  20. 20 Cards
  21. 21 Chips
  22. 22 Dialogs
  23. 23 Date Pickers
  24. 24 Dividers

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.