Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.


Create a Design System with Figma - Full Course

via freeCodeCamp


Learn how to build a design system in Figma through this 8-hour course. By the end of the course, you will master creating design systems in Figma and understanding master components. The course covers topics such as creating a color system, building a type system, working with icons, text legibility, layout, spacing methods, responsive grid layout, and various UI components like buttons, cards, dialogs, and more. The teaching method includes video lectures and practical demonstrations. This course is intended for individuals interested in design, particularly those looking to enhance their skills in creating design systems using Figma.


Creating a Color System.
Building a Type System in Figma.
Product & System Icons.
Text Legibility.
Selection (Interaction).
Understanding Layout.
Pixel Density.
Spacing Methods.
Responsive Grid Layout.
App Bar - Bottom.
App Bar - Top.
Bottom Navigation.
Buttons - Floating Action Button.
Date Pickers.

Taught by


4.5 rating, based on 2 Class Central reviews

Start your review of Create a Design System with Figma - Full Course

  • Profile image for Ajay Raman
    Ajay Raman
    At first i thought, this is boring.
    But it's compulsory to learn the Design System because you need to follow the guidelines to design a Web or Mobile application.
    It's good and informative.
  • Profile image for Sathwik Kumar
    Sathwik Kumar
    nice i understood it very good thank you i am very happy to see this vedio so i request every one to watch this video so thank you free code camp for this superb explanination i also done html course i free code camp i am very happy

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.