Hướng Dẫn Thiết Kế Giao Diện Để Developer Dễ Dàng Xử Lý (Chuẩn Handoff UI)

Trong quá trình phát triển sản phẩm số (app, web, hệ thống nội bộ…), sự phối hợp giữa designer và developer là yếu tố then chốt để đảm bảo sản phẩm cuối cùng đúng thiết kế, chuẩn pixel và tiết kiệm thời gian. Dưới đây là hướng dẫn chi tiết giúp bạn thiết kế giao diện UI dễ triển khai cho lập trình viên, chuẩn handoff từ đầu đến cuối.

1. Thiết kế dựa trên hệ thống – Design System

Thay vì thiết kế từng màn hình một cách rời rạc, bạn cần xây dựng trước một hệ thống gồm:

• Typography: định nghĩa font, cỡ chữ, line height, letter spacing cho từng kiểu chữ (H1, H2, Body, Caption…)

• Color palette: bảng màu chính, phụ, màu nền, màu chữ, màu border…

• Spacing system: hệ thống khoảng cách (4–8–16–24–32… px) để developer dễ quy đổi sang rem/em.

• Component library: các thành phần tái sử dụng (button, input, dropdown, modal…)

👉 Sử dụng Auto Layout + Component + Variants trong Figma để tạo hệ thống UI dễ maintain và dễ đọc với developer.

2. Lưới – Grid System rõ ràng

• Sử dụng grid layout 12 cột (với các breakpoint như desktop, tablet, mobile).

• Đặt rõ gutter (khoảng cách giữa các cột), margin trái/phải để dev căn lề chuẩn.

• Ví dụ phổ biến:

  • Desktop: 12 cột, 1140px hoặc 1440px chiều rộng

  • Tablet: 8 cột

  • Mobile: 4 cột

📌 Tip: Figma cho phép bạn đặt layout grid riêng cho mỗi frame, hãy sử dụng thường xuyên.

3. Rõ ràng về khoảng cách và kích thước

• Căn chỉnh pixel-perfect: mọi thành phần nên nằm trên lưới, tránh vị trí lệch 1–2 px.

• Khoảng cách giữa các phần tử nên theo hệ thống (8px, 16px…), không tuỳ tiện.

• Với padding của button/input, dùng số chẵn và hợp lý (VD: 12px vertical / 24px horizontal).

💡 Dev rất sợ các thiết kế “nửa vời” như margin 17px, padding 23px, vì rất khó lập trình.

4. Sử dụng Component và Variants thay vì thiết kế rời

• Tạo 1 component cho mỗi UI element: Button, Input, Card, Badge…

• Dùng Variants để phân loại: Primary / Secondary / Disabled / Hover…

• Gắn Auto Layout để dev biết được logic co giãn và căn giữa.

5. Gắn tên lớp rõ ràng và tổ chức frame hợp lý

• Tên Frame/Component nên theo chuẩn BEM hoặc CamelCase:

  • ✅ Button/Primary/Default

  • ❌ btn123456-copy

• Group các màn hình theo flow hoặc feature (ví dụ: Onboarding, Dashboard, Settings…).

• Nếu dùng Figma, nên có page riêng cho:

  • Components

  • Design System

  • Screens

  • Prototypes

6. Thống nhất trạng thái UI

Developer sẽ hỏi bạn:

• Khi hover thì sao?

• Khi lỗi input hiện gì?

• Khi submit loading thì như thế nào?

• Khi empty state thì trang có hiện gì không?

👉 Hãy thiết kế đầy đủ các UI state:

• Normal

• Hover

• Active

• Focused

• Disabled

• Error

• Loading

• Empty

📌 Tip: Với form, table hoặc card, đừng chỉ thiết kế “normal”, hãy thiết kế thêm cả trạng thái đặc biệt.

7. Thiết kế logic thay đổi theo dữ liệu

• Giao diện bạn thiết kế cần phản ánh logic dữ liệu thực tế.

• Ví dụ:

  • Danh sách có thể trống → thiết kế empty state.

  • Bảng có thể có 1 hàng, 10 hàng, hoặc phân trang → hiển thị pagination.

  • Tiêu đề có thể dài 1 dòng hoặc 3 dòng → thiết kế responsive cho tiêu đề.

❌ Tránh thiết kế “tĩnh”, demo chỉ để đẹp, không phù hợp khi dev làm data thật.

8. Responsive design – Thiết kế đa thiết bị

• Thiết kế ít nhất 3 phiên bản: Desktop (1440px, 1920px…), Tablet (768px), Mobile (375px).

• Giữ cấu trúc layout tương đương: cùng tiêu đề, cùng hierarchy, nhưng điều chỉnh spacing và font size phù hợp.

📌 Figma hỗ trợ tính năng “Breakpoints” trong Auto Layout để bạn xem trước responsive nhanh chóng.

9. Document kỹ – Handoff chuẩn

• Ghi rõ thông số trong Figma: padding, font, màu, size…

• Gắn style guide và design tokens vào mỗi component để dev biết lấy ở đâu.

• Sử dụng plugin như:

  • Figma Inspect (mặc định)

  • Zeplin, Avocode, hoặc Anima nếu team dev yêu cầu

📌 Tip: Hãy thêm ghi chú (Annotation) cho logic nếu cần.

10. Giao tiếp với Dev ngay từ đầu

• Thiết kế không phải xong rồi mới đưa dev, mà nên:

  • Hỏi trước về giới hạn tech (ví dụ: component đã có sẵn, framework nào, responsive auto hay manual…)

  • Kiểm tra lại thiết kế bằng mắt của dev (họ có thể phát hiện lỗi nhỏ không nhìn ra)

  • Luôn gửi bản preview sớm để cả team feedback

✅  Tổng Kết: Checklist trước khi handoff cho Dev