Thiết kế giao diện Mobile App (UI) với "siêu ứng dụng" Figma

84 bài · 2,6 giờ video

Khóa học giúp bạn sử dụng công cụ Figma để tạo ra giao diện người dùng (User Interface) của ứng dụng (mobile app) trên mọi thiết bị điện thoại thông minh

Xem thử miễn phí bài đầu tiên của khóa học.

Xem thử

Giới thiệu về khóa học

Giới thiệu giảng viên Xem thử · 0:51 Tổng quan về khóa học 1:08 Tại sao khóa học này dùng Figma 0:37 Giao diện làm việc của Figma 0:44 Khu vực quản lý Layer 0:46 Thanh công cụ của Figma 2:51 Thanh thuộc tính của Figma 4:40 Tổng hợp phím tắt hữu ích 0:22

Lý thuyết về Màu sắc

Ý nghĩa của các màu sắc phổ biến 2:11 Lưu ý khi áp dụng màu sắc trong UI 0:19 Phương pháp kết hợp màu sắc 1:52 Các nhóm màu sắc trong UI UX 1:41 Công cụ miễn phí giúp Color System 1:08

Lý thuyết về Typography

Giới thiệu về Typography 0:53 Typeface và Font 1:04 Các typeface phổ biến 1:21 Typography và Readability 1:41 Công cụ miễn phí về Typography 0:35

UI Design cho Mobile App

Khái niệm giao diện người dùng (UI) 0:54 Nghiên cứu cơ bản về khả năng sử dụng 3:10 Kích thước màn hình 1:13 Grid System 3:28 Thực hành: Tạo Grid System trong Figma 1:56 Color System 2:48 Thực hành: Thêm màu sắc vào Style System trong Figma 1:10 Typography System 5:35 Thực hành: Xây dựng hệ thống Typography trong Figma 1:34 Các thành phần UI chính 0:41 Các thành phần UI phụ 0:49

Các thành phần UI chính

Giới thiệu chương 0:22 Button 1:43 Thực hành: Phân tích Button "Đăng ký ngay" với 3 trạng thái 0:52 Thực hành: Từng bước vẽ Button với 3 trạng thái 2:38 Input Field 1:03 Thực hành: Phân tích 4 loại Input Field cơ bản 1:40 Thực hành: Từng bước tạo 4 loại Input Field cơ bản 3:42 Card 0:36 Thực hành: Phân tích Card 0:52 Thực hành: Từng bước tạo ra Card 5:00 Bottom Navigation Bar 0:50 Thực hành: Thiết kế Bottom Navigation Bar 0:49 Thực hành: Từng bước tạo ra Bottom Navigation Bar 4:54 Popup & Bottom Sheet 1:20 Thực hành: Phân tích Popup & Bottom Sheet 1:28 Thực hành: Từng bước tạo ra Popup 3:15 Thực hành: Từng bước tạo ra Bottom Sheet 5:10 Hình ảnh 0:35 Thực hành Thiết kế Travel Mobile App 0:51 Thực hành: Từng bước tạo ra Travel Mobile App 5:40

Các thành phần UI phụ

Giới thiệu chương 0:14 Icon 1:05 Illustration 0:58 Badge 0:46 Thực hành: Phân tích 4 loại Badge cơ bản 1:01 Thực hành: Từng bước tạo ra Badge 1:54 Tag 0:45 Thực hành: Phân tích Tag với 2 trạng thái cơ bản 0:32 Thực hành: Từng bước thiết kế Tag với 2 trạng thái 2:21 Thành phần UI phụ khác 1:44 Tham khảo bài tập chương 4 2:19 Thực hành: Áp dụng thành phần UI phụ để nâng cấp bài tập chương 4 2:36 Thực hành: Từng bước nâng cấp giao diện bằng thành phần UI phụ 4:02

Các tính năng hữu ích của Figma cho UI/UX Design

Giới thiệu chương 0:15 Pages 1:23 Thực hành: chia File thành các Page 1:43 Auto Layout 1:31 Thực hành: tối ưu Button bằng cách sử dụng Auto Layout 4:10 Component: cách tạo và sử dụng 1:28 Component: cách tạo và sử dụng 1:23 Variant (Biến thể) của Component 3:31 Thực hành: thêm Button thành một Component với thông tin sẵn 2:22 Plugin 1:28 Thực hành: sử dụng Plugin trong Figma 2:13 Community File 1:09 Thực hành: sử dụng Community File của Figma 1:43

Prototype

Giới thiệu chương 0:18 Prototype là gì? Các bước tạo Prototype 1:28 Các thông số Prototype trong Figma 4:36 Phần mềm Figma Mirror 2:56 Thực hành thiết lập Prototype 3:44

Tổng kết kiến thức & bài tập thực hành

Giới thiệu chương 0:16 Tổng kết kiến thức 2:41 Thực hành: Bài tập cuối khóa 1:35

Kết thúc khóa học

Lời chào tạm biệt và gửi gắm của giảng viên 0:24