Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Design
Design Tools
Figma
Building Design System in Figma from Scratch - UI UX Mastery

Building Design System in Figma from Scratch - UI UX Mastery

Loại khoá học: Design Tools

Step by Step guide about how to create all parts of Design System using Figma - Design Principles, Tokens and theming

image
50.000 VND
85 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

If you are UI UX Designer and not using a Design System while designing, then you get outdated in a few years. Boost your design game to PRO LEVEL with this Design System with Figma Class. This class will help you step by step and will teach you practical examples of how to start creating a Design System. What are the 7 steps you need to take to create a Design System? How you are going to bring your design, development, marketing teams, and managers together to create design principles.

In this class, you will learn all the theories with practical examples about the Design Systems, their components, benefits, and outputs.

You will learn about

  • Design Principles and how to make them

  • Purpose Statement in Design System

  • Design first or create a Design System first

  • Tokens, Values and how to use theming dark and light in Design System

  • Generate Color System with color scales and color styles

  • Create Typography system with Type Scales and Styles

  • Icon System, Grids, and Layout System

  • Buttons, Chips, and Info bars with Swappable Icons

  • Advance usage of Auto layout, Components, and Variants in Figma

  • See how we use the Spacing System in Figma

  • Usage of Emojis and creating Hyperlinks inside Figma pages/files

5 Assignments for you to practice and show me your Design System using Figma file links

So let's learn Pro-Level Figma skills to create a design system and get your dream job as a UX UI Designer

Bạn sẽ học được gì

Build your first Design system in Figma from scratch

Design Principles + Purpose statement of your Design System

Build Color System, Typography System, Layout/Grids and a lot more

Create Buttons +Forms with their states along with Bigger Components

Advance usage of Swap-able Components, Icons inside buttons and form

Yêu cầu

  • Basics of using Figma App

Nội dung khoá học

3 sections

Introduction to Design Systems

9 lectures
Introduction to Design Systems, benefits and outputs of Design System
11:40
What is Purpose Statement in Design System
03:34
Design Principles and how to come up with them
05:21
7 Steps to Building your Design System
06:17
How to Audit User Interface? Building a UI Inventory
04:28
What are good Components in a Design System?
10:27
Hierarchy of Components in Design System
08:38
Download Design System Resources + PDF Notes
00:04
Lets test your knowledge about Design Systems
4 questions

Components of Design System

6 lectures
Design Tokens, roles and their values in Design System
06:36
Typography in your Design System
03:44
Spacing System Vertical and Horizontal
05:41
Color System and what you need to do about it
06:09
Grid System and Layout - What's the difference with examples
04:21
How theming works and the level of theming in your Design System
05:09

Build Design System in Figma - Step by Step

29 lectures
Create Design Principles + Purpose Statement
02:26
Assignment - Create Design Principles and Purpose Statement Document
1 question
Figma Auto Layout and Variants Part 01
09:09
Figma Auto Layout and Variants Part 02
09:50
Creating Responsive Nav Bar in Figma with Auto Layout - Step by Step
08:56
Responsive Modal Window in Figma - Advanced Auto Layouts
10:42
Auto Layout and Resizing - Understand them well in Figma
07:16
Typography System - Typography Scale and Type Styles in Figma 01
10:03
Typography System - Typography Scale and Type Styles 02
10:50
Assignment - Create Typography System with Type Scale and Styles
1 question
Color System - Create Color Scales and Styles to reuse in Figma 01
15:55
Color System - Create Color Scales and Styles to reuse in Figma 02
13:58
Assignment - Create Color System with Color Scales and Styles
1 question
Buttons and Icons - How to Swap Icons inside button components 01
22:05
Buttons and Icons - How to Swap Icons inside button components 02
18:37
Assignment - Buttons, chips and smaller components
1 question
Define your Grid System in Figma
04:12
Creating bigger Typography Components
09:35
Using Icons in Form Input Fields 01
08:23
Using Icons in Form Input Fields 02
10:28
Creating Bigger Components in Figma 01
27:06
Creating bigger components in Figma 02
16:18
Assignment - Icons, Illustrations and Grid System
1 question
Building Spacing System in Figma 01
11:46
Building Spacing System in Figma 02
10:02
Navigation, links and linking pages in Figma
08:34
Assignment - Create a full Design System
1 question
Whats Next +Thank you
00:27
BONUS LECTURE
00:06

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Blender 2.8 Encyclopedia

The Blender 2.8 Encyclopedia

100 VND
50.000 VND
Front End Web Development Mastery in 2024

Front End Web Development Mastery in 2024

60 VND
50.000 VND
Sketchbook Pro for Beginners on PC Mac and iPad Pro

Sketchbook Pro for Beginners on PC Mac and iPad Pro

25 VND
50.000 VND
Camunda BPM Advanced

Camunda BPM Advanced

25 VND
50.000 VND
Ultimate Adobe Photoshop CC Masterclass Basics To Advanced

Ultimate Adobe Photoshop CC Masterclass Basics To Advanced

25 VND
50.000 VND
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

100 VND
50.000 VND
Figma Prototype Từ A-Z dành cho UI/UX Designer

Figma Prototype Từ A-Z dành cho UI/UX Designer

55 VND
50.000 VND
The complete AutoCAD 2018-21 course

The complete AutoCAD 2018-21 course

100 VND
50.000 VND
Wordpress for Beginners - Master Wordpress Quickly

Wordpress for Beginners - Master Wordpress Quickly

150 VND
50.000 VND
Tekla Structure 2020

Tekla Structure 2020

80 VND
50.000 VND
Level Design Master Class: All in One Complete Course

Level Design Master Class: All in One Complete Course

25 VND
50.000 VND
Complete Course in AutoCAD Electrical 2021

Complete Course in AutoCAD Electrical 2021

65 VND
50.000 VND
Learn Stylized Game Environment Creation : Blender and UE5

Learn Stylized Game Environment Creation : Blender and UE5

60 VND
50.000 VND
3ds max and Vray advanced course. Furniture modeling.

3ds max and Vray advanced course. Furniture modeling.

25 VND
50.000 VND
Blender 2023 - Lần đầu làm quen & tiếp xúc với 3D

Blender 2023 - Lần đầu làm quen & tiếp xúc với 3D

25 VND
50.000 VND
CFD of External Aerodynamics and Turbomachinery

CFD of External Aerodynamics and Turbomachinery

25 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi