Thiết kế UI · 8 buổi · Figma

Khóa học UI UX và Figma cho người mới bắt đầu

Từ màn hình trống đến một giao diện có hệ thống và một prototype bấm được. Sau 8 buổi.

Một màn hình đi từ bản phác thảo trên giấy, qua wireframe có ghi chú thử với người dùng, đến giao diện hoàn chỉnh trên canvas của công cụ thiết kế
Chọn lớp và đăng kýXem 8 buổi học

Online · Hà Nội · Hồ Chí Minh Khai giảng gần nhất 19/10/2026

Mỗi ngày bạn chạm vào hàng trăm giao diện.

Đến lúc bạn thiết kế chúng.

Buổi 3 · Auto layout và thành phần UI

Thêm một món, cả khung tự giãn theo.

Auto layout là lý do giao diện trong Figma không vỡ khi nội dung thay đổi. Khoảng cách, lề và kích thước được đặt một lần, phần còn lại tự xếp. Bấm thử để xem.

Giỏ hàng Hug
Bánh mì thịt× 1
Cà phê sữa đá× 1
Trà đào× 1
Hướng
↓ Dọc
Khoảng cách
12
Lề
16
Chiều cao
Hug

Học UI UX để làm được gì

Sau 8 buổi, bạn thiết kế được giao diện app và web trong Figma bằng component và auto layout, và trình bày nó bằng một prototype bấm được.

Luồng người dùng bốn bước vẽ bằng wireframe

01

Hiểu UI và UX

Giao diện đẹp là chưa đủ. Bạn học cách nghĩ từ người dùng.

Thang màu xanh với tỉ lệ tương phản từng bậc và hệ chữ bốn cấp

02

Màu sắc và typography

Bảng màu, độ tương phản, hệ chữ đọc tốt trên màn hình.

Một nút với ba độ dài chữ, padding và gap giữ nguyên, bên cạnh bảng Auto layout

03

Auto layout

Giao diện tự co giãn theo nội dung.

Bộ component Button với chín biến thể, Input và bảng Styles, Components

04

Design system và component

Một bộ thành phần dùng lại cho cả sản phẩm.

Cùng một sản phẩm trên trang web và trên màn hình điện thoại

05

Giao diện app và web

Đăng nhập, trang chủ, danh sách, chi tiết: đúng chuẩn, đúng khoảng cách.

Ba màn hình nối bằng tương tác On tap, sẵn sàng bấm Present

06

Prototype bấm được

Nối màn hình thành luồng, trình bày như sản phẩm thật.

Giáo trình khóa học Figma và UI

