Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Figma UI/UX Complete Bootcamp: Design 10 Job-Ready Projects

Khóa Học Figma UI/UX Toàn Diện: Thiết Kế 10 Dự Án Sẵn Sàng Đi Làm

Khóa Học Figma UI/UX Toàn Diện: Thiết Kế 10 Dự Án Sẵn Sàng Đi Làm

Lớp Thạc Sĩ Figma: Thiết Kế Giao Diện UI/UX Chuyên Nghiệp Cho Ứng Dụng Đặt Xe, Chat Và Cửa Hàng Giày Kèm Kỹ Năng Prototyping

4.2
(627 đánh giá)
26,631 học viên
Giảng viên
Vapa Academy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 909.000đ -91%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
63.5 giờ video
543 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

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

Prototyping trong Figma từ Cơ Bản Đến Nâng Cao
Ứng Dụng Prototyping Trong Thực Tế
Prototyping Hiệu Ứng Zoom Khi Di Chuột
Các Loại Prototype Khác Nhau
Prototyping Accordion (Mở Rộng/Thu Gọn)
Kỹ Thuật Prototyping Nâng Cao
Prototyping Bàn Phím Gõ Thời Gian Thực
Cách Thức Hoạt Động của Trigger "On Drag" (Khi Kéo)

Yêu cầu

Học viên không cần có kiến thức nền tảng; các bạn sẽ học được mọi thứ từ khóa học này.

Đối tượng phù hợp

Nếu bạn là nhà thiết kế UI/UX Figma muốn nâng cao kỹ năng prototyping
Nếu bạn muốn thành thạo prototyping trong Figma
Nếu bạn muốn tìm hiểu về các loại prototype khác nhau với các ví dụ thực tế

Nội dung khóa học

