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

Figma UI UX Design Essentials

Những Điều Cốt Yếu về Thiết Kế UI UX với Figma

Những Điều Cốt Yếu về Thiết Kế UI UX với Figma

Sử dụng Figma để tìm việc làm trong lĩnh vực Thiết kế UI, Giao diện Người dùng, Thiết kế Trải nghiệm Người dùng, UX Design & Thiết kế Web

4.7
(45,535 đánh giá)
190,107 học viên
Giảng viên
Daniel Walter Scott
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 369.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
9.5 giờ video
123 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 27/06/2026

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

Cách bắt đầu sự nghiệp UX Designer với Figma.
Cách sử dụng Figma cho Thiết kế UX & UI Cơ bản
Cách tạo nguyên mẫu (prototype) tương tác hoàn chỉnh.
Cách làm việc với tính cách người dùng (UX personas).
Bạn có thể thêm "UX designer" vào CV của mình.
Xây dựng một dự án UX từ đầu đến cuối.
Điều khách hàng mong đợi ở bạn với tư cách một UX designer.
Cách tạo wireframe đơn giản.
Cách áp dụng màu sắc và hình ảnh một cách chính xác trong thiết kế.
Những điều nên và không nên khi chọn font chữ cho ứng dụng web & di động.
Cách tạo biểu tượng (icon), nút bấm và các thành phần UI khác của riêng bạn.
Các thuật ngữ như Components, Constraints & Multi Dimensional Variants.
Bộ UI kit & plugin miễn phí cho Figma giúp tăng tốc đáng kể quy trình làm việc!
Cách xây dựng một bộ hướng dẫn phong cách (style guide) đơn giản, sẵn sàng bàn giao cho khách hàng.
Cách tạo các micro interaction, chuyển trang và hiệu ứng động từ đơn giản đến nâng cao.
Học cách thiết kế website và ứng dụng điện thoại.
Làm việc với font chữ và màu sắc.
Kiểm thử (test) trên điện thoại di động.
Xuất các tài sản (assets) sẵn sàng cho sản xuất.
Tạo bản tóm tắt yêu cầu (brief) và tính cách người dùng (persona) UX đầu tiên của bạn.
Học các thủ thuật và phím tắt chuyên nghiệp trong quy trình làm việc.
Hỗ trợ diễn đàn từ tôi và đội ngũ BYOL.
Tất cả các kỹ thuật được sử dụng bởi các chuyên gia UX
111 video nội dung chi tiết về Figma, UX & Thiết kế UI.

Yêu cầu

Bạn cần có một tài khoản Figma. Có sẵn gói miễn phí trên trang web Figma.
Không cần kinh nghiệm trước về Thiết kế UX/UI.
Không cần kỹ năng Figma trước đó.
Không yêu cầu kỹ năng hoặc kinh nghiệm thiết kế trước đây.

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

Dành cho bất kỳ ai muốn bắt đầu sử dụng Figma trong sự nghiệp và kiếm tiền từ kỹ năng thiết kế trải nghiệm người dùng.
Khóa học này dành cho người mới bắt đầu, người mới học và nghiệp dư trong lĩnh vực thiết kế UX.
Hướng đến những người mới bước vào thế giới thiết kế và trải nghiệm người dùng.
Dành cho bất kỳ ai cần thêm 'Thiết kế UX' vào portfolio của họ.
Dành cho bất kỳ ai muốn học những điều cốt yếu của Thiết kế UI & UX.

Nội dung khóa học

