Học Figma từ số 0: lộ trình 7 ngày cho người mới

Học Figma từ số 0 mất khoảng 7 ngày nếu mỗi ngày bạn dành 30–60 phút cho một kỹ năng: frame, chữ và màu, auto layout, component, ghép màn hình, prototype, rồi chia sẻ. Gói Starter miễn phí đủ cho cả lộ trình. Hết tuần, bạn có một màn hình đăng ký dùng component và một prototype bấm thử được.

Tôi là Hai Le, UI/UX designer hơn 5 năm, từng dựng design system cho Car From Japan, Oreka và Joyme. Lộ trình dưới đây là thứ tự tôi sẽ dạy một người mới nếu chỉ có một tuần: học công cụ theo đúng thứ tự mà một màn hình thật được dựng lên. Mỗi ngày có một bài tập nhỏ và một đầu ra để bạn tự kiểm xem mình đã xong chưa.

Học Figma cần chuẩn bị gì?

Bạn cần một máy tính, kết nối internet và một tài khoản Figma. Dùng Figma qua trình duyệt hay ứng dụng desktop đều được.

Gói Starter (miễn phí) đủ cho cả 7 ngày. Theo trang mô tả gói của Figma, Starter cho tối đa 3 file Figma Design trong team, nhưng số draft thì không giới hạn. Người mới nên làm mọi bài tập trong draft. Vài giới hạn khác của Starter: lịch sử phiên bản chỉ giữ 30 ngày, không có team library và không có Dev Mode. Chưa cái nào trong số đó cản bạn ở tuần đầu.

Nếu thích học qua video, Figma có khoá Figma Design for beginners miễn phí trên Figma Learn. Khoá này dựng một trang portfolio từ đầu, đi từ layer đầu tiên tới auto layout, component và prototype, và dùng được với gói Starter. Bạn có thể xem khoá đó song song với lộ trình này. Bài tập ở đây nhỏ hơn và tập trung vào một màn hình duy nhất.

Ngày 1: Frame và layer là gì?

Frame là khung chứa: một màn hình điện thoại, một thẻ, một nút đều có thể là frame. Mọi thứ bạn đặt vào frame trở thành layer con của nó, và cây layer hiện ở cột trái.

Bật công cụ Frame bằng phím F hoặc A. Khi công cụ đang bật, cột phải hiện danh sách preset theo thiết bị: Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media. Chọn một preset Phone để có ngay một frame đúng kích thước điện thoại.

Tôi luôn dặn người mới dùng frame thay cho group khi muốn gom các thứ lại. Frame mới dùng được auto layout, constraints và prototype, ba thứ bạn sẽ cần từ ngày 3 trở đi.

Bài tập (30 phút). Tạo một frame Phone. Bên trong, vẽ một hình chữ nhật làm ô nhập liệu, một hình chữ nhật khác làm nút, và gõ ba dòng chữ: tiêu đề, nhãn ô nhập, chữ trên nút. Đặt tên cho từng layer ở cột trái, ví dụ input/email, button/primary.

Đầu ra. Một frame có tên rõ ràng, cây layer đọc lên hiểu được mà không cần nhìn canvas.

Ngày 2: Chữ, màu và style dùng thế nào cho nhất quán?

Một giao diện trông "lộn xộn" thường là do có quá nhiều cỡ chữ và quá nhiều sắc xám gần giống nhau. Cách chữa là đặt ra một bộ nhỏ ngay từ đầu rồi chỉ dùng trong bộ đó.

Ở Joyme, tôi gói toàn bộ chữ vào một họ Nunito Sans với ba độ đậm và sáu cỡ, từ 12 đến 32px. Bộ màu gồm một thang tím làm màu chính, một thang cam làm màu phụ và một thang xám. Người mới không cần nhiều đến thế. Bốn cỡ chữ và năm màu là đủ cho một màn hình đăng ký.

Trong Figma, bạn lưu các lựa chọn đó thành style (text style, color style) hoặc variable. Variable có bốn loại: màu, số, chuỗi chữ và boolean, và được nhóm theo collection. Tuần đầu, bạn chỉ cần biết style và variable đều giúp đổi một chỗ là cả file đổi theo.

Bài tập (45 phút). Chọn một font có đủ dấu tiếng Việt. Tạo bốn text style: tiêu đề 28px, nội dung 16px, nhãn 14px, chú thích 12px. Tạo năm màu: nền, chữ chính, chữ phụ, đường viền, màu nhấn. Áp chúng vào frame của ngày 1, không để layer nào còn màu hay cỡ chữ gõ tay.

