Master the art of building design systems in Figma with this comprehensive 8-hour course. Dive deep into creating color systems, developing type systems, and understanding master components. Explore crucial design elements such as elevation, product and system icons, text legibility, states, and interaction. Learn about layout principles, pixel density, spacing methods, and responsive grid layouts. Gain practical skills in designing various UI components including app bars, backdrops, banners, bottom navigation, buttons, cards, chips, dialogs, and date pickers. By the end of this course, you'll have the expertise to create professional, cohesive design systems that enhance user experience and streamline your design workflow.
Overview
Syllabus
Introduction.
Creating a Color System.
Building a Type System in Figma.
Elevation.
Product & System Icons.
Text Legibility.
States.
Selection (Interaction).
Understanding Layout.
Pixel Density.
Spacing Methods.
Responsive Grid Layout.
App Bar - Bottom.
App Bar - Top.
Backdrop.
Banners.
Bottom Navigation.
Buttons - Floating Action Button.
Buttons.
Cards.
Chips.
Dialogs.
Date Pickers.
Dividers.
Taught by
freeCodeCamp.org
Related Courses
Related articles
Reviews
4.5 rating, based on 2 Class Central reviews
-
Ajay RamanAt 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. -
Sathwik Kumarnice 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