25 phần • 95 bài giảng
1 Giới thiệu khóa đào tạo Figma Essentials
2 Bắt đầu với đào tạo Figma
3 Figma dùng để làm gì & nó có viết code không?
4 Sự khác biệt giữa UI và UX trong Figma là gì
5 Chúng ta sẽ làm gì trong khóa học Figma này
6 Dự án lớp 01 - Tạo bản tóm tắt yêu cầu của riêng bạn
1 Wireframe Low Fidelity và High Fidelity trong Figma khác nhau thế nào
2 Tạo file thiết kế & giới thiệu về frames trong Figma
1 Kiến thức cơ bản về kiểu chữ & font chữ trong Figma
2 Hình chữ nhật, Hình tròn, Nút bấm, Góc bo tròn trong Figma
3 Cách sử dụng màu sắc trong Figma
4 Đường viền (Strokes) và cách cập nhật màu mặc định trong Figma
5 Chỉnh sửa đối tượng và cách thoát trong Figma
6 Công cụ Scale và Selection Tool trong Figma
7 Frames và Groups trong Figma khác nhau thế nào
8 Dự án lớp 02 - Wireframe
9 Tìm biểu tượng (icon) miễn phí cho Figma ở đâu
10 Cách sử dụng Plugin trong Figma để lấy icon
11 Dự án lớp 03 - Biểu tượng (Icons)
1 Cách sử dụng Pages trong Figma
1 Cách tạo nguyên mẫu (prototype) trong Figma
2 Hiệu ứng động (animation) và làm mượt (easing) cho prototype trong Figma
3 Cách Thêm Thanh Trạng thái iOS trong Figma
4 Kiểm thử trên điện thoại với Figma Mirror
5 Dự án lớp 04 - Kiểm thử trên điện thoại của bạn
1 Smart Animation và độ trễ (delays) trong Figma là gì
2 Dự án lớp 05 - Hiệu ứng động đầu tiên của tôi
1 Chia sẻ & Bình luận trên file Figma với các Bên liên quan (Stakeholders)
2 Teams, Projects và Drafts trong Figma là gì
1 Cách tôi lấy cảm hứng cho các dự án UX
2 Cách tạo bảng cảm hứng (mood board) trong Figma
3 Dự án Lớp 06 - Bảng cảm hứng (Moodboard)
1 Cách làm việc với Cột & Lưới (Grid) trong Figma
1 Mẹo, Thủ thuật, Tùy chọn và những điều thú vị trong Figma
1 Nguồn cảm hứng màu sắc & công cụ eyedropper trong Figma
2 Cách tạo bảng màu (color palette) trong Figma
3 Cách tạo hiệu ứng chuyển màu (gradient) trong Figma
4 Cách tạo & sử dụng Color Styles trong Figma
5 Dự án Lớp 07 - Màu sắc & Cột
1 Font chữ bị thiếu trên trình duyệt của Figma
2 Tôi có thể dùng font nào? và cách kết hợp font (font pairing) trong Figma
3 Nên chọn kích thước font phổ biến nào trong thiết kế web?
4 Cách tạo Character Styles trong Figma
5 Văn bản giả (Lorem ipsum) & Văn bản giữ chỗ (Placeholder text) trong Figma
6 Sử dụng AI Để Tạo Văn bản trong Figma
7 Những điều hữu ích cần biết về văn bản trong Figma
8 Dự án lớp 08 - Văn bản
9 Văn bản trên đường dẫn - Chữ cong trong Figma
10 Văn bản xung quanh hình tròn - Huy hiệu (Badge) trong Figma
1 Cách Sử dụng Công cụ Bút chì & Cọ vẽ trong Figma
2 Cách Sử dụng Công cụ Pen trong Figma
3 Dự án Lớp 09 - Công cụ Pen
4 Cách Sử dụng Công cụ Shape Builder trong Figma
5 Nút bấm Squircle với góc bo tròn iOS trong Figma
6 Dự án Lớp 10 - Biểu tượng (Icons)
7 Lựa chọn thông minh (Smart Selection) & Sắp xếp gọn gàng (Tidy up) trong Figma
1 Mẹo & thủ thuật sử dụng hình ảnh trong Figma
2 Che mặt nạ (Masking) & Cắt hình ảnh (Cropping) trong Figma
3 Hình ảnh & plugin miễn phí cho Figma
4 Tạo Hình ảnh AI trong Figma
5 Dự án Lớp 11 - Hình ảnh
1 Auto Layout & Nút bấm mở rộng (Expanding Buttons) trong Figma là gì?
2 Dự án lớp 12 - Nút bấm
3 Auto Layout cho Khoảng cách & Điều hướng trong Figma
4 Cách sử dụng ràng buộc (constraints) trong figma
5 Kết hợp Khung lồng nhau (Nested frames), Auto Layout & Ràng buộc trong Figma
6 Dự án Lớp 13 - Thiết kế Đáp ứng (Responsive Design)
1 Hiệu ứng đổ bóng (drop shadow) & đổ bóng trong (inner drop shadow) đẹp trong Figma
2 Hiệu ứng Làm mờ lớp (Blur Layer), Làm mờ nền & Làm mờ hình ảnh trong Figma
3 Dự án lớp 14 - Hiệu ứng
1 Components trong Figma là gì
2 Nên lưu các components chính của bạn ở đâu trong Figma
3 Dự án Lớp 15 - Components
1 Cách Tạo Component Variants trong Figma
2 Một cách khác để tạo variants trong Figma
3 Dự án Lớp 16 - Variants
1 Cách thêm lớp phủ popup (popup overlay modal) trong Figma
2 Cách tạo & tạo nguyên mẫu cho chú giải công cụ (tool tip) trong Figma
3 Flows trong Figma là gì
4 Menu điều hướng di động trượt vào (Slide in) trong Figma
5 Dự án lớp 17 - Tạo nguyên mẫu (Prototyping)
6 Cách ghim điều hướng lên đầu trong Figma
1 Teams, Projects và Files trong Figma khác nhau thế nào?
1 Biến thể Thành phần Tương tác cho Hover & Checkbox trong Figma
2 Tương tác vi mô công tắc bật/tắt (toggle switch) trong Figma
3 Dự án Lớp 18 - Tương tác vi mô (Micro interaction)
1 Cách thay đổi hình thu nhỏ cho File Figma
1 Tổng quan về Figma Sites
1 Cách xuất hình ảnh từ Figma
2 Cách chia sẻ tài liệu của bạn với khách hàng & các bên liên quan
3 Trao đổi với nhà phát triển (developer) sớm trong quy trình thiết kế Figma
4 Chế độ dành cho nhà phát triển (Dev Mode) và Bàn giao cho Developer
5 Dự án Lớp 19 - Hoàn thiện thiết kế của bạn
1 Bước tiếp theo cho bạn và Figma
2 Tiếp tục học cùng tôi! Liên kết bên trong.

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

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer.

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step.

  • First we’ll describe the brief & how to work with a UX persona.

  • Then you’ll learn how to create simple wireframes.

  • From there we’ll look at how to implement colours & images properly in your designs.

  • You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps.

  • You’ll learn how to create your own icons, buttons & other UI components.

  • You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how.

  • We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

  • We’ll build a simple Style Guide ready for client handoff.

  • You’ll understand how to make both simple & advanced micro interactions, page transitions & animations

Before the end of this course you will have made fully interactive prototypes

You will take a project all the way through - collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer.

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio.

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

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 Figma
Hiển thị tất cả khoá học Prototyping
Hiển thị tất cả khoá học Ui Ux Design
Hiển thị tất cả khoá học Web Design
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