Đầu ra. Một bảng style nhỏ ở góc canvas, và frame ngày 1 chỉ dùng giá trị từ bảng đó.

Ngày 3: Auto layout là gì và vì sao nên học sớm?

Auto layout cho frame tự sắp các layer con theo hàng hoặc cột, với khoảng cách và lề do bạn đặt. Thêm chữ vào nút thì nút tự dài ra. Thêm một ô nhập vào form thì các ô bên dưới tự dịch xuống.

Chọn layer rồi bấm Shift + A (hoặc nút "Add auto layout" ở cột phải). Figma có ba kiểu sắp xếp: Vertical (theo cột), Horizontal (theo hàng) và Grid (theo lưới). Hai kiểu đầu có thêm Wrap để đẩy layer xuống hàng mới khi hết chỗ. Hai thông số bạn sẽ chỉnh nhiều nhất là Padding (khoảng từ mép frame tới nội dung) và Gap (khoảng giữa các layer con).

Phần làm người mới rối là ba chế độ kích thước:

Chế độ	Ý nghĩa	Dùng cho
Hug contents	Frame co lại vừa khít nội dung	Nút, nhãn, chip
Fill container	Layer giãn ra chiếm hết chỗ trống của frame cha	Ô nhập, nút rộng full
Fixed	Giữ nguyên kích thước bạn đặt	Avatar, icon

Bài tập (60 phút). Dựng lại màn hình ngày 1 bằng auto layout. Nút là một frame Horizontal, Hug contents, padding 12 và 20. Mỗi ô nhập là frame Vertical chứa nhãn và ô. Cả form là frame Vertical, gap 16, các ô con để Fill container.

Đầu ra. Kéo dãn frame Phone sang rộng hơn, form giãn theo mà không có gì bị lệch. Đổi chữ trên nút thành một câu dài hơn, nút tự dài ra.

Ngày 4: Component và variant giúp gì?

Component là một khối dùng lại được. Bạn sửa component gốc (main component) thì mọi bản sao (instance) đổi theo. Đây là nền móng của mọi design system.

Chọn layer rồi bấm Option + Command + K trên Mac, hoặc Ctrl + Alt + K trên Windows. Bạn cũng có thể bấm "Create component" ở cột phải hoặc trong menu chuột phải.

Variant gom nhiều phiên bản của cùng một component vào một component set, ví dụ nút có các thuộc tính Size và State. Thêm variant bằng cách chuột phải vào main component, chọn Main component rồi Add variant. Mỗi variant trong set phải là một tổ hợp thuộc tính riêng, không trùng nhau.

Một điều tôi rút ra khi dựng thư viện hơn 50 component cho Joyme: những trạng thái dễ bị quên nhất là trạng thái trống, lỗi, mất kết nối và hộp xác nhận trước khi xoá. Ngay từ component đầu tiên, hãy tập nghĩ "khối này còn trạng thái nào nữa". Bạn có thể xem cách các trạng thái đó xuất hiện trong case study Joyme.

Bài tập (60 phút). Biến nút và ô nhập thành component. Tạo variant cho nút: State gồm Default, Hover, Disabled. Tạo variant cho ô nhập: Default, Focus, Error (viền đỏ và một dòng báo lỗi).

Đầu ra. Một trang "Components" trong file, có hai component set. Đổi màu nút trong main component thì mọi instance đổi theo.

Ngày 5: Ghép một màn hình hoàn chỉnh như thế nào?

Ngày 5 không học thêm công cụ mới. Bạn ghép những gì đã có thành một màn hình đăng ký đầy đủ, chỉ dùng instance, không vẽ thêm khối rời.

Phần khó của ngày này là quyết định thiết kế. Ở Car From Japan, tôi cắt popup hỏi xe xuống chỉ còn những gì người mua chưa cung cấp: tên, email, điện thoại bắt buộc, địa chỉ tuỳ chọn. Tiêu đề popup dùng đúng chữ trên nút người mua vừa bấm. Hai nguyên tắc này áp dụng được ngay cho form đầu tiên của bạn: chỉ hỏi điều thật sự cần, và để chữ trên nút khớp với điều người dùng sẽ thấy tiếp theo.

Bài tập (45 phút). Dựng màn hình "Tạo tài khoản" gồm tiêu đề, ba ô nhập (họ tên, email, mật khẩu), một nút chính và một dòng "Đã có tài khoản? Đăng nhập". Dùng dữ liệu thật, ví dụ một tên tiếng Việt dài có dấu, để xem chữ có tràn không. Nhân bản frame thành hai trạng thái: một bản trống và một bản có lỗi ở ô email.