32 phần • 536 bài giảng
1 Tổng Quan Khóa Học
1 Giới thiệu về Figma Phần 1
2 Tạo Tài khoản Figma (Gói Miễn phí vs Chuyên nghiệp) Phần 2
3 Công cụ Figma (Di chuyển, Vùng chọn & Hình khối) Phần 3
4 Công cụ Figma (Bút vẽ & Mạng Vector) Phần 4
5 Công cụ Figma (Công cụ Bình luận & Trình chiếu) Phần 5
6 Công cụ Figma (Công cụ Văn bản & Kiểu chữ) Phần 6
7 Thiết lập File & Canvas Phần 7
1 Hiểu về Frame, Group, Layer Phần 1
2 Đặt tên Layer và các phương pháp hay nhất Phần 2
3 Sử dụng Thước kẻ, Đường dẫn & Công cụ Căn chỉnh Phần 3
1 Tạo và Quản lý Nhiều Trang với Quy tắc Đặt tên Phần 1
2 Thiết lập luồng (flows) & Use case Phần 2
3 Khái niệm cộng tác cơ bản cho các dự án nhiều trang Phần 3
1 Giới thiệu về Typography Phần 1
2 Tạo Tiêu đề, Đoạn văn & Phân cấp nội dung Phần 2
3 Thiết lập và Tái sử dụng Kiểu chữ (Text Styles) Phần 3
4 Kiểu chữ Linh hoạt (Responsive) Phần 4
5 Mẹo về Khả năng Tiếp cận & Tính Dễ đọc Phần 5
1 Hiểu về Tâm lý Màu sắc & Các Loại Màu Phần 1
2 Tạo Bảng Màu & Thiết lập Kiểu (Styles) Phần 2
3 Áp dụng Hiệu ứng (Đổ bóng, Làm mờ và các hiệu ứng khác) Phần 3
1 Import Hình ảnh và các kỹ thuật sử dụng (Cắt xén) Phần 1
2 Sử dụng Công cụ Mặt nạ (Masking) & Import Minh họa Phần 2
1 Components, Instances và Overrides Phần 1
2 Xây dựng các Trạng thái & Hệ thống Thiết kế Có thể Mở rộng bằng Variants Phần 2
1 Giới thiệu về Auto layout & Use-case Phần 1
2 Tạo Bố cục Linh hoạt, Tự động co giãn bằng Nesting Items Phần 2
3 Sử dụng Constraints cho Thiết kế Có thể Mở rộng Phần 3
1 Thiết lập Grid Layout Phần 1
2 Sử dụng Hệ thống Khoảng cách 8pt & 4pt Phần 2
3 Hệ thống Grid Layout cho các Thiết bị Khác nhau Phần 3
1 Giới thiệu về Wireframe Phần 1
2 Chuyển đổi từ Low Fidelity sang High Fidelity Wireframe Phần 2
3 Sử dụng Wireframe trong Trình bày với Khách hàng Phần 3
4 Công cụ cho Quy trình Wireframing Nhanh hơn Phần 4
1 Giới thiệu về Figma Variables Phần 1
2 Sử dụng Variables Màu sắc, Số & Văn bản Phần 2
3 Token trong Hệ thống Thiết kế Phần 3
1 Giới thiệu Style Guide Phần 1
2 Hệ thống Thiết kế & Các Mẫu Tái sử dụng trong các dự án Phần 2
3 Xuất bản & Sử dụng Thư viện (Libraries) Phần 3
1 Nhúng Video & Import Hoạt ảnh Lottie Phần 1
2 Mẹo & Phương pháp hay nhất khi thêm video & rich media Phần 2
1 Chia sẻ Dự án, Xuất file, Bàn giao cùng với Lịch sử Phiên bản & Bình luận Phần 1
1 Tìm kiếm & Sử dụng các Plugin hữu ích Phần 1
2 Tài nguyên Figma (Assets) Phần 2
1 Các Phương pháp Hay nhất cho Thiết kế UI Phần 1
2 Ví dụ Thực tế về UI Tốt Phần 2
3 Cách tránh các Phản Mẫu (Anti-Patterns) & Sự rối mắt Phần 3
1 Bắt đầu và Cách Nhận Gói Giáo dục Đã Xác minh, Cách Import Tài nguyên
2 File Figma Thực hành
1 Prototype là gì Phần 1
2 Tại sao Prototype lại Quan trọng Phần 2
3 Các Loại Prototype trong Thiết kế UX/UI Phần 3
1 Thảo luận về các Loại Hoạt ảnh UI Phần 1
2 Trigger, Action và Animation ở Điểm Đến (Destination) Phần 2
3 Cài đặt Prototype, Kiểm tra & Chia sẻ Prototype Phần 3
4 Cách thức Hoạt động của Trigger "On Drag" (Khi Kéo) Phần 4
5 Cách thức Hoạt động của Trigger "On Click" (Khi Nhấp) Phần 5
6 Cách thức Hoạt động của Trigger "While Hovering" (Khi Di chuột) Phần 6
7 Cách thức Hoạt động của Trigger "After Delay" (Sau Khi Trì hoãn) Phần 7
8 Hành động Prototype - "Navigate to" (Điều hướng đến) và "Change to" (Thay đổi thành) Phần 8
1 Mở Overlay (Lớp phủ) Phần 1
2 Bật/Tắt Checkbox, Tắt/Mở Radio Phần 2
3 Prototyping Accordion (Mở rộng/Thu gọn) Phần 3
4 Prototyping Tab Bar Phần 4
5 Prototyping Tương tác Video Phần 5
6 Prototyping Hiệu ứng Zoom Khi Di chuột Phần 6
7 Prototyping Hoạt ảnh Kéo Carousel Thẻ Phần 7
8 Hoạt ảnh Cuộn Dính (Sticky Scroll) Phần 8
9 Prototyping Thanh Trượt Khoảng (Range Slider) Phần 9
10 Prototyping Hoạt ảnh Văn bản Phần 10
11 Prototyping Hiệu ứng Thông báo Phần 11
12 Hiệu ứng Thẻ Hoạt ảnh Phần 12
13 Nút Chuyển đổi (Switch và Toggle) Phần 13
1 Conditional (Điều kiện) và Set Variable (Đặt Biến) Phần 1
2 Xóa Prototyping Sử dụng Set Variable Phần 2
3 Ẩn và Hiện Sử dụng Boolean Phần 3
4 Prototyping Nâng cao Màn hình Ứng dụng Phần 4
5 Kỹ thuật Prototyping Nâng cao Phần 5
6 Prototype Nâng cao Sử dụng Button Variants Phần 6
7 Thanh Trượt Hoạt ảnh Phần 7
8 Prototyping Bàn phím Gõ Thời gian Thực Phần 8
9 Prototyping Menu Thả xuống Tương tác Phần 9
10 Prototyping Menu Thả xuống Tương tác Phần 10
1 Dự án Clone Ứng dụng Web Spotify UI/UX - Tài nguyên
2 Dự án Clone Ứng dụng Web Spotify UI/UX - Demo Trực tiếp
3 Hướng dẫn Chi tiết Dự án Clone Ứng dụng Web Spotify UI/UX
4 Tạo file thiết kế mới Phần 1
5 Tạo bảng màu Phần 2
6 Thêm màu vào style guide Phần 3
7 Tạo danh sách kiểu chữ Phần 4
8 Thêm kiểu chữ vào style Phần 5
9 Tạo logo thương hiệu Phần 6
10 Thêm icon Phần 7
11 Tạo thanh điều hướng (navbar) wireframe độ phân giải thấp cho trang đích Phần 8
12 Hoàn thiện thanh điều hướng trên cùng wireframe độ phân giải thấp của trang đích Phần 9
13 Tạo thanh bảng điều khiển bên trái trong trang đích wireframe độ phân giải thấp Phần 10
14 Hoàn thiện thanh bảng điều khiển bên trái của trang đích wireframe độ phân giải thấp Phần 11
15 Tạo các thẻ bài hát nhỏ trong trang đích wireframe độ phân giải thấp Phần 12
16 Tạo thẻ nghệ sĩ trong trang đích wireframe độ phân giải thấp Phần 13
17 Hoàn thiện các phần thẻ của trang đích wireframe độ phân giải thấp Phần 14
18 Tạo chân trang (footer) của trang đích wireframe độ phân giải thấp Phần 15
19 Hoàn thiện màn hình đích wireframe độ phân giải thấp Phần 16
20 Tạo trang đăng nhập wireframe độ phân giải thấp Phần 17
21 Hoàn thiện trang đăng nhập wireframe độ phân giải thấp Phần 18
22 Tạo trang chủ wireframe độ phân giải thấp Phần 19
23 Tạo trang chi tiết bài hát wireframe độ phân giải thấp Phần 20
24 Tiếp tục với trang chi tiết bài hát wireframe độ phân giải thấp Phần 21
25 Tạo bảng phát nhạc trên trang chi tiết bài hát wireframe độ phân giải thấp Phần 22
26 Hoàn thiện trang chi tiết bài hát wireframe độ phân giải thấp Phần 23
27 Tạo banner của trang danh sách phát bài hát wireframe độ phân giải thấp Phần 24
28 Hoàn thiện phần banner của trang danh sách phát bài hát wireframe độ phân giải thấp Phần 25
29 Tạo phần danh sách phát trên trang danh sách phát bài hát wireframe độ phân giải thấp Phần 26
30 Hoàn thiện phần danh sách phát của trang danh sách phát bài hát wireframe độ phân giải thấp Phần 27
31 Tạo trang đăng xuất wireframe độ phân giải thấp Phần 28
32 Tạo thẻ nhỏ cho màn hình đích độ phân giải cao Phần 29
33 Tạo carousal-1 của trang đích độ phân giải cao Phần 30
34 Tiếp tục với carousal-1 của trang đích độ phân giải cao Phần 31
35 Hoàn thiện carousal-1 của trang đích độ phân giải cao Phần 32
36 Thực hiện chỉnh sửa nhỏ Phần 33
37 Tạo carousal-2 của trang đích độ phân giải cao Phần 34
38 Hoàn thiện carousal-2 trong trang đích độ phân giải cao Phần 35
39 Tạo carousal-3 của trang đích độ phân giải cao Phần 36
40 Tạo carousal-4 của trang đích độ phân giải cao Phần 37
41 Tạo carousal-5 của trang đích độ phân giải cao Phần 38
42 Tạo carousal-6 và hoàn thiện trang đích độ phân giải cao Phần 39
43 Tạo trang đăng nhập độ phân giải cao Phần 40
44 Tạo trang chủ độ phân giải cao & chỉnh sửa nhỏ Phần 41
45 Tạo carousal-6 & 7 của trang chi tiết bài hát độ phân giải cao Phần 42
46 Tạo carousal-8,9 của trang mô tả bài hát độ phân giải cao Phần 43
47 44. Hoàn thiện trang chi tiết bài hát độ phân giải cao Phần 44
48 Tạo carousal-10 của trang danh sách phát bài hát độ phân giải cao Phần 45
49 Hoàn thiện trang danh sách phát bài hát độ phân giải cao Phần 46
50 Thêm prototype vào các trang wireframe độ phân giải cao Phần 47
51 Hoàn thiện prototyping Phần 48
52 Sắp xếp các component thiết kế & hoàn thành dự án Phần 49
1 UI/UX Ứng dụng Di động Đặt Đồ Ăn: File Nguồn Figma
2 Dự án Ứng dụng Di động Đặt Đồ Ăn UI/UX - Demo Trực tiếp
3 Tạo Style Guide Màu sắc Phần 1
4 Tạo Style Guide Kiểu chữ Phần 2
5 Thiết lập tất cả các Icon khả dụng Phần 3
6 Thiết kế Button và tạo Variant cho Button Phần 4
7 Thiết kế Thanh điều hướng trên cùng (Top Navbar) Phần 5
8 Thiết kế Thanh Tab dưới cùng (Bottom TabBar) Phần 6
9 Thiết kế Trường nhập liệu (Input Field) Phần 7
10 Thiết kế Thẻ Nổi bật (Featured Card) Phần 8
11 Thiết kế Thẻ Danh mục (Categories Card) Phần 9
12 Thiết kế Thẻ Phổ biến cho Trang chủ Phần 10
13 PR-Thiết kế Màn hình Splash Dự án Phần 1
14 PR-Thiết kế Màn hình Đăng nhập Dự án Phần 2
15 PR-Thiết kế Màn hình Đăng ký Dự án Phần 3
16 PR-Thiết kế Màn hình Trang chủ Dự án Phần 4
17 PR-Thiết kế Màn hình Trang chủ Dự án Phần 5
18 PR-Thiết lập Frame Chung cho Hệ thống Thiết kế Dự án Phần 6
19 PR-Thiết kế Màn hình Đặt hàng Dự án Phần 7
20 PR-Thiết kế Màn hình Yêu thích Dự án Phần 8
21 PR-Tất tần tật về Prototyping trong Dự án Phần 9
1 Dự án UI/UX Ứng dụng Đặt Xe - File Nguồn Figma
2 Dự án Ứng dụng Đặt Xe UI/UX: Demo Trực tiếp
3 Chọn màu sắc 1 - Phần 1
4 Chọn màu sắc 2 - Phần 2
5 Định nghĩa biến - Phần 3
6 Tạo kiểu chữ 1 - Phần 4
7 Tạo kiểu chữ 2 - Phần 5
8 Biểu tượng - Phần 6
9 Hiểu cơ bản về Auto-layout - Phần 7
10 Tạo Component đầu tiên - Phần 8
11 Hoàn thiện tất cả các nút bấm - Phần 9
12 Hoàn thiện Style Guide - Phần 10
13 Thiết kế Low-Fidelity cho trang On-boarding - Phần 11
14 Thiết kế Low Fidelity cho trang Đăng nhập - Phần 12
15 Thiết kế Low Fidelity cho Chuyến đi và Thanh toán - Phần 13
16 Thiết kế Low Fidelity cho Tìm chuyến đi và Đã tìm thấy - Phần 14
17 Thiết kế Low Fidelity cho Chi tiết chuyến đi và Đánh giá - Phần 15
18 Thiết kế Low Fidelity cho Tham gia chuyến đi và Chuyến đi trước - Phần 16
19 Thiết kế Low Fidelity - Thiết kế cuối cùng - Phần 17
20 High Fidelity - Tạo Slider trang On-boarding - Phần 18
21 High Fidelity - Hoàn thiện trang On-boarding - Phần 19
22 High Fidelity - Trang Đăng nhập và Đăng ký - Phần 20
23 High Fidelity - Component Navbar dưới cùng - Phần 21
24 High Fidelity - Hoàn thiện Trang chủ - Phần 22
25 High Fidelity - Trang Chọn chuyến đi - Phần 23
26 High Fidelity - Trang Thanh toán - Phần 24
27 High Fidelity - Loader - Phần 25
28 High Fidelity - Xác nhận chuyến đi và Chi tiết chuyến đi - Phần 26
29 High Fidelity - Chi tiết chuyến đi và Đánh giá chuyến đi - Phần 27
30 High Fidelity - Tham gia chuyến đi và Chuyến đi trước - Phần 28
31 High Fidelity - Thông tin chuyến đi trước - Phần 29
32 Thiết kế cuối cùng và Prototype - Phần 30
33 High Fidelity - Tạo Prototype cuối cùng - Phần 31
34 Thiết kế Low Fidelity cho Trang Đăng ký và Trang chủ - Phần 32
1 UI/UX Dự án Ứng dụng thương mại điện tử Shoe Sop : Demo trực tiếp
2 UI/UX Dự án Ứng dụng thương mại điện tử Shoe Sop 2 - File nguồn
3 Thiết lập dự án trên Figma - Phần 1
4 Tạo Style Guide cho màu sắc - Phần 2
5 Tạo Style Guide cho kiểu chữ - Phần 3
6 Tạo màn hình Splash và Trang chủ (Wire frame Low Fidelity) - Phần 4
7 Tạo màn hình Chi tiết sản phẩm, Giỏ hàng, Mua hàng (Wire frame Low Fidelity) - Phần 5
8 Thiết kế màn hình Splash - Phần 6
9 Thiết kế Thanh tìm kiếm (Trang chủ) - Phần 7
10 Thiết kế Phần Danh mục (Trang chủ) - Phần 8
11 Thiết kế Phần Giỏ hàng (Trang chủ) - Phần 9
12 Thiết kế Thanh điều hướng dưới cùng (Trang chủ) - Phần 10
13 Thiết kế Phần Hình ảnh (Màn hình Chi tiết sản phẩm) - Phần 11
14 Thiết kế Phần Chi tiết sản phẩm (Màn hình Chi tiết sản phẩm) - Phần 12
15 Thiết kế Màn hình Giỏ hàng - Phần 13
16 Thiết kế Màn hình Đặt hàng thành công - Phần 14
17 Tạo Components cho Hình ảnh và Biểu tượng (Design System) - Phần 15
18 Tạo Components cho Nút bấm (Design System) - Phần 16
19 Tạo Components cho Phần Danh mục (Design System) - Phần 17
20 Tạo Components cho Thanh điều hướng dưới cùng (Design System) - Phần 18
21 Tạo Components cho Thẻ Chọn kích cỡ (Design System) - Phần 19
22 Tạo Components cho Danh sách Giỏ hàng (Design System) - Phần 20
23 Tạo Prototype cho Màn hình Splash và Trang chủ - Phần 21
24 Tạo Prototype cho Màn hình Chi tiết sản phẩm - I - Phần 22
25 Tạo Prototype cho Màn hình Chi tiết sản phẩm - II - Phần 23
26 Tạo Prototype cho Components thẻ - Phần 24
27 Tạo Prototype cho Màn hình Giỏ hàng - Phần 25
28 Tạo Prototype cuối cùng - Phần 26
1 UI/UX Dự án Ứng dụng Chat : File nguồn Figma
2 UI/UX Ứng dụng Chat : Demo trực tiếp dự án
3 Hiểu các khái niệm cơ bản - Phần 1
4 Hiểu về màu sắc 1 - Phần 2
5 Hiểu về màu sắc 2 - Phần 3
6 Hiểu về màu sắc 3 - Phần 4
7 Hiểu về màu sắc 4 - Phần 5
8 Khai báo biến 1 - Phần 6
9 Khai báo biến 2 - Phần 7
10 Hiểu về kiểu chữ 1 - Phần 8
11 Hiểu về kiểu chữ 2 - Phần 9
12 Biểu tượng - Phần 10
13 Tạo Navbar dưới cùng và Kiểm thử - Phần 11
14 Tạo Navbar dưới cùng và Kiểm thử - Phần 12
15 Tạo Prototype và các Nút bấm - Phần 13
16 Tạo Components Chat - Phần 14
17 Kiểm thử Components - Phần 15
18 Mental Models - Phần 16
19 Hiểu luồng người dùng của ứng dụng - Phần 17
20 Tạo thiết kế Low Fi của ứng dụng 1 - Phần 18
21 Tạo thiết kế Low Fi của ứng dụng 2 - Phần 19
22 Tạo thiết kế Low Fi của ứng dụng 3 - Phần 20
23 Tạo thiết kế Low Fi của ứng dụng 4 - Phần 21
24 Tạo thiết kế Low Fi của ứng dụng 5 - Phần 22
25 Tạo thiết kế Low Fi của ứng dụng 6 - Phần 23
26 Tạo Slider cho trang On Boarding - Phần 24
27 Hoàn thiện trang On Boarding - Phần 25
28 Trang Nhập số điện thoại - Phần 26
29 Tiếp tục các trang Đăng nhập Đăng ký - Phần 27
30 Hoàn thiện các trang Đăng nhập Đăng ký - Phần 28
31 Thiết kế Trang chủ 1 - Phần 29
32 Thiết kế Trang chủ 2 - Phần 30
33 Thiết kế Trang chủ 3 - Phần 31
34 Hoàn thiện thiết kế Trang chủ 4 - Phần 32
35 Tạo Prototype cho Thanh điều hướng dưới cùng - Phần 33
36 Thiết kế Tùy chọn Tin nhắn mới - Phần 34
37 Tạo Trang Tin nhắn 1 - Phần 35
38 Tạo Trang Tin nhắn 2 - Phần 36
39 Tạo Trang Tin nhắn 3 - Phần 37
40 Hoàn thiện Trang Tin nhắn - Phần 38
41 Trang Xem hồ sơ người khác 1 - Phần 39
42 Trang Xem hồ sơ người khác 2 - Phần 40
43 Tạo Trang Hồ sơ người dùng - Phần 41
44 Tạo Trang Chỉnh sửa thông tin hồ sơ người dùng - Phần 42
45 Trang Tin nhắn nhóm - Phần 43
46 Thiết kế Trang Stories - Phần 44
1 UI/UX Dự án Ứng dụng Music Player - File nguồn
2 UI/UX Dự án Ứng dụng Music Player - Demo trực tiếp
3 Hiểu các khái niệm cơ bản - Phần 1
4 Quyết định cỡ chữ - Phần 2
5 Kiểm thử phông chữ - Phần 3
6 Tạo Style cho phông chữ - Phần 4
7 Hiểu về màu sắc - Phần 5
8 Chọn màu sắc cho ứng dụng - Phần 6
9 Khai báo màu trong Styles - Phần 7
10 Biểu tượng - Phần 8
11 Hoàn thiện Style Guide - Phần 9
12 Tạo Trang chủ của ứng dụng Low Fidelity - Phần 10
13 Hoàn thiện Trang chủ Low Fi - Phần 11
14 Hoàn thiện Music Player Low Fi - Phần 12
15 Tạo Component Navbar dưới cùng - Phần 13
16 Tạo các Component khác - Phần 14
17 Thiết kế Trang chủ - Phần 15
18 Thiết kế Phần Đã phát gần đây trên Trang chủ - Phần 16
19 Điều chỉnh Navbar trên Trang chủ - Phần 17
20 Thiết kế Music Player - Phần 18
21 Thiết kế Thanh tìm kiếm và Player trong UI - Phần 19
22 Tạo Prototype UI - Phần 20
23 Tạo Prototype cho Màn hình Music Player - Phần 21
1 UI/UX Dự án Ứng dụng Web Thương mại điện tử 6 - File nguồn Figma
2 UI/UX Dự án Ứng dụng Web Thương mại điện tử - Demo trực tiếp
3 Giới thiệu về Text Style - Phần 1
4 Hoàn thiện Text Styling - Phần 2
5 Tạo Style cho màu sắc - Phần 3
6 Logo Low Fidelity - Phần 4
7 Thanh Navbar trên cùng và Ô tìm kiếm Low Fidelity - Phần 5
8 Thanh Danh mục Low Fidelity - Phần 6
9 Giới thiệu về Hình ảnh Banner Low Fidelity - Phần 7
10 Hoàn thiện Phần Banner Low Fidelity - Phần 8
11 Phần Danh mục Low Fidelity - Phần 9
12 Thanh Tiêu đề Phần Low Fidelity - Phần 10
13 Thẻ Lớn Low Fidelity - Phần 11
14 Hoàn thiện Thẻ Lớn Low Fidelity - Phần 12
15 Phần Thương hiệu xu hướng Low Fidelity - Phần 13
16 Phần Mặt hàng phổ biến Low Fidelity - Phần 14
17 Thẻ Nhỏ Low Fidelity - Phần 15
18 Giới thiệu về Phần Ưu đãi hấp dẫn Low Fidelity - Phần 16
19 Hoàn thiện Phần Ưu đãi hấp dẫn Low Fidelity - Phần 17
20 Giới thiệu về Phần Footer Low Fidelity - Phần 18
21 Hoàn thiện Phần Footer Low Fidelity - Phần 19
22 Giới thiệu về Mô tả sản phẩm Low Fidelity - Phần 20
23 Tiếp tục Mô tả sản phẩm Low Fidelity - Phần 21
24 Tinh chỉnh Phần Mô tả sản phẩm Low Fidelity - Phần 22
25 Thiết lập biểu tượng cho Mô tả sản phẩm Low Fidelity - Phần 23
26 Hoàn thiện Phần Mô tả sản phẩm Low Fidelity - Phần 24
27 Phần Sản phẩm liên quan Low Fidelity - Phần 25
28 Phần Navbar Trang Mua hàng Low Fidelity - Phần 26
29 Phần Tất cả mặt hàng Low Fidelity - Phần 27
30 Giới thiệu về Phần Thẻ Tóm tắt đơn hàng Low Fidelity - Phần 28
31 Hoàn thiện Phần Thẻ Tóm tắt đơn hàng Low Fidelity - Phần 29
32 Hoàn thiện Phần Trang Mua hàng Low Fidelity - Phần 30
33 Tạo Wire-frame High Fidelity - Phần 31
34 Giới thiệu về Navbar và Banner High Fidelity - Phần 32
35 Hoàn thiện Phần Banner High Fidelity - Phần 33
36 Phần Danh mục High Fidelity - Phần 34
37 Animation Phần Danh mục High Fidelity - Phần 35
38 Hoàn thiện Animation Phần Danh mục High Fidelity - Phần 36
39 Phần Ưu đãi nóng High Fidelity - Phần 37
40 Hoàn thiện Phần Ưu đãi nóng High Fidelity - Phần 38
41 Giới thiệu về Carousel Thẻ Lớn High Fidelity - Phần 39
42 Tiếp tục Carousel Thẻ Lớn High Fidelity - Phần 40
43 Hoàn thiện Carousel Thẻ Lớn High Fidelity - Phần 41
44 Thương hiệu xu hướng High Fidelity - Phần 42
45 Phần Mặt hàng phổ biến High Fidelity - Phần 43
46 Phần Ưu đãi hấp dẫn và Footer High Fidelity - Phần 44
47 Giới thiệu về Phần Footer - Phần 45
48 Hoàn thiện Phần Footer High Fidelity - Phần 46
49 Phần Mô tả sản phẩm High Fidelity - Phần 47
50 Phần Carousel Sản phẩm liên quan High Fidelity - Phần 48
51 Animation Hệ thống Thanh toán - Phần 49
52 Animation Hệ thống Thanh toán - Phần 50
53 Carousel Phần Đề xuất High Fidelity - Phần 51
54 Animation Footer và Chuyển trang High Fidelity - Phần 52
1 Dự án UI/UX Ứng dụng Web Netflix Clone - Demo trực tiếp
2 Dự án UI/UX Ứng dụng Web Netflix Clone - Tổng quan
3 Dự án UI/UX Ứng dụng Web Netflix Clone - File nguồn Figma
4 Tạo file thiết kế - Phần 1
5 Tạo Style Guide màu sắc - Phần 2
6 Tạo kiểu chữ - Phần 3
7 Hoàn thiện kiểu chữ - Phần 4
8 Thêm Style cho kiểu chữ - Phần 5
9 Biểu tượng - Phần 6
10 Tạo Wire-frame Low Fidelity cho Navbar Trang đích - Phần 7
11 Tạo Wire-frame Low Fidelity cho Nội dung thân trang và Nút bấm Trang đích - Phần 8
12 Hoàn thiện Trang đích Low Fidelity - Phần 9
13 Giới thiệu về Trang Giá gói cước Độ trung thực thấp - Phần 10
14 Tạo Thẻ gói cước Độ trung thực thấp - Phần 11
15 Hoàn thiện Thẻ gói cước Độ trung thực thấp - Phần 12
16 Hoàn thiện các Thẻ gói cước Độ trung thực thấp - Phần 13
17 Tạo Footer Độ trung thực thấp - Phần 14
18 Hoàn thiện Footer Độ trung thực thấp & Trang Mua gói cước - Phần 15
19 Tạo Trang Hồ sơ Độ trung thực thấp - Phần 16
20 Tạo Thanh điều hướng Trang chủ Độ trung thực thấp - Phần 17
21 Hoàn thiện Thanh điều hướng Trang chủ Độ trung thực thấp - Phần 18
22 Hoàn thiện Phần Banner Độ trung thực thấp - Phần 19
23 Tạo Phần Xem tiếp theo trong Trang chủ Độ trung thực thấp - Phần 20
24 Tạo Phần Đang xem dở của Trang chủ Độ trung thực thấp - Phần 21
25 Tạo Phim xu hướng hàng đầu trong Trang chủ Độ trung thực thấp - Phần 22
26 Tạo Phần Phim Hành động & Hollywood trong Khung dây Độ trung thực thấp - Phần 23
27 Phần Phim Game, Châu Á & Gia đình trong Trang Khung dây Độ trung thực thấp - Phần 24
28 Tạo Footer Trang chủ Độ trung thực thấp - Phần 25
29 Tạo Menu thả xuống trong Trang chủ Khung dây Độ trung thực thấp - Phần 26
30 Tạo Menu thả xuống trong Trang chủ Độ trung thực thấp - Phần 27
31 Tạo Khung và Banner Trang Chi tiết Độ trung thực thấp - Phần 28
32 Thêm Nút bấm trong Trang Chi tiết Khung dây Độ trung thực thấp - Phần 29
33 Thêm Mô tả Series trong Khung dây Độ trung thực thấp ở Trang Mô tả - Phần 30
34 Tiếp tục Thêm Mô tả trong Trang Mô tả Độ trung thực thấp - Phần 31
35 Tạo Thẻ cho các Tập phim trong Trang Chi tiết Độ trung thực thấp - Phần 32
36 Hoàn thiện phần Tập phim của Trang Chi tiết Khung dây Độ trung thực thấp - Phần 33
37 Tạo Màn hình Tạm dừng Video Độ trung thực thấp - Phần 34
38 Tiếp tục Màn hình Tạm dừng Độ trung thực thấp - Phần 35
39 Hoàn thiện Màn hình Tạm dừng Video Độ trung thực thấp - Phần 36
40 Hoàn thiện Màn hình Phát Video Khung dây Độ trung thực thấp - Phần 37
41 Tạo Trang Đích Độ trung thực cao - Phần 38
42 Hoàn thiện Trang Đích Độ trung thực cao - Phần 39
43 Hoàn thiện Trang Mua gói cước Độ trung thực cao - Phần 40
44 Hoàn thiện Trang Hồ sơ Khung dây Độ trung thực cao - Phần 41
45 Tạo Banner trong Trang chủ Độ trung thực cao-1 - Phần 42
46 Tạo Carousal-1 của Trang chủ Độ trung thực cao - Phần 43
47 Tạo Carousal-1 trong Trang chủ Độ trung thực cao - Phần 44
48 Hoàn thiện Carousal-1 trong Trang chủ Độ trung thực cao - Phần 45
49 Tạo Carousal-2 - Phần 46
50 Hoàn thiện Carousal-2 - Phần 47
51 Tạo Carousal-3 - Phần 48
52 Hoàn thiện Carousal-3 - Phần 49
53 Tạo Carousal-4 - Phần 50
54 Tạo Carousal-5 - Phần 51
55 Hoàn thiện Carousal-5 - Phần 52
56 Hoàn thiện Carousal 6 & 7 - Phần 53
57 Tạo Carousal-8 - Phần 54
58 Hoàn thiện Carousal-8 - Phần 55
59 Hoàn thiện Trang chủ Độ trung thực cao - Phần 56
60 Thêm Khung Modal Đăng xuất trong Trang chủ - Phần 57
61 Tạo Trang Chi tiết Độ trung thực cao - Phần 58
62 Hoàn thiện Trang Chi tiết Độ trung thực cao - Phần 59
63 Hoàn thiện cả ba Màn hình Video - Phần 60
64 Tạo Prototype - Phần 61
1 Dự án UI/UX Clone Ứng dụng Di động Airbnb - Demo trực tiếp
2 Dự án UI/UX Clone Ứng dụng Di động Airbnb - Tệp nguồn
3 Tạo Tệp Thiết kế mới - Phần 1
4 Thêm Kiểu Màu - Phần 2
5 Thêm Kiểu Typography - Phần 3
6 Hoàn thiện Kiểu Typography - Phần 4
7 Thêm Biểu tượng trong Hệ thống Thiết kế - Phần 5
8 Tiếp tục Thêm Biểu tượng trong Hệ thống Thiết kế - Phần 6
9 Tạo Màn hình Landing Độ trung thực thấp - Phần 7
10 Tạo Màn hình Đăng nhập Độ trung thực thấp - Phần 8
11 Tiếp tục với Màn hình Đăng nhập Độ trung thực thấp - Phần 9
12 Hoàn thiện Màn hình Đăng nhập Độ trung thực thấp - Phần 10
13 Tạo Phần Banner Độ trung thực thấp trong Màn hình Trang chủ - Phần 11
14 Tạo Thẻ trong Màn hình Trang chủ Độ trung thực thấp - Phần 12
15 Hoàn thiện Thẻ Độ trung thực thấp của Màn hình Trang chủ - Phần 13
16 Tiếp tục với Màn hình Trang chủ Độ trung thực thấp - Phần 14
17 Hoàn thiện Màn hình Trang chủ Độ trung thực thấp - Phần 15
18 Tạo Phần Banner Màn hình Chi tiết Độ trung thực thấp - Phần 16
19 Tiếp tục Màn hình Chi tiết Độ trung thực thấp - Phần 17
20 Thêm Chi tiết bổ sung trong Màn hình Trang chủ Độ trung thực thấp - Phần 18
21 Thêm Phần Tiện ích trong Màn hình Chi tiết Độ trung thực thấp - Phần 19
22 Thêm Phần Bản đồ trong Màn hình Chi tiết Độ trung thực thấp - Phần 20
23 Tạo Phần Đánh giá trong Màn hình Chi tiết Độ trung thực thấp - Phần 21
24 Hoàn thiện Phần Đánh giá trong Màn hình Chi tiết Độ trung thực thấp - Phần 22
25 Tạo Thẻ chi tiết Chủ nhà của Màn hình Chi tiết Độ trung thực thấp - Phần 23
26 Hoàn thiện Phần chi tiết Chủ nhà của Màn hình Chi tiết Độ trung thực thấp - Phần 24
27 Thêm Chi tiết Tính năng bổ sung trong Màn hình Chi tiết Độ trung thực thấp - Phần 25
28 Hoàn thiện Màn hình Chi tiết Độ trung thực thấp - Phần 26
29 Tạo Màn hình Bản đồ Độ trung thực thấp - Phần 27
30 Tạo thẻ chi tiết sản phẩm của màn hình quy trình đặt phòng độ trung thực thấp-1 - Phần 28
31 Tạo thẻ đánh giá trong màn hình quy trình đặt phòng-1 độ trung thực thấp - Phần 29
32 Hoàn thiện màn hình quy trình đặt phòng-1 độ trung thực thấp - Phần 30
33 Tạo màn hình quy trình đặt phòng-2 độ trung thực thấp - Phần 31
34 Tạo trường nhập liệu trong màn hình quy trình đặt phòng-3 độ trung thực thấp - Phần 32
35 Hoàn thiện màn hình quy trình đặt phòng-3 độ trung thực thấp - Phần 33
36 Tạo màn hình quy trình đặt phòng-3 độ trung thực thấp (Nhập thẻ) - Phần 34
37 Hoàn thiện màn hình quy trình đặt phòng-3 độ trung thực thấp (Nhập thẻ) - Phần 35
38 Tạo màn hình đặt phòng-4 độ trung thực thấp - Phần 36
39 Tiếp tục với màn hình quy trình đặt phòng-4 độ trung thực thấp - Phần 37
40 Hoàn thiện màn hình quy trình đặt phòng-4 độ trung thực thấp - Phần 38
41 Tạo màn hình xác nhận đặt phòng độ trung thực thấp - Phần 39
42 Tạo màn hình hồ sơ độ trung thực thấp - Phần 40
43 Hoàn thiện màn hình hồ sơ độ trung thực thấp - Phần 41
44 Hoàn thiện khung dây độ trung thực thấp - Phần 42
45 Tạo màn hình landing và màn hình đăng nhập độ trung thực cao - Phần 43
46 Tạo phần banner màn hình trang chủ độ trung thực cao - Phần 44
47 Tạo carousal 1 trong màn hình trang chủ độ trung thực cao - Phần 45
48 Tạo carousal-2 của màn hình trang chủ độ trung thực cao - Phần 46
49 Tạo carousal-3 của màn hình trang chủ độ trung thực cao - Phần 47
50 Tạo carousal 4 & 5 của màn hình trang chủ độ trung thực cao - Phần 48
51 Tạo carousal 6 của màn hình trang chủ độ trung thực cao - Phần 49
52 Tạo carousal 7 của màn hình trang chủ độ trung thực cao - Phần 50
53 Tạo carousal 8 của màn hình trang chủ độ trung thực cao - Phần 51
54 Tạo carousal 9 của màn hình trang chủ độ trung thực cao - Phần 52
55 Tạo màn hình chi tiết độ trung thực cao - Phần 53
56 Hoàn thiện màn hình chi tiết độ trung thực cao và carousal đánh giá - Phần 54
57 Tạo màn hình bản đồ độ trung thực cao - Phần 55
58 Hoàn thiện các màn hình khung dây độ trung thực cao - Phần 56
59 Thêm các màn hình bổ sung cho chuyển tiếp prototype - Phần 57
60 Tính năng prototype cho màn hình landing, màn hình đăng nhập và màn hình trang chủ - Phần 58
61 Thêm tính năng prototype chuyển tiếp từ màn hình trang chủ đến màn hình bản đồ - Phần 59
62 Thêm tính năng prototype chuyển tiếp cho tất cả các màn hình - Phần 60
63 Hoàn thiện prototype - Phần 61
64 Sắp xếp hệ thống thiết kế - Phần 62
1 Tệp Tài nguyên Figma cho Dự án UI/UX Ứng dụng Di động Đặt vé máy bay
2 Dự án UI/UX Ứng dụng Di động Đặt vé máy bay Figma - Demo trực tiếp
3 Hướng dẫn Dự án UI/UX Ứng dụng Di động Đặt vé máy bay Figma
4 Tạo tệp thiết kế mới và thiết lập trang - Phần 1
5 Tạo hướng dẫn kiểu màu - Phần 2
6 Tạo hướng dẫn kiểu chữ - Phần 3
7 Hoàn thiện hướng dẫn kiểu chữ - Phần 4
8 Bộ sưu tập biểu tượng - Phần 5
9 Tạo màn hình hoạt ảnh độ trung thực thấp - Phần 6
10 Tạo màn hình landing độ trung thực thấp - Phần 7
11 Tạo màn hình đăng nhập độ trung thực thấp - Phần 8
12 Hoàn thiện màn hình đăng nhập độ trung thực thấp - Phần 9
13 Tạo phần banner của khung dây độ trung thực thấp - Phần 10
14 Tạo phần mới trong màn hình trang chủ độ trung thực thấp - Phần 11
15 Tạo phần nổi bật của màn hình trang chủ độ trung thực thấp - Phần 12
16 Tạo thẻ lớn cho màn hình trang chủ độ trung thực thấp - Phần 13
17 Hoàn thiện màn hình trang chủ độ trung thực thấp - Phần 14
18 Tạo màn hình chi tiết đặt vé máy bay - Phần 15
19 Tạo thanh chọn thời gian trong màn hình chi tiết đặt vé máy bay độ trung thực thấp - Phần 16
20 Thẻ phần chi tiết chuyến đi trong màn hình chi tiết đặt vé máy bay độ trung thực thấp - Phần 17
21 Thẻ phần chi tiết chuyến đi trong màn hình chi tiết đặt vé máy bay độ trung thực thấp - Phần 18
22 Các phần thẻ chi tiết chuyến đi trong màn hình chi tiết đặt vé máy bay độ trung thực thấp - Phần 19
23 Hoàn thiện màn hình chi tiết đặt vé máy bay độ trung thực thấp - Phần 20
24 Tạo màn hình xác nhận đặt vé độ trung thực thấp - Trang 21
25 Tiếp tục màn hình xác nhận đặt vé - Phần 22
26 Tiếp tục với màn hình xác nhận đặt vé - Phần 23
27 Hoàn thiện màn hình xác nhận đặt vé - Phần 24
28 Tạo phần thông tin cá nhân của màn hình hồ sơ độ trung thực thấp - Phần 25
29 Tiếp tục tạo màn hình hồ sơ - Phần 26
30 Thêm các tùy chọn tính năng trong màn hình hồ sơ độ trung thực thấp - Phần 27
31 Hoàn thiện màn hình hồ sơ độ trung thực thấp - Phần 28
32 Tạo phần thẻ ưu đãi trong màn hình ưu đãi độ trung thực thấp - Phần 29
33 Hoàn thiện phần thẻ ưu đãi trong màn hình ưu đãi độ trung thực thấp - Phần 30
34 Tạo thẻ voucher cho màn hình ưu đãi độ trung thực thấp - Phần 31
35 Hoàn thiện màn hình ưu đãi độ trung thực thấp - Phần 32
36 Tạo màn hình điểm đến độ trung thực thấp - Phần 33
37 Tạo thẻ chuyến đi điểm đến trong màn hình điểm đến độ trung thực thấp - Phần 34
38 Hoàn thiện màn hình điểm đến độ trung thực thấp - Phần 35
39 Tạo màn hình hoạt ảnh và landing độ trung thực cao - Phần 36
40 Tạo màn hình đăng nhập độ trung thực cao - Phần 37
41 Tạo màn hình trang chủ độ trung thực cao - Phần 38
42 Hoàn thiện màn hình trang chủ độ trung thực cao - Phần 39
43 Thêm hoạt ảnh trong màn hình trang chủ độ trung thực cao - Phần 40
44 Cuộn ngang trong màn hình trang chủ độ trung thực cao - Phần 41
45 Tạo màn hình chi tiết đặt vé máy bay độ trung thực cao - Phần 42
46 Hiệu ứng di chuột trên các ô ngày và giờ trong màn hình chi tiết đặt vé máy bay - Phần 43
47 Thẻ tính toán chi phí chuyến đi của màn hình chi tiết đặt vé máy bay - Phần 44
48 Thêm logic điều kiện cho số lượng hành khách trong chi tiết đặt vé - Phần 45
49 Thêm giá trị tính toán chi phí dựa trên tổng số hành khách - Phần 46
50 Thêm điều kiện cho nút radio trong màn hình chi tiết đặt vé máy bay - Phần 47
51 Hoàn thiện màn hình chi tiết đặt vé máy bay độ trung thực cao - Phần 48
52 Tạo màn hình xác nhận đặt vé độ trung thực cao - Phần 49
53 Tạo màn hình hồ sơ độ trung thực cao - Phần 50
54 Sửa đổi thẻ voucher trong màn hình ưu đãi độ trung thực cao - Phần 51
55 Hoàn thiện màn hình ưu đãi độ trung thực cao - Phần 52
56 Tạo màn hình điểm đến độ trung thực cao - Phần 53
57 Tiếp tục màn hình điểm đến độ trung thực cao - Phần 54
58 Hoàn thiện các thẻ điểm đến độ trung thực cao - Phần 55
59 Tạo phần thẻ điểm đến phổ biến cho độ trung thực cao - Phần 56
60 Tạo thẻ điểm đến thường xuyên được du lịch cho độ trung thực cao - Phần 57
61 Hoàn thiện phần thẻ địa điểm lịch sử trong độ trung thực cao - Phần 58
62 Sắp xếp các tệp - Phần 59
63 Thêm prototyping trong các màn hình độ trung thực cao - Phần 60
64 Hoàn thiện việc thêm prototyping trong các màn hình độ trung thực cao - Phần 61

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

