Chào mừng bạn đến với bài học cuối cùng trong chuỗi lộ trình "Figma cho người mới bắt đầu".
Ở
Nhiệm vụ của bạn chưa kết thúc khi vẽ xong. Bạn cần chuyển giao bản thiết kế đó cho Lập trình viên (Developer/Coder) để họ hiện thực hóa nó. Quá trình này gọi là Handoff (Bàn giao).
Nếu bạn bàn giao một file lộn xộn, layer không đặt tên, ảnh không xuất được, Developer sẽ gặp ác mộng và sản phẩm thực tế sẽ sai lệch so với thiết kế.
Trong bài học này, chúng ta sẽ tối ưu hóa quy trình làm việc với Plugins, học cách Export tài sản đúng chuẩn và quy trình Handoff chuyên nghiệp để cả team cùng vui.
Nếu Figma là một chiếc điện thoại thông minh, thì Plugins chính là các ứng dụng (Apps) trên đó. Cộng đồng người dùng Figma cực kỳ lớn mạnh, họ viết ra hàng ngàn công cụ nhỏ để giúp bạn làm việc nhanh hơn gấp 10 lần.
- Trên thanh công cụ phía trên, click vào biểu tượng Resources (Hình vuông có các hình khối nhỏ - phím tắt
Shift + I). Chuyển sang tab Plugins.
Gõ tên Plugin bạn muốn tìm vào thanh Search.
Nhấn Run để chạy ngay lập tức.
- Công dụng: Cung cấp hơn 100 bộ icon phổ biến (Material Design, FontAwesome...).
Cách dùng: Tìm icon -> Chọn màu -> Kéo thả vào bài thiết kế. File nhận được là dạng Vector (SVG) nên có thể chỉnh sửa thoải mái.
Công dụng: Chèn ảnh bản quyền miễn phí trực tiếp vào Shape đã chọn.
Cách dùng: Vẽ một hình chữ nhật -> Chạy Unsplash -> Chọn chủ đề "Technology" -> Ảnh tự động điền vào khung (Fill).
Công dụng: Điền nhanh dữ liệu giả (Tên người, Địa chỉ, SĐT, Avatar) để thiết kế trông thật hơn.
Liên kết: Microsoft phát triển plugin này nên dữ liệu rất phong phú.
- Công dụng: Đổi tên 100 layer cùng lúc theo quy tắc (VD:
Icon 01,Icon 02,Icon 03...) chỉ trong 1 nốt nhạc.
Công dụng: Kiểm tra xem màu chữ trên màu nền của bạn có đạt chuẩn WCAG (đủ rõ để đọc) hay không.
Mẹo: Đừng cài quá nhiều Plugin không dùng đến. Hãy bắt đầu với 5 cái trên và khám phá thêm tại
. Figma Community
II. Dọn dẹp file thiết kế (Clean Up)
Trước khi gửi file cho người khác, hãy dọn dẹp "bãi chiến trường" của bạn. Một file sạch sẽ thể hiện sự chuyên nghiệp và tôn trọng đồng nghiệp.
Trong quá trình vẽ, chúng ta hay lỡ tay tạo ra các Frame rỗng hoặc các layer bị ẩn (Hidden).
Hãy rà soát bảng Layer Panel. Xóa bỏ những gì không cần thiết.
Ungroup các Group vô nghĩa. (Chỉ nên Group khi thực sự cần thiết, ưu tiên dùng Frame).
Developer không thể biết Rectangle 456 là cái gì.
Hãy đổi tên thành:
bg-header,btn-submit,card-product.Quy tắc đặt tên nên thống nhất (thường dùng tiếng Anh, viết thường, gạch nối).
Đừng để tất cả mọi thứ ở Page 1. Hãy chia nhỏ file ra:
Cover: Ảnh bìa dự án (để dễ nhìn thấy ở Dashboard bên ngoài).
Components / Design System: Nơi chứa Master Component và Styles (Bài 5, 6, 7).
Design / Screens: Nơi chứa các màn hình thiết kế chính.
Playground / Archive: Nơi chứa các ý tưởng nháp hoặc thiết kế cũ (đừng xóa, hãy cất vào đây).
III. Export Assets: Xuất file đúng chuẩn
Mặc dù Developer có thể tự xuất ảnh, nhưng Designer nên định nghĩa sẵn các thông số để đảm bảo chất lượng.
Tại thẻ Export ở thanh Sidebar bên phải:
PNG (Portable Network Graphics):
Đặc điểm: Hỗ trợ nền trong suốt (Transparency), chất lượng cao.
Dùng khi: Xuất ảnh chụp, ảnh sản phẩm cần xóa nền.
JPG (JPEG):
Đặc điểm: Nén dung lượng nhỏ, không hỗ trợ nền trong suốt.
Dùng khi: Ảnh banner to, ảnh nền (Background) để giảm tải cho website.
SVG (Scalable Vector Graphics):
Đặc điểm: Ảnh vector, phóng to không vỡ, dung lượng siêu nhẹ (dạng code).
Dùng khi: BẮT BUỘC dùng cho Logo, Icon, và các hình minh họa đơn giản.
Lưu ý: SVG có thể chỉnh màu bằng code, rất tiện cho Developer.
PDF:
Dùng khi: Xuất hồ sơ, báo cáo, hoặc gửi bản xem trước cho khách hàng không dùng Figma.
Màn hình điện thoại hiện nay (Retina, Super AMOLED) có mật độ điểm ảnh rất cao. Nếu bạn chỉ xuất ảnh 1x (kích thước gốc), đưa lên iPhone sẽ bị mờ.
Web: Thường cần 1x và 2x.
iOS/Android: Cần 1x, 2x và 3x.
Cách làm: Trong mục Export, nhấn dấu
+để thêm dòng2xvà3xsuffix.
Mẹo: Với định dạng SVG, bạn không cần quan tâm 1x hay 2x vì nó là vector, luôn sắc nét ở mọi kích thước. Hãy ưu tiên SVG tối đa!
IV. Handoff: Quy trình bàn giao cho Developer
Đây là bước quan trọng nhất để biến thiết kế thành hiện thực.
Nhấn nút Share màu xanh ở góc phải.
Can view: Chỉ xem (Dành cho Dev, Khách hàng). Họ có thể soi thông số nhưng không kéo lệch thiết kế của bạn.
Can edit: Có thể sửa (Chỉ dành cho Designer khác trong team). Đừng cấp quyền này cho Dev nếu không muốn bị lỡ tay xóa mất file.
Dev Mode (Chế độ Nhà phát triển)
Từ năm 2023, Figma ra mắt Dev Mode (Nút gạt màu xanh lá cây </> trên thanh công cụ). Đây là giao diện chuyên biệt cho Developer.
Dev Mode cung cấp gì?
Inspect (Kiểm tra thông số):
Click vào một nút bấm, Dev sẽ thấy: Kích thước (Width/Height), khoảng cách (Padding/Margin), mã màu (Hex/RGB), font chữ.
Đặc biệt: Nó hiển thị chính xác các thông số Auto Layout mà bạn đã cài đặt ở
Bài 5 .
Copy Code:
Figma tự động sinh ra mã CSS (Web), SwiftUI (iOS) hoặc Kotlin (Android).
Dev có thể copy đoạn code
box-shadowhoặcgradientphức tạp mà không cần gõ lại.
Compare Changes:
Xem sự thay đổi giữa các phiên bản thiết kế.
Lưu ý: Dev Mode hiện tại là tính năng trả phí trên một số gói. Nếu dùng bản miễn phí, bạn vẫn có thể xem thông số ở tab Inspect cơ bản (Properties).
Giao tiếp bằng Comment
Đừng chỉ gửi link rồi im lặng. Hãy dùng tính năng Comment (Phím tắt C) để ghi chú (Annotation).
Ghi chú về luồng đi (Flow) nếu Prototype chưa rõ.
Ghi chú về các trường hợp đặc biệt (Edge cases): "Nếu tên người dùng quá dài thì xuống dòng hay hiện dấu ...?".
Giải thích các hiệu ứng chuyển động phức tạp.
V. Version History:
Đôi khi bạn sửa quá tay và muốn quay lại phiên bản ngày hôm qua. Đừng lo, Figma tự động lưu (Auto-save) mọi lúc.
Click vào tên file ở giữa thanh trên cùng -> Chọn Show version history.
Cột bên phải sẽ hiện ra danh sách các mốc thời gian.
Click vào để xem lại phiên bản cũ. Nếu muốn khôi phục, chọn Restore this version.
Tạo mốc lưu (Milestone):
Trước khi sửa lớn (Major Update), hãy nhấn Command + Option + S (Mac) hoặc Ctrl + Alt + S (Win) để lưu thủ công và đặt tên phiên bản (VD: "Chốt phương án 1 - Trước khi sửa theo feedback Khách hàng").
VI. Tổng kết lộ trình
Chúc mừng bạn! Bạn đã hoàn thành xuất sắc lộ trình 9 Bài học Figma cơ bản. Hãy nhìn lại chặng đường chúng ta đã đi qua:
- Từ việc cài đặt và làm quen giao diện (Bài 1, 2).
- Hiểu về cấu trúc cốt lõi Layers, Frames, Constraints (Bài 3, 4).
- Làm chủ tư duy Layout tự động và Component (Bài 5).
- Xây dựng hệ thống nhất quán với Styles và Variants (Bài 6, 7).
- Thổi hồn vào thiết kế với Prototype (Bài 8).
- Và cuối cùng là đóng gói, bàn giao sản phẩm chuyên nghiệp (Bài 9).
Thiết kế UI/UX là một hành trình dài của sự thấu hiểu người dùng và rèn luyện tư duy logic. Công cụ chỉ là phương tiện, và giờ đây bạn đã làm chủ được phương tiện mạnh mẽ nhất. Chúc bạn tạo ra những sản phẩm tuyệt vời!Thiết kế UI/UX là một hành trình dài của sự thấu hiểu người dùng và rèn luyện tư duy logic. Công cụ chỉ là phương tiện, và giờ đây bạn đã làm chủ được phương tiện mạnh mẽ nhất. Chúc bạn tạo ra những sản phẩm tuyệt vời!
Figma Plugins Community - Kho tàng plugin chính thức.Guide to Developer Handoff - Hướng dẫn bàn giao từ chính chủ Figma.
