Trả lời ngắn: Figma là công cụ thiết kế giao diện chạy trên trình duyệt, mạnh nhất ở chỗ nhiều người sửa cùng lúc trên một file và lập trình viên lấy được thông số trực tiếp từ bản thiết kế.
Nên dùng nếu: bạn thiết kế website, ứng dụng, hoặc làm việc trong đội có cả thiết kế và lập trình. Không phải công cụ cho: ấn phẩm marketing hằng ngày, dùng Canva sẽ nhanh hơn nhiều.
Figma khác gì các công cụ thiết kế khác?
Ba khác biệt tạo nên vị thế của Figma:
Chạy trên trình duyệt. Không cài đặt, không lo phiên bản, không gửi file qua lại. Người xem chỉ cần một đường link.
Nhiều người sửa cùng lúc. Giống Google Docs nhưng cho thiết kế. Cả đội nhìn thấy con trỏ của nhau, bình luận ngay trên bản thiết kế.
Lập trình viên lấy được thông số trực tiếp. Bấm vào một nút là thấy màu, khoảng cách, cỡ chữ và cả đoạn CSS. Điều này xoá bỏ khâu "thiết kế bàn giao cho code" vốn hay sai sót.
Figma làm tốt việc gì?
| Loại việc | Mức độ | Ghi chú |
|---|---|---|
| Thiết kế giao diện web, app | Tốt nhất | Tiêu chuẩn của ngành |
| Làm việc nhóm | Tốt nhất | Nhiều người sửa cùng lúc |
| Bàn giao cho lập trình | Tốt nhất | Lấy thông số và CSS trực tiếp |
| Dựng hệ thống thiết kế | Rất tốt | Component tái sử dụng, biến số |
| Bản mẫu tương tác | Rất tốt | Bấm thử được như app thật |
| Vẽ sơ đồ, bảng ý tưởng | Tốt | Có FigJam đi kèm |
| Ấn phẩm mạng xã hội | Khá | Làm được nhưng chậm hơn Canva |
| Chỉnh ảnh | Kém | Chỉ ở mức cơ bản |
| Dàn trang in ấn | Kém | Không có kiểm soát màu in |
Ai nên dùng Figma?
- Nhà thiết kế giao diện, đây là công cụ chuẩn của ngành, gần như bắt buộc phải biết.
- Lập trình viên frontend, đọc thông số từ bản thiết kế thay vì hỏi đi hỏi lại.
- Quản lý sản phẩm, xem và bình luận trực tiếp trên bản thiết kế.
- Startup, đội nhóm nhỏ, bản miễn phí đủ dùng cho dự án nhỏ.
Không cần Figma nếu công việc của bạn là ấn phẩm marketing, banner, bài đăng, slide. Canva làm việc đó nhanh hơn nhiều.
Bốn thứ nên học sớm
1. Component, thành phần dùng lại
Tạo một nút thành component, dùng ở 50 chỗ. Sửa component gốc thì cả 50 chỗ đổi theo. Đây là tính năng quan trọng nhất của Figma và cũng bị bỏ qua nhiều nhất.
2. Auto layout, bố cục tự co giãn
Đặt auto layout cho khung, nội dung dài ra thì khung tự giãn. Không còn phải kéo tay từng phần tử mỗi lần đổi chữ.
3. Biến số cho màu và cỡ chữ
Định nghĩa bảng màu và bộ cỡ chữ một lần, dùng xuyên suốt. Đổi màu chủ đạo thì cả file đổi theo, và bạn có sẵn nền tảng để làm giao diện tối.
4. Chế độ xem dành cho lập trình
Chia sẻ link ở chế độ này cho lập trình viên. Họ tự lấy được mọi thông số mà không cần hỏi bạn.
Hạn chế cần biết
Cần thời gian học
Figma không khó như Photoshop nhưng cũng không phải mở ra là dùng được ngay. Cần vài tuần để quen với component và auto layout.
Phụ thuộc mạng
Có bản cài trên máy nhưng vẫn cần mạng để đồng bộ. Mạng chậm thì trải nghiệm khó chịu, nhất là với file lớn.
File lớn chạy nặng
Dự án nhiều màn hình và nhiều ảnh sẽ làm trình duyệt chậm rõ rệt.
Không thay được công cụ in ấn
Thiếu kiểm soát màu cho bản in và không có công cụ dàn trang tài liệu dài. Đừng dùng Figma để chuẩn bị file cho nhà in.
Bàn giao cho lập trình viên thế nào cho gọn?
Đây là khâu tạo ra nhiều hiểu lầm nhất giữa người thiết kế và người lập trình, và cũng là nơi Figma tạo khác biệt lớn nhất so với công cụ khác.
- Đặt tên lớp cho có nghĩa (30 phút), Lập trình viên đọc tên lớp để hiểu ý đồ. Tên mặc định kiểu hình chữ nhật 27 không nói lên điều gì.
- Dùng thành phần dùng lại thay vì sao chép (liên tục), Nút bấm phải là một thành phần duy nhất, không phải mười bản sao. Lập trình viên nhìn vào biết ngay đây là một thành phần trong mã nguồn.
- Đặt biến cho màu và khoảng cách (40 phút), Thay vì mã màu rời rạc, dùng biến có tên. Điều này ánh xạ thẳng sang biến trong mã nguồn.
- Vẽ đủ các trạng thái (60 phút), Trạng thái trống, đang tải, có lỗi, dữ liệu quá dài. Đây là phần hay bị quên nhất và cũng gây tranh cãi nhiều nhất khi bàn giao.
- Ghi chú những chỗ có quy tắc riêng (20 phút), Ví dụ danh sách quá mười mục thì hiện thế nào. Ghi ngay cạnh thiết kế, đừng để trong tin nhắn.
Phần lớn thời gian mất mát trong dự án không đến từ việc thiết kế hay lập trình chậm, mà từ những vòng trao đổi qua lại vì bản thiết kế chưa nói hết. Một giờ bỏ ra để làm kỹ khâu bàn giao thường tiết kiệm được vài ngày ở giai đoạn sau.
Figma so với các công cụ khác
| Tiêu chí | Figma | Canva | Adobe XD | Photoshop |
|---|---|---|---|---|
| Thiết kế giao diện | Tốt nhất | Không | Tốt | Hạn chế |
| Làm việc nhóm | Tốt nhất | Tốt | Khá | Hạn chế |
| Bàn giao cho code | Tốt nhất | Không | Tốt | Kém |
| Ấn phẩm marketing | Khá | Tốt nhất | Khá | Tốt |
| Thời gian học | Vài tuần | Một buổi | Vài tuần | Vài tháng |
| Chạy trên trình duyệt | Có | Có | Không | Hạn chế |
| Bản miễn phí | Rộng rãi | Rộng rãi | Hạn chế | Không |
Xem thêm đánh giá Canva, đánh giá v0, công cụ sinh giao diện React từ ảnh thiết kế, hoặc duyệt công cụ thiết kế.
Kết luận
Nếu bạn làm sản phẩm số, website, ứng dụng, phần mềm, Figma là công cụ mặc định và không có lý do gì để chọn khác. Cả ngành đang dùng nó, nên bạn cũng dễ tuyển người và dễ hợp tác.
Nếu bạn làm marketing và cần ấn phẩm hằng ngày, Figma là lựa chọn sai. Nó mạnh nhưng chậm cho loại việc đó.
Bản miễn phí đủ cho cá nhân và dự án nhỏ, nên cứ thử nghiêm túc trước. Việc đầu tiên nên học là component, nó thay đổi hoàn toàn cách bạn làm việc.
