Học Figma cho người mới bắt đầu: Lộ trình 30 ngày kèm bài tập

Figma là công cụ thiết kế giao diện phổ biến nhất hiện nay, và với sinh viên Việt Nam nó gần như là lựa chọn hiển nhiên: chạy trên trình duyệt nên máy cấu hình thấp vẫn dùng được, miễn phí cho cá nhân, có gói giáo dục cho sinh viên, và cho phép cả nhóm làm việc trên cùng một file — điều cực kỳ hữu ích khi làm đồ án nhóm.

Bài viết này là lộ trình 30 ngày, mỗi ngày khoảng 45–60 phút. Nguyên tắc xuyên suốt: học tính năng nào thì làm ngay bài tập của tính năng đó, không xem hết video rồi mới thực hành.

Tuần 1: Nền tảng — di chuyển được trong Figma

Ngày 1–2: Giao diện và tư duy khung.

Làm quen với ba vùng: bảng lớp (layers) bên trái, canvas ở giữa, bảng thuộc tính bên phải. Khái niệm quan trọng nhất cần hiểu ngay là Frame — không chỉ là hình chữ nhật mà là một khung chứa, có thể lồng nhau và có quy tắc co giãn riêng.

Bài tập: tạo file mới, dựng frame kích thước iPhone và frame desktop, vẽ vài hình khối, tập di chuyển và nhóm.

Ngày 3–4: Hình khối, chữ và màu.

Công cụ vẽ, bo góc, viền, đổ bóng, công cụ chữ và các thuộc tính. Học cách dùng bảng màu và lấy màu bằng eyedropper.

Bài tập: vẽ lại chính xác giao diện màn hình đăng nhập của một ứng dụng bạn đang dùng. Đây là bài tập rèn mắt tốt nhất trong tuần đầu.

Ngày 5–6: Constraint và lưới.

Constraint quyết định phần tử co giãn ra sao khi frame đổi kích thước. Thêm Layout Grid để căn chỉnh theo cột.

Bài tập: dựng một header có logo trái, menu phải, và đảm bảo khi kéo giãn frame thì logo bám trái, menu bám phải.

Ngày 7: Tổng kết tuần.

Bài tập: thiết kế một trang giới thiệu bản thân (một màn hình), áp dụng lưới 12 cột và hệ khoảng cách 8pt như trong bài bố cục và hệ lưới.

Tuần 2: Auto Layout — thứ thay đổi mọi thứ

Auto Layout là tính năng quan trọng nhất của Figma. Nó biến các nhóm phần tử thành khối tự sắp xếp: thêm nội dung thì khối tự giãn, đổi cỡ chữ thì khoảng cách vẫn đúng.

Ngày 8–10: Auto Layout cơ bản.

Học các thuộc tính: hướng (dọc/ngang), khoảng cách giữa các phần tử, khoảng đệm bên trong, cách căn chỉnh.

Bài tập: dựng một nút bấm bằng Auto Layout, sau đó đổi chữ trong nút từ "Gửi" thành "Gửi bài tập nhóm" — nút phải tự giãn mà khoảng đệm không đổi.

Ngày 11–12: Auto Layout lồng nhau.

Đây là chỗ nhiều người bỏ cuộc, nhưng cũng là chỗ tạo ra khác biệt. Một thẻ nội dung thường có 3 tầng Auto Layout: thẻ (dọc) chứa phần đầu (ngang) và phần thân (dọc).

Bài tập: dựng thẻ hiển thị thông tin môn học gồm ảnh, tên môn, số tín chỉ và nút đăng ký, sao cho khi tên môn dài ra thì cả thẻ tự giãn xuống.

Ngày 13–14: Danh sách và bảng.

Bài tập: dựng danh sách 5 thẻ môn học xếp dọc bằng Auto Layout, thêm hoặc bớt một thẻ thì khoảng cách tự động đúng.

Mẹo tiết kiệm thời gian: phím tắt tạo Auto Layout là Shift + A. Hãy dùng nó cho gần như mọi nhóm phần tử.

Tuần 3: Component, Variants và Variables

Ngày 15–17: Component.

Component là phần tử gốc, các bản sao (instance) sẽ tự cập nhật khi bạn sửa gốc. Đây là nền tảng của tư duy hệ thống.

Bài tập: biến nút bấm ở tuần 2 thành component, đặt 10 bản sao ra màn hình, rồi đổi màu ở component gốc — cả 10 phải đổi theo.

Ngày 18–19: Variants.

Variants gom các trạng thái của cùng một component vào một chỗ: nút chính/phụ, cỡ lớn/nhỏ, trạng thái mặc định/hover/vô hiệu hóa.

Bài tập: tạo component nút với 2 loại × 3 trạng thái = 6 variants, chuyển đổi bằng bảng thuộc tính.

Ngày 20–21: Styles và Variables.

Khai báo màu, cỡ chữ, hiệu ứng thành style dùng lại được. Variables tiến thêm một bước: cho phép đổi chế độ sáng/tối bằng một cú bấm.

Bài tập: khai báo bộ token cho đồ án của bạn (5 màu, 5 cỡ chữ, các mức khoảng cách) theo hướng dẫn trong bài Design System là gì, rồi tạo chế độ sáng và tối.

Tuần 4: Prototype, làm việc nhóm và bàn giao

Ngày 22–24: Prototype.

