Learn AI, Data Science & Business — Earn Certificates That Get You Hired
Power BI Fundamentals - Create visualizations and dashboards from scratch
Overview
Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
Full-length video course on building a complete design system in Figma. It covers the foundations — color systems, type systems, elevation, product and system icons, text legibility, states and selection, layout, pixel density, spacing methods and responsive grids — and then constructs core UI components including top and bottom app bars, backdrops, banners, bottom navigation, floating action buttons and standard buttons, cards, chips, dialogs, date pickers and dividers. Aimed at designers and developers who want a structured, reusable component library for digital products.
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
Reviews
4.5 rating, based on 2 Class Central reviews
Showing Class Central Sort
-
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
-
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.