YoVDO

Create a Design System with Figma - Full Course

Offered By: freeCodeCamp

Tags

Figma Courses Type System Courses Design Systems Courses

Course Description

Overview

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.

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

Прототипирование и тестирование интерфейса
Moscow Institute of Physics and Technology via Coursera
Build an E-commerce Dashboard with Figma
Coursera Project Network via Coursera
Car Transport App in Figma
Coursera Project Network via Coursera
Design and Develop a Website using Figma and CSS
Coursera Project Network via Coursera
Learn Figma for Web Design, User Interface, UI UX in an hour
Udemy