Thiết kế UI/UX với Figma

Các bước học

1. 1

   Bước 1: Làm quen Figma

   ⏱ 1 tuần

   Tạo tài khoản, làm quen giao diện, frame, layer và các công cụ vẽ cơ bản.

   FrameLayerCông cụ vẽ

   Sau bước này bạn có thể

   • Tạo file, frame theo kích thước màn hình
   • Vẽ hình, chèn chữ, hình ảnh và sắp xếp layer
   • Căn chỉnh, tạo khoảng cách đều giữa các phần tử

   Video hướng dẫn

   Video

   Figma cơ bản - Bài 1: Làm quen với FigmakaorumapXem trên YouTube ↗

   ✍️ Bài tập thực hành

   Vẽ lại một thẻ sản phẩm và một thanh điều hướng từ website bạn hay dùng.

   Tôi đã học xong bước này
2. 2

   Bước 2: Tự học qua bài tập UI/UX

   ⏱ 3 - 4 tuần

   Học Figma theo từng bài tập: component, auto layout, màu sắc, typography.

   ComponentAuto layoutTypographyMàu sắc

   Sau bước này bạn có thể

   • Tạo component và biến thể để dùng lại
   • Dùng auto layout để giao diện tự co giãn
   • Chọn bảng màu, cỡ chữ và giữ nhất quán
   • Dựng wireframe trước khi làm giao diện chi tiết

   Video hướng dẫn

   Playlist

   Hướng dẫn Figma - tự học và tự làm bài tập UI/UXNhân LưuXem trên YouTube ↗

   ✍️ Bài tập thực hành

   Thiết kế trang chủ cho một quán cà phê: wireframe trước, sau đó hoàn thiện giao diện bằng component và auto layout.

   Tôi đã học xong bước này
3. 3

   Bước 3: Thực hành thiết kế app

   ⏱ 2 - 3 tuần

   Áp dụng kiến thức để thiết kế giao diện một ứng dụng di động hoàn chỉnh.

   UI mobilePrototype

   Sau bước này bạn có thể

   • Thiết kế theo kích thước và thói quen thao tác trên điện thoại
   • Nối các màn hình thành prototype bấm thử được
   • Trình bày file thiết kế gọn gàng để bàn giao cho lập trình viên

   Video hướng dẫn

   Video

   Thiết kế UI/UX: Vẽ ứng dụng Mobile App đơn giản bằng FigmaTt LearningXem trên YouTube ↗

   ✍️ Bài tập thực hành

   Thiết kế 5 màn hình cho ứng dụng đặt đồ ăn: trang chủ, danh sách món, chi tiết món, giỏ hàng, thanh toán và nối thành prototype.

   Tôi đã học xong bước này

Dự án cuối lộ trình

Bộ giao diện website và ứng dụng

Thiết kế trọn bộ giao diện cho một thương hiệu giả định, gồm website và ứng dụng di động, để đưa vào hồ sơ năng lực.

Yêu cầu tối thiểu

• Bảng màu, kiểu chữ và bộ component dùng chung
• Website: trang chủ và 2 trang con, có bản cho điện thoại
• Ứng dụng di động: tối thiểu 5 màn hình
• Prototype bấm thử được và đường link chia sẻ

Cách học hiệu quả

• Mỗi bước chỉ cần chọn một video hoặc playlist hợp với bạn và theo đến hết, không cần xem tất cả.
• Vừa xem vừa làm theo từng thao tác trên máy của mình, đừng chỉ xem.
• Hoàn thành bài tập thực hành trước khi sang bước tiếp theo.
• Học đều mỗi ngày một ít hiệu quả hơn dồn nhiều giờ vào cuối tuần.
• Đánh dấu bước đã học xong để theo dõi tiến độ; tiến độ được lưu trên trình duyệt này.

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

Không có năng khiếu vẽ thì có học thiết kế UI/UX được không?

Được. Thiết kế giao diện dựa nhiều vào nguyên tắc bố cục, khoảng cách, màu sắc và sự nhất quán hơn là khả năng vẽ tay. Những thứ này đều luyện được.

Figma bản miễn phí có đủ để học không?

Đủ. Bản miễn phí có đầy đủ công cụ thiết kế và prototype cần cho lộ trình này.

UI và UX khác nhau thế nào?

UI là phần nhìn: màu sắc, chữ, hình ảnh, bố cục. UX là trải nghiệm khi sử dụng: có dễ hiểu, dễ thao tác, đạt được mục đích hay không. Lộ trình này tập trung vào UI và các nguyên tắc UX cơ bản.

Làm sao để tiến bộ nhanh?

Vẽ lại giao diện của các sản phẩm tốt là cách luyện hiệu quả. Hãy để ý vì sao họ chọn khoảng cách, cỡ chữ như vậy, rồi áp dụng vào bài của mình.