Thiết kếCơ bảnBán chạy

UI/UX với Figma từ cơ bản

Từ người mới đến thiết kế được app và website hoàn chỉnh trên Figma, có case study để xin việc.

  • 4,7 (3 đánh giá)
  • 3.870 học viên
  • 22 giờ · 36 bài
  • Chứng chỉ hoàn thành

Giảng viên: Vũ Khánh Linh · Senior Product Designer

Video giới thiệu khóa UI/UX với Figma từ cơ bản

Bạn sẽ làm được gì

  • Thực hiện phỏng vấn người dùng và tổng hợp thành persona, user flow
  • Vẽ wireframe low-fi và hi-fi cho một ứng dụng di động hoàn chỉnh
  • Dựng design system gồm màu, chữ, component và biến số trong Figma
  • Làm prototype tương tác đủ để thử nghiệm với người dùng thật
  • Thiết kế responsive cho website với lưới và auto layout
  • Trình bày case study và bàn giao file thiết kế cho lập trình viên

Khóa học dành cho người mới hoàn toàn với thiết kế giao diện: sinh viên, người trái ngành muốn chuyển sang UI/UX, hoặc lập trình viên, marketer muốn tự thiết kế sản phẩm của mình. Bạn chỉ cần máy tính và tinh thần thử đi thử lại, không cần biết vẽ.

Học xong, bạn đi hết quy trình thiết kế sản phẩm: tìm hiểu người dùng, vẽ luồng và wireframe, dựng giao diện có hệ thống bằng Figma, làm prototype tương tác, thử nghiệm với người thật và bàn giao cho lập trình viên. Ba dự án cuối khóa được trình bày thành case study sẵn sàng đưa vào portfolio.

Giảng viên là người làm sản phẩm thật nên bài học bám sát cách làm việc trong team: dùng component, auto layout, biến số, ghi chú bàn giao. Bạn nhận nhận xét chi tiết cho từng dự án và có thư viện template để dùng lại.

Khóa học dành cho

  • Người trái ngành muốn chuyển sang UI/UX designer
  • Sinh viên thiết kế, công nghệ thông tin cần portfolio đầu tiên
  • Lập trình viên, marketer muốn tự thiết kế giao diện sản phẩm của mình
  • Freelancer thiết kế web muốn nâng cấp tư duy sản phẩm

Yêu cầu đầu vào

  • Laptop hoặc PC có thể chạy Figma trên trình duyệt hoặc ứng dụng desktop
  • Không cần biết thiết kế hay vẽ trước đó
  • Dành khoảng 5 đến 6 giờ mỗi tuần để học và làm dự án

Công cụ sử dụng

FigmaFigJamMaze hoặc UseberryGoogle FormsNotionWhimsical

Giáo trình

6 chương · 36 bài học · 22 giờ 20 phút · 3 bài học thử miễn phí

Chương 1: UI/UX là gì và làm quen Figma6 bài · 220 phút
  • UI và UX khác nhau thế nào, một ngày làm việc của designerHọc thử30′
  • Làm quen giao diện Figma: frame, layer, công cụ cơ bảnHọc thử35′
  • Vẽ màn hình đầu tiên bằng shape và textHọc thử40′
  • Căn lề, khoảng cách và lưới 8 điểm35′
  • Typography: chọn font, cỡ chữ và phân cấp thông tin40′
  • Màu sắc, độ tương phản và tiêu chuẩn dễ tiếp cận40′
Chương 2: Nghiên cứu người dùng và định hướng sản phẩm6 bài · 220 phút
  • Chọn đề tài app di động cho dự án chính30′
  • Phỏng vấn người dùng: câu hỏi nên hỏi, câu nên tránh40′
  • Tổng hợp insight bằng affinity map trên FigJam35′
  • Persona và hành trình người dùng40′
  • Phân tích đối thủ và xác định tính năng cốt lõi35′
  • Vẽ user flow và sơ đồ cấu trúc ứng dụng40′
Chương 3: Wireframe và design system6 bài · 240 phút
  • Phác thảo wireframe low-fi bằng giấy và Figma40′
  • Component và variants: tạo nút, ô nhập, thẻ40′
  • Auto layout: làm giao diện co giãn đúng ý45′
  • Style và biến số cho màu, chữ, khoảng cách40′
  • Dựng thư viện component dùng chung cho nhóm35′
  • Wireframe hi-fi cho các màn hình chính40′
Chương 4: Thiết kế giao diện hoàn chỉnh6 bài · 220 phút
  • Màn hình đăng nhập, đăng ký và onboarding35′
  • Màn hình trang chủ, danh sách và chi tiết40′
  • Biểu mẫu, thanh toán và xử lý lỗi40′
  • Trạng thái rỗng, đang tải và thông báo35′
  • Icon, hình ảnh và minh họa nhất quán35′
  • Chế độ tối và biến thể giao diện35′
