Kỹ năng Figma cần biết để đi làm

Để đi làm với Figma, bạn cần nhiều hơn việc kéo thả hình khối. Nhà tuyển dụng thường kiểm tra bốn nhóm kỹ năng: dựng giao diện linh hoạt bằng Auto Layout, tổ chức thư viện bằng Components và Variables, làm prototype để kiểm thử, và bàn giao rõ ràng cho lập trình viên. Nắm chắc bốn nhóm này thì bạn đã đủ nền tảng cho vị trí junior.

Dưới đây là từng kỹ năng, kèm gợi ý bài tập để bạn tự kiểm tra.

1. Auto Layout: nền tảng của mọi giao diện

Auto Layout cho phép khung tự giãn, co theo nội dung và giữ khoảng cách nhất quán. Đây là kỹ năng đầu tiên nhà tuyển dụng nhìn vào, vì nó cho thấy bạn nghĩ về giao diện như lập trình viên sẽ xây.

• Biết đặt hướng (ngang, dọc), khoảng cách giữa các phần tử và đệm bên trong.
• Dùng chế độ Hug và Fill hợp lý để nút, thẻ, danh sách tự thích ứng.
• Lồng Auto Layout nhiều tầng để tạo cả màn hình hoàn chỉnh.

Bài tập kiểm tra: dựng một thẻ sản phẩm sao cho khi tên sản phẩm dài gấp ba lần, thẻ vẫn gọn gàng không vỡ bố cục.

2. Components và Variants

Component là thành phần dùng lại nhiều lần; Variants gom các trạng thái của nó vào một chỗ. Một nút bấm thường có các biến thể: chính, phụ, bị vô hiệu hóa, đang tải; kèm các kích cỡ lớn, vừa, nhỏ.

1. Tạo component từ các phần tử đã dùng Auto Layout.
2. Thêm thuộc tính (properties) để bật tắt biểu tượng, đổi nhãn chữ.
3. Đặt tên theo quy ước rõ ràng để cả đội dễ tìm.

Ví dụ minh họa: khi đội sản phẩm quyết định đổi bo góc từ 8 pixel sang 12 pixel, người làm component tốt chỉ sửa một chỗ và toàn bộ hàng trăm nút cập nhật theo. Người không dùng component phải sửa tay từng nút.

3. Styles và Variables

Màu sắc, chữ, khoảng cách nên được định nghĩa thành biến thay vì nhập tay mỗi lần. Variables còn cho phép tạo chế độ sáng và tối, hoặc đổi ngôn ngữ trong prototype. Khi làm việc nhóm, đây là cách giữ tính nhất quán và rút ngắn thời gian rà soát.

4. Prototype và kiểm thử

Prototype biến màn hình tĩnh thành trải nghiệm có thể bấm. Bạn cần biết:

• Tạo liên kết giữa các màn hình, chọn kiểu chuyển cảnh phù hợp.
• Dùng Smart Animate cho chuyển động mượt giữa hai trạng thái.
• Thiết lập luồng người dùng để đưa cho người thử nghiệm thao tác độc lập.

Hãy làm quen với việc đưa prototype cho 3 đến 5 người dùng thử và quan sát. Quy trình này liên hệ trực tiếp với tư duy trong bài UI/UX là gì.

5. Bàn giao cho lập trình viên

Thiết kế đẹp nhưng bàn giao rối sẽ làm sản phẩm lệch thiết kế. Những việc cần làm:

1. Sắp xếp frame theo trang, đặt tên lớp có ý nghĩa.
2. Đánh dấu các màn hình sẵn sàng để lập trình ở Dev Mode.
3. Ghi chú trạng thái đặc biệt: lỗi, rỗng, đang tải, màn hình nhỏ.
4. Xuất tài nguyên (icon, hình) đúng định dạng và tỷ lệ.

Hiểu cơ bản về HTML và CSS sẽ giúp bạn nói chuyện với lập trình viên dễ hơn nhiều, nên một người thiết kế có nền tảng lập trình nhẹ luôn có lợi thế.

6. Kỹ năng mềm đi kèm công cụ

• Trình bày thiết kế: nêu được lý do cho từng quyết định.
• Nhận phản hồi: tách ý kiến cá nhân với dữ liệu người dùng.
• Làm việc với tài liệu yêu cầu và trao đổi cùng quản lý sản phẩm.
• Xây portfolio có quy trình, không chỉ ảnh màn hình cuối. Xem thêm bài xây portfolio xin việc trái ngành.

Bắt đầu từ đâu

Hãy tự đặt cho mình một dự án nhỏ trong ba tuần: tuần một dựng thư viện component và biến màu chữ; tuần hai thiết kế 6 đến 8 màn hình cho một ứng dụng; tuần ba làm prototype, kiểm thử với vài người và hoàn thiện bàn giao. Đây cũng là cấu trúc mà khóa UI/UX với Figma từ cơ bản sử dụng, có giảng viên chữa bài từng bước. Nếu bạn muốn mở rộng sang thiết kế thương hiệu, hãy tham khảo quy trình thiết kế bộ nhận diện thương hiệu, và xem toàn bộ hướng học trong chuyên mục khóa học Thiết kế.