8 buổi như 8 frame trong một file Figma. Buổi sau dựng tiếp trên buổi trước.

  1. Buổi 1Giới thiệu về UI/UX và Figma

    Học
    Khái niệm UI, UX và các vị trí trong ngành; làm quen Figma, Community file, plugin; layout, grid, margin/padding, kiểu List/Grid/Tab View; chọn đề tài dự án cá nhân.
    Công cụ
    • Figma
    • Frame
    • Layout Guide
    • Bootstrap Grid
    • Community
    • Plugins
    Bài tập
    Thiết kế lại 2 màn hình (bảng tin và trang cá nhân) của một ứng dụng mạng xã hội quen thuộc.

  2. Buổi 2Màu sắc và typography

    Học
    Hệ màu RGB, bốn cách phối màu, bốn nhóm màu trong UI (primary, accent, semantic, neutral) và tỉ lệ 60-30-10; typeface, font size, font weight, line height, khoảng trắng và thang cỡ chữ heading/body/caption.
    Công cụ
    • Color Styles
    • Text Styles
    Bài tập
    Thiết kế mới 2 màn hình mobile có thành phần Card. Thêm moodboard, bộ màu và typography cho dự án.

  3. Buổi 3Auto layout và thành phần UI (phần 1)

    Học
    Thiết kế Button (trạng thái, kiểu, cấp độ), Tab Bar, Menu, Input Field và dùng Auto Layout trong Figma (hướng, khoảng cách, căn gióng, padding).
    Công cụ
    • Auto Layout
    • Button
    • Tab Bar
    • Menu
    • Input Field
    Phím tắt
    • Shift+A Thêm Auto Layout
    Bài tập
    Thiết kế 2 màn hình Đăng ký và Đăng nhập cho ứng dụng mobile, các thành phần UI dựng bằng Auto Layout.

  4. Buổi 4Thành phần UI (phần 2)

    Học
    Radio Button, Checkbox, Card, Popup và các thành phần riêng của website: Navigation Bar, Hero Header, Website Body, Footer; bắt đầu dựng màn hình trang chủ của đề tài trên Figma.
    Công cụ
    • Radio Button
    • Checkbox
    • Card
    • Popup
    • Navigation Bar
    • Hero Header
    Bài tập
    Thiết kế một landing page chủ đề tự chọn. Hoàn thiện 3–5 màn hình UI theo đề tài.

  5. Buổi 5Design system và component

    Học
    Design System gồm style guide, thư viện component, pattern library; tạo Component trong Figma, main component và instance, Variant, Text Property, Boolean Property, Instance Swap.
    Công cụ
    • Component
    • Instance
    • Variant
    • Text Property
    • Boolean Property
    • Instance Swap
    Phím tắt
    • Ctrl+Alt+K Tạo component
    Bài tập
    Thiết kế UI cho luồng quan trọng nhất của đề tài đã chọn.

  6. Buổi 6UI showcase practice

    Học
    Showcase là gì, cấu trúc mở đầu, thân bài, kết bài; các bước chọn dự án, sắp xếp thông tin, trình bày; lưu ý khi làm showcase/case study; thực hành 2–3 trang đầu showcase.
    Bài tập
    Hoàn thiện UI các màn hình và showcase cho bài cuối khóa.

  7. Buổi 7Prototype

    Học
    Prototype là gì, lo-fi và hi-fi prototype; tạo liên kết giữa các màn hình, chọn kiểu tương tác và hoạt họa trong Figma, kiểm thử trên ứng dụng Figma mobile hoặc chế độ Present.
    Công cụ
    • Prototype
    • Interactions
    • Present
    • Figma mobile app
    Bài tập
    Tạo prototype từ các màn hình đã thiết kế cho bài cuối khóa (thực hành trên lớp).

  8. Buổi 8Tổng kết cuối khóa

    Học
    Học viên thuyết trình dự án cá nhân và nhận góp ý của cả lớp, chia sẻ trải nghiệm, hỏi đáp về định hướng nghề UI-UX và gợi ý nguồn học tiếp.
    Bài tập
    Thiết kế UI ứng dụng 6–8 màn hình chủ đề tự chọn kèm showcase.

Bài cuối khoá · bắt đầu từ buổi 1

Một ứng dụng của riêng bạn, 6–8 màn hình

Ngay buổi 1 bạn chọn đề tài dự án cá nhân. Bài tập các buổi sau được gom vào file dự án đó, để đến buổi 8 bạn có UI ứng dụng 6–8 màn hình chủ đề tự chọn, kèm showcase và prototype, và thuyết trình nó trước cả lớp.

  1. Buổi 1Chọn đề tài dự án cá nhân.
  2. Buổi 2Moodboard, bộ màu và typography cho dự án.
  3. Buổi 43–5 màn hình UI theo đề tài.
  4. Buổi 5UI cho luồng quan trọng nhất của đề tài.
  5. Buổi 6Hoàn thiện UI các màn hình và showcase.
  6. Buổi 7Prototype từ các màn hình đã thiết kế.
  7. Buổi 8Thuyết trình, nhận góp ý của cả lớp.

Học thế nào để ra được bài

Mỗi buổi 2 tiếng. Bạn làm bài ngay trên lớp, làm tiếp ở nhà, và mọi bài đều dồn vào một dự án.

Bài tập trên lớp

Mỗi buổi có bài thực hành ngay trong giờ học.

Bài tập về nhà

Làm tiếp sau buổi học. Bài tập được tổng hợp vào file dự án cá nhân của bạn.

Thuyết trình buổi cuối

Bạn trình bày dự án và nhận góp ý của cả lớp.

Điều kiện nhận chứng chỉ
Tham gia tối thiểu 75% số buổi
Hoàn thành tối thiểu 80% bài tập

Chứng chỉ số của ColorME có mã QR để nhà tuyển dụng quét và xác minh.

Ba điều người mới hay hỏi

Có cần biết vẽ hay biết code không?
ColorME Không cần. UI dựa trên bố cục, màu, chữ và thành phần có sẵn.
Mình biết Photoshop rồi, Figma khác gì?
ColorME Auto layout, component, design system: tư duy riêng của UI.
Muốn vào nghề UI/UX mà không biết bắt đầu từ đâu.
ColorME Một lộ trình rõ ràng, từ Figma đến prototype.

Đi kèm khoá học

Lịch học, bài tập và công cụ để làm tiếp sau khi khoá học kết thúc.

App học viên: lớp học trong túi bạn