Chuyển sang chế độ Prototype, nối các frame bằng liên kết, chọn hiệu ứng chuyển cảnh. Học thêm overlay (cho hộp thoại) và Smart Animate (cho chuyển động mượt giữa hai trạng thái).

Bài tập: nối một luồng hoàn chỉnh gồm 5 màn hình — từ trang chủ đến khi hoàn tất một tác vụ — và mở thử trên điện thoại bằng ứng dụng Figma.

Ngày 25–26: Làm việc nhóm.

Chia sẻ file, phân quyền xem/sửa, bình luận trực tiếp trên thiết kế, xem lịch sử phiên bản. Với đồ án nhóm, hãy thống nhất quy ước đặt tên trang và tên lớp ngay từ đầu — file lộn xộn là nguyên nhân gây mất thời gian nhiều nhất.

Ngày 27–28: Bàn giao cho lập trình viên.

Chế độ Dev Mode cho phép lập trình viên đọc thông số và xuất tài nguyên. Việc của bạn là: đặt tên lớp rõ ràng, dùng style thay vì màu tự do, chuẩn bị đủ trạng thái, và ghi chú những chỗ đặc biệt.

Ngày 29–30: Plugin và tổng kết.

Một số plugin hữu ích cho sinh viên: tạo dữ liệu giả để điền nội dung, kiểm tra tương phản màu, xuất tài nguyên hàng loạt, dọn dẹp lớp thừa.

Bài tập cuối: hoàn thiện một dự án nhỏ gồm 6–8 màn hình, có design token, component, prototype bấm được và một trang tài liệu ngắn.

Bảng phím tắt cần thuộc

Chỉ cần thuộc Shift + A, Alt + rê chuột và Ctrl + /, tốc độ làm việc của bạn đã tăng đáng kể.

Năm thói quen giúp file Figma không thành mớ hỗn độn

1. Đặt tên lớp ngay khi tạo. Một file với 200 lớp tên "Frame 12", "Rectangle 47" là ác mộng cho chính bạn hai tuần sau.
2. Tách trang rõ ràng: một trang cho nghiên cứu, một cho wireframe, một cho thiết kế cuối, một cho component.
3. Không sao chép thủ công. Nếu bạn thấy mình copy một phần tử lần thứ ba, hãy biến nó thành component.
4. Dùng style cho mọi màu và cỡ chữ. Chọn màu tự do là cách nhanh nhất để có 12 sắc thái xanh khác nhau.
5. Dọn file trước khi nộp. Xóa các bản nháp không dùng, ẩn các frame thử nghiệm, đặt frame chính lên đầu.

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

Figma có miễn phí cho sinh viên không?

Figma có gói miễn phí dùng được cho cá nhân với số file hạn chế, và có chương trình dành cho sinh viên/giảng viên với nhiều tính năng hơn khi bạn xác minh được tình trạng học tập. Chính sách cụ thể có thể thay đổi, nên hãy kiểm tra trực tiếp trên trang giáo dục của Figma.

Máy yếu chạy Figma có mượt không?

Figma chạy trong trình duyệt và xử lý phần lớn trên máy bạn, nên file lớn có thể gây chậm. Cách khắc phục: tách file theo module, giảm số ảnh độ phân giải cao, đóng bớt tab trình duyệt, và dùng ứng dụng desktop thay vì tab trình duyệt.

Học Figma bao lâu thì làm được đồ án?

Với lộ trình trên, sau tuần 2 bạn đã dựng được các màn hình tĩnh; sau tuần 4 bạn có thể làm trọn một đồ án có prototype. Điểm nghẽn thường không phải công cụ mà là tư duy thiết kế — hãy học song song các bài về nguyên lý.

Figma khác gì Photoshop và Illustrator?

Figma tối ưu cho thiết kế giao diện: làm việc theo frame, component, và cộng tác trực tuyến. Photoshop mạnh về xử lý ảnh, Illustrator mạnh về đồ họa vector và ấn phẩm in. Nếu bạn làm poster in khổ lớn, Illustrator vẫn phù hợp hơn.

Có cần biết code khi dùng Dev Mode không?

Không bắt buộc. Dev Mode chủ yếu để lập trình viên đọc thông số. Nhưng nếu bạn hiểu cơ bản về HTML/CSS, bạn sẽ thiết kế ra những thứ khả thi hơn và bàn giao trơn tru hơn.

Nên học Figma qua video hay tự mò?

Kết hợp: xem tài liệu chính thức của Figma để nắm khái niệm, sau đó dành phần lớn thời gian dựng lại các giao diện có sẵn. Việc dựng lại một ứng dụng thật dạy bạn nhiều hơn mười video hướng dẫn.

Nguồn tham khảo

• Figma Learn – Help Center
• Figma for Education
• Figma – Tokens, variables, and styles

Kết luận

Figma là công cụ dễ bắt đầu nhưng có chiều sâu. Ba tính năng tạo ra khác biệt lớn nhất giữa người mới và người đã quen là Auto Layout, Component và Variables — nếu chỉ có thời gian cho ba thứ, hãy chọn ba thứ đó.

Và hãy nhớ: Figma chỉ là cái bút. Chất lượng thiết kế đến từ nguyên lý bố cục, màu sắc, typography và hiểu biết về người dùng.

Bài viết liên quan

• Lộ trình tự học thiết kế cho sinh viên
• Design System là gì
• Wireframe, Mockup và Prototype khác nhau thế nào
• Bố cục và hệ lưới trong thiết kế