Đầu ra. Hai frame: "Đăng ký" và "Đăng ký – lỗi email", toàn bộ dựng từ instance và style của ngày 2–4.

Ngày 6: Làm prototype bấm thử được ra sao?

Prototype nối các frame bằng tương tác để người khác bấm thử như ứng dụng thật. Đây là cách rẻ nhất để biết luồng có chỗ nào khó hiểu trước khi dev viết dòng code nào.

Mở tab Prototype ở cột phải. Chọn layer làm điểm bấm (hotspot), kéo dấu cộng tới frame đích. Trong bảng chi tiết tương tác, đặt Trigger là On click (hoặc On tap), Action là Navigate to, và thử animation Smart animate. Xem kết quả bằng nút Present trên thanh công cụ.

Ở Oreka, nhóm tôi dựng prototype cho tính năng Hỏi đáp và cho 5 người mua, 5 người bán thử trước khi làm thật; 9 trên 10 người hoàn thành tác vụ không cần trợ giúp. Bạn không cần quy mô đó. Một người bạn bấm thử trong 5 phút đã đủ để thấy chỗ họ khựng lại.

Bài tập (45 phút). Thêm frame thứ ba "Đăng ký thành công". Nối nút "Tạo tài khoản" ở frame trống sang frame lỗi email, và nút ở frame lỗi sang frame thành công. Gửi link cho một người, nhờ họ bấm và nói to điều họ đang nghĩ.

Đầu ra. Một prototype ba màn hình chạy được trong chế độ Present, và một ghi chú ngắn về chỗ người thử bị khựng.

Ngày 7: Chia sẻ file và thử Figma Make

Ngày cuối có hai việc: dọn file để người khác đọc được, và thử một công cụ AI để biết nó giúp được gì.

Dọn file nghĩa là đặt tên trang ("Components", "Screens"), đặt tên frame theo luồng, xoá layer thừa, và bấm Share để gửi link xem. Dev Mode không có ở gói Starter, nên dev sẽ xem file bằng chế độ xem thông thường. Tên layer rõ ràng từ ngày 1 giúp họ nhiều hơn bạn nghĩ.

Sau đó, mở Figma Make: trong phần Drafts của trình quản lý file, bấm nút Make ở góc trên bên phải. Dán frame "Đăng ký" vào khung chat và nhờ nó dựng thành prototype có code. So kết quả với bản bạn tự làm, rồi ghi lại chỗ nó làm đúng và chỗ nó đoán sai. Bài Figma Make là gì giải thích cách viết câu lệnh, giới hạn của gói miễn phí và những gì Figma Make chưa làm được.

Bài tập (60 phút). Dọn file theo các bước trên, rồi tạo một file Figma Make từ frame "Đăng ký". Viết ít nhất hai câu lệnh sửa (một về bố cục, một về trạng thái lỗi).

Đầu ra. Một link file Figma gọn gàng để gửi đi, và một đoạn ghi chú 5–10 dòng so sánh bản tự dựng với bản Figma Make.

Sau 7 ngày nên học gì tiếp?

Bạn đã có đủ nền để đi tiếp theo một trong hai hướng.

Nếu muốn sâu hơn ở phía thiết kế, hãy dựng lại một màn hình của ứng dụng bạn dùng mỗi ngày, rồi học variables và mode (ví dụ sáng/tối). Đây là lúc component, style và auto layout bắt đầu ghép thành một design system nhỏ.

Nếu muốn đưa thiết kế ra thành trang chạy được, đọc tiếp Claude Code cho designer. Sau đó, Figma MCP và Claude Code hướng dẫn cách cho Claude Code đọc token và component trực tiếp từ file Figma. Còn DESIGN.md là gì nói về cách viết quy tắc thiết kế ra một file chữ để cả người lẫn AI cùng đọc.

Nếu bạn đang tuyển một designer biết dựng design system và làm việc được với dev, phần giới thiệu về tôi có kinh nghiệm và cách liên hệ.

Nguồn

• Starter plan overview, Figma Help Center
• Course overview: Figma Design for beginners, Figma Learn
• Frames in Figma Design, Figma Help Center
• Guide to auto layout, Figma Help Center
• Create and insert component instances, Figma Help Center
• Create and use variants, Figma Help Center
• Overview of variables, collections, and modes, Figma Help Center
• Connect your prototype, Figma Help Center
• Present designs and prototypes, Figma Help Center
• Create a Figma Make file, Figma Help Center