Chương 5: Prototype, kiểm thử và responsive6 bài · 220 phút
  • Prototype cơ bản: liên kết màn hình và chuyển cảnh35′
  • Hoạt ảnh vi tương tác bằng smart animate40′
  • Kiểm thử khả dụng với 5 người dùng40′
  • Tổng hợp phản hồi và điều chỉnh thiết kế35′
  • Thiết kế responsive cho website: lưới và breakpoint40′
  • Dự án 2: landing page responsive từ wireframe đến hi-fi30′
Chương 6: Bàn giao, case study và đi làm6 bài · 220 phút
  • Chuẩn bị file bàn giao: đặt tên, ghi chú, xuất tài nguyên35′
  • Làm việc với lập trình viên bằng chế độ Dev Mode35′
  • Viết case study: cấu trúc, câu chuyện và số liệu40′
  • Dựng portfolio trên Behance hoặc website cá nhân35′
  • Chuẩn bị phỏng vấn và bài test thiết kế40′
  • Bảo vệ dự án cuối khóa35′

Dự án thực hành

1

Ứng dụng di động đặt dịch vụ

Thiết kế trọn vẹn một app từ nghiên cứu, wireframe đến giao diện hi-fi và prototype, kèm file thiết kế có design system.

2

Landing page responsive

Một trang đích cho sản phẩm có bản desktop, tablet và mobile, dùng lưới và auto layout, sẵn sàng bàn giao.

3

Case study cho portfolio

Bài trình bày dự án chính gồm vấn đề, quy trình, kết quả kiểm thử và bài học, định dạng đăng lên Behance.

Giảng viên

Vũ Khánh Linh

Vũ Khánh Linh

Senior Product Designer · 8 năm kinh nghiệm

Senior Product Designer dạy UI/UX và branding theo cách làm việc thật của đội sản phẩm.

Xem hồ sơ

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

4,73 đánh giá
  • 5 sao
    2
  • 4 sao
    1
  • 3 sao
    0
  • 2 sao
    0
  • 1 sao
    0
N
Ngô Phương ThảoVừa nghỉ việc kế toán, tự học thiết kế

Mình chưa từng cầm công cụ thiết kế nào mà vẫn theo kịp, nhờ chị Linh dạy rất chậm phần auto layout và component. Case study ứng dụng đặt lịch cuối khóa là bài đầu tiên trong portfolio của mình.

Đ
Đinh Công DanhLập trình viên frontend muốn hiểu thiết kế

Dân code như mình hay bỏ qua khoảng cách và phân cấp chữ. Sau phần design system, mình trao đổi với designer trong đội dễ hơn hẳn và tự dựng được bản mẫu trước khi code.

L
Lâm Thị Kim NgânSinh viên mỹ thuật công nghiệp

Bài phỏng vấn người dùng và vẽ luồng rất thực tế, đúng thứ mình thiếu. Chỉ tiếc phần nghiên cứu hơi ngắn so với phần giao diện, mình phải tự đọc thêm, còn lại khóa học rất đáng.

Chỉ học viên đã hoàn thành khóa mới có thể đánh giá (mô phỏng).

Câu hỏi thường gặp

Tôi không biết vẽ có học UI/UX được không?

Được. UI/UX nặng về tư duy, bố cục và logic hơn là vẽ tay. Bạn dùng hình khối, lưới và component có sẵn, kỹ năng vẽ không phải điều kiện.

Tôi cần mua Figma không?

Không. Gói miễn phí của Figma đủ cho toàn bộ bài tập trong khóa. Khóa học có hướng dẫn cách tổ chức file để không vượt giới hạn gói miễn phí.

Được hỗ trợ thế nào khi bị kẹt?

Bạn hỏi dưới từng bài hoặc gửi link file Figma trong nhóm hỏi đáp. Giảng viên và trợ giảng nhận xét trực tiếp trên file, phản hồi trong 48 giờ làm việc.

Có chứng chỉ và hoàn tiền không?

Có chứng nhận hoàn thành của SKILLUP sau khi bạn nộp đủ 3 dự án. Bạn được hoàn tiền trong 7 ngày nếu thấy khóa học chưa phù hợp.

Máy tính cấu hình thấp có chạy mượt không?

Figma chạy trên trình duyệt nên máy 8GB RAM là đủ cho phần lớn dự án. Nếu máy yếu, bạn nên dùng bản ứng dụng desktop và hạn chế mở quá nhiều tab.

Bài viết liên quan

Thiết kế6 phút đọc

UI/UX là gì? Khác nhau thế nào

UI/UX là gì? Phân biệt giao diện và trải nghiệm người dùng qua ví dụ dễ hiểu, quy trình làm việc của designer và cách…

Khóa học cùng chủ đề

990.000đ 1.590.000đ