Lịch học, nộp bài, nhận xét của giảng viên. Ngay trên điện thoại.

  • Vào lớp một chạm
  • Nộp bài, nhận nhận xét
  • Điểm danh bằng mã QR
  • Chứng chỉ có mã xác minh
App học viên ColorME: lịch từng buổi học với trạng thái điểm danh và buổi hôm nayApp học viên ColorME: nhận xét của giảng viên và các bạn trong lớp dưới một bài nộp

Premium Account 3 tháng

Học UI UX ở ColorME, bạn được dùng các công cụ trên colorme.vn trong 3 tháng kể từ ngày đóng học phí.

130+công cụ thiết kế và AI
  • Biến wireframe thành giao diện
  • Tạo hình minh họa
  • Nhận xét portfolio bằng AI
Chứng chỉ sốCó mã QR để xác minh
Học trực tiếp với giảng viênMỗi buổi 2 tiếng
Học tạiOnline · Hà Nội · Hồ Chí Minh

Khóa học UI UX design cho người mới bắt đầu

Không cần biết Figma trước. Không cần biết vẽ, không cần biết code.

Một frame trống và hình chữ nhật đầu tiênSinh viên, người trái ngành

Muốn thử nghề UI/UX, bắt đầu từ con số 0.

Một poster in và một màn hình app đặt cạnh nhau, cùng cách dàn bố cụcGraphic designer

Muốn chuyển sang thiết kế giao diện.

Wireframe ý tưởng với ghi chú trao đổi giữa product owner, designer và devMarketer, product owner, chủ startup

Tự phác giao diện, làm việc tốt hơn với designer và dev.

Chọn lớp của bạn

Học phí 2.200.000đ

8 buổi · mỗi buổi 2 tiếng · học trực tiếp với giảng viên.

Thiết Kế UI 19/10/2026 Tối Thứ 2 - Thứ 4 (19h00 - 21h00) Online HN
Thiết Kế UI 27/07/2026 Tối Thứ 2 - Thứ 4 (19h00 - 21h00) Online HN
Thiết Kế UI Lớp 1 kèm 1 ColorME sẽ gọi cho bạn khi có lịch mới Online HN
Thiết Kế UI Lớp 1 kèm 1 Tuỳ theo sự sắp xếp giữa giảng viên và học viên Online SG

Trước khi bạn đăng ký

Học UI UX bắt đầu từ đâu?

Từ hiểu người dùng và nắm một công cụ. Buổi 1 giới thiệu UI/UX và Figma, rồi đi dần qua màu, chữ, auto layout, component, prototype.

Học UI UX có khó không? Có cần biết vẽ hay code?

Không cần vẽ, không cần code. Bạn cần chăm quan sát và luyện tập đều.

Học UI UX cho người mới mất bao lâu?

8 buổi, mỗi buổi 2 tiếng.

Khóa học này khác gì UI UX Toàn Diện?

Thiết kế UI là khóa nền tảng giao diện. UI UX Toàn Diện dành cho người đã có nền tảng, đi sâu vào phát triển sản phẩm. Lộ trình UI UX Designer đi từ cơ bản tới nghề.

Học xong có sản phẩm cho portfolio không?

Có bài cuối khóa bạn trình bày ở buổi cuối. Đó là case study đầu tiên.

AI có thay thế UI designer không?

AI tạo bản phác nhanh hơn. Quyết định cái gì đúng cho người dùng vẫn là việc của designer. Khóa học dạy phần quyết định đó.

Học UI UX online có hiệu quả không?

Có. Lớp học trực tiếp với giảng viên theo lịch, nộp bài và nhận nhận xét qua App học viên.

Có chứng chỉ sau khóa học không?

Có. Hoàn thành khóa học, bạn nhận chứng chỉ số của ColorME có mã QR để xác minh.

Điều kiện để nhận chứng chỉ là gì?

Tham gia tối thiểu 75% số buổi và hoàn thành tối thiểu 80% bài tập. Chứng chỉ số của ColorME có mã QR để xác minh.

Bài cuối khóa UI UX làm gì?

Một dự án cá nhân theo đề tài bạn chọn từ buổi 1: UI ứng dụng 6–8 màn hình chủ đề tự chọn, kèm showcase và prototype. Bạn thuyết trình dự án ở buổi 8 và nhận góp ý của cả lớp.

Màn hình trống đang chờ bạn.

Bắt đầu khóa học UI UX của bạn.

Chọn lớp và đăng ký
Phác thảo, wireframe, giao diện, prototype, bài cuối khóa, rồi một frame trống dành cho bạn