In this Figma bootcamp, students will dive deep into the fundamentals and advanced techniques of mobile app design. Through hands-on projects, they will learn to create high-fidelity UI/UX designs and interactive prototypes for real-world applications. Each project will help build core skills in layout, navigation, user flow, and interactive elements using Figma's powerful design tools.


Project 1: Ride-Sharing Mobile App

  • Overview: Design a sleek and functional ride-sharing app, focusing on user-centered interfaces for a seamless ride-booking experience.

  • Learning Outcomes:

    • Creating a map interface for user pick-up/drop-off points

    • Designing a ride booking screen with options for ride types (e.g., standard, luxury, carpool)

    • Developing ride selection options (vehicle type, fare estimate, time of arrival)

    • Designing trip options (e.g., scheduling rides, favorite locations)

    • Building profile pages (user profile, payment methods, trip history)

    • Prototyping key user flows (booking a ride, selecting a driver, viewing ride details)

    • Interactive animations for map transitions and route details

Project 2: Shoe Shop E-commerce App

  • Overview: Build a modern and engaging e-commerce app for a shoe store, focusing on visually appealing product displays and user-friendly navigation.

  • Learning Outcomes:

    • Designing a home page with featured products and categories

    • Creating a bottom navigation bar for easy access to key sections (Home, Categories, Cart, Profile)

    • Developing a product details page with high-quality images, descriptions, and sizes

    • Implementing an "Add to Cart" feature with feedback animations

    • Designing a shopping cart page with options to modify items, apply discounts, and proceed to checkout

    • Adding animations for interactive prototypes to create a more immersive shopping experience

    • Prototyping user flows such as adding products to the cart, viewing details, and checking out

Project 3: Chat App UI/UX

  • Overview: Create a user-friendly and visually appealing chat app, focusing on messaging interfaces, notifications, and user interactions.

  • Learning Outcomes:

    • Designing a chat interface with messages, timestamps, and read receipts

    • Building a contacts list with options to search and start new conversations

    • Creating user profiles with settings, status updates, and notifications

    • Developing group chat interfaces with unique designs for multiple participants


Project 4: Music Player Mobile App

  • Overview: Design a sleek and intuitive music player app interface with album covers, playlist management, and playback controls.

  • Learning Outcomes:

    • Designing a home screen with featured playlists, recent tracks, and suggested songs

    • Building a now-playing screen with album art, playback controls, and song information

    • Creating a browse and search feature for finding songs, albums, and artists

    • Adding animated transitions for song changes, shuffle, and playback animations

    • Prototyping user flows for playing music, navigating playlists, and managing favorites


Types of Prototypes That You Will Learn in This Course:


  • Discussing the Types of UI Animation.

  • Destination, Trigger, Action and animation.

  • Prototype Settings,Testing & Sharing Prototypes.

  • How On Drag Trigger Works.

  • How On Click Trigger Works.

  • How While Hovering Trigger Works.

  • How After Delay Trigger Works.

  • Prototype Action-Navigate to and Change to.

  • Open overlay.

  • Toggle, Checkbox, Eye off on, radio.

  • Accordion Prototyping.

  • Tab Bar Prototyping.

  • Video interaction Prototyping.

  • Zooming Hover Prototyping.

  • Card Carosel Drag animation prototyping.

  • Sticky Scroll animation.

  • Range Slider Prototyping.

  • Text Animation Prototyping.

  • Notification Effects Prototyping.

  • animated card effect.

  • Switch and Toggle Button.

  • Conditional and set-variable.

  • Delete Prototyping using set variable.

  • Hide Show using Boolean.

  • App Screen Advance Prototyping.

  • Advance Prototyping Techniques.

  • Advance  prototype using Button Variants.

  • Animated Slider.

  • Real Time Typing Keyboard Prototyping.


Key Takeaways from the Bootcamp:

  • Deep understanding of UI/UX principles for mobile apps

  • Hands-on experience in interactive prototyping and animations

  • Best practices in mobile app navigation and user interaction



Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Design Tools
Hiển thị tất cả khoá học Figma
Hiển thị tất cả khoá học Prototyping
Hiển thị tất cả khoá học Ui Ux Design
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