Handoff thiết kế: Đừng chỉ ném cái link Figma rồi bỏ chạy

Chapter 01: Cái bẫy của sự "tiện tay"

Mình nhớ hồi mới vào nghề, quy trình handoff (bàn giao thiết kế) của mình gói gọn trong đúng ba thao tác: Copy link Figma - Paste vào khung chat - Bấm Send. "Anh ơi, em xong UI rồi nhé, anh xem thế nào rồi vào việc luôn đi".

Xong, nhẹ nợ!

Mình từng nghĩ thế là ngầu, là nhanh gọn lẹ. Mình vẽ đẹp mà, nút nào ra nút nấy, layer sắp xếp cũng gọi là có tí gọn gàng, anh em dev nhìn vào chắc chắn sẽ hiểu. Cái thói quen "tiện tay" ấy cứ theo mình qua vài dự án nhỏ, cho đến khi mình thực sự va phải một bài toán lớn, nơi mà sự cẩu thả bị trả giá bằng thời gian và vô số những cuộc gọi, tin nhắn của sếp lúc nửa đêm.

Chapter 02: Buổi chiều sóng gió và tin nhắn của anh Dev

Mọi chuyện "toang" khi mình nhận dự án OneSource. Đây không phải là một cái landing page bình thường, nó là một hệ thống CMS khổng lồ phục vụ điều phối học liệu, với cả mớ logic chằng chịt về Authoring, Test Bank, Word Bank, Learning Item, Multimedia và hàng chục trạng thái dữ liệu. Nhưng ngựa quen đường cũ, mình vẫn dùng bài cũ: thả nhẹ cái link Figma vào group chat.

Và rồi một buổi chiều đẹp trời, màn hình Google Chat của mình nhảy thông báo liên tục với cả tá @Designer đập vào mặt.

"Chú ơi, cái nút 'Upload' này bấm vào thì logic check trạng thái thế nào?"

"Cái đoạn Structure Setting này nó map với Edit Textbook ra sao? Anh đọc file Spec của khách Nhật mà không hình dung ra đoạn em vẽ trên UI?"

…

Nhìn đến đó là mình biết sắp rắc rối to rồi.

Việc quăng một cái link Figma trơ trọi cho dev đối với một hệ thống phức tạp giống hệt như việc bạn đưa cho thợ xây một bức ảnh chụp bên ngoài ngôi biệt thự và bảo "Anh xây y chang vầy cho tôi", mà không hề đưa cho họ bản vẽ kết cấu điện nước hay móng nhà. Họ chỉ thấy cái vỏ, còn bên trong dòng chảy dữ liệu vận hành ra sao thì... mù tịt.

Chapter 03: Tỉnh mộng - UI đẹp không bằng UI "biết nói"

Mình nhận ra giao diện có đẹp đến mấy mà không "biết nói" thì cũng vứt. Chẳng ai rảnh để đi đoán mò ý đồ của designer, nhất là khi deadline đang dí sát nút. Thế là mình lóc cóc mò vào Figma, bắt đầu một công việc tốn sức hơn cả lúc vẽ: gỡ rối bằng các dòng ghi chú.

Tại mọi vị trí có phát sinh tương tác phức tạp, mình đều để lại chỉ dẫn. "Nút này click vào thì check cơ chế Safety Gate, nếu dữ liệu chưa đồng bộ thì xám đi", "Trạng thái này lấy từ logic Edition Group ra"... Từ một bản thiết kế chỉ toàn hình khối vô tri, workspace của mình bắt đầu dày đặc những dòng chú thích giải thích cặn kẽ hành vi của hệ thống.

Chapter 04: Cú "hack" năng suất với Redmine và Spec

Ghi chú thôi chưa đủ đô. Mình quan sát thấy team dev vẫn phải chật vật mở Figma ở một màn hình, rồi lật tung Redmine (Dự án này khách hàng Nhật dùng Redmine để quản lý tiến độ) ở màn hình bên kia để dò tìm ticket tương ứng. Đôi khi họ đọc nhầm ticket, thế là code sai bét luồng.

Mình chợt nảy ra một ý: Sao không mang tất cả vào một chỗ?

Thế là ở mỗi cụm màn hình hoặc component cốt lõi, mình nhúng trực tiếp đường link tài liệu đặc tả (Spec) và mã ticket Redmine của khách hàng vào thẳng giao diện Figma. Việc này giống như gửi địa chỉ cho anh shipper vậy. Thay vì nói chung chung "Nhà em ở ngõ 45, anh tự vào hỏi chị kế toán nhé", mình thả luôn cái pin Google Maps chính xác đến từng centimet trước cửa nhà. Anh em dev bây giờ chỉ việc click vào link trên Figma là bay thẳng sang đúng trang Spec cần đọc, đúng cái ticket cần xử lý. Khỏi cần tìm kiếm, khỏi đoán mò.

Chapter 05: Nghệ thuật Handoff - Làm ơn hãy nghĩ cho người đến sau

Kết quả ngọt ngào ngoài sức tưởng tượng. Các buổi họp "chất vấn" giảm hẳn, các luồng logic phức tạp được code mượt mà hơn và quan trọng nhất là team không còn ném vào mặt nhau những cái nhìn ái ngại mỗi khi review chéo.

Qua dự án đó, mình lại rút ra được một bài học: Handoff chưa bao giờ chỉ là câu chuyện của những layer và pixel. Nó là sự thấu cảm, là việc bạn đặt mình vào vị trí của người sẽ tiếp nhận "đứa con tinh thần" của mình để dọn sẵn đường cho họ. Không cần đợi đến một dự án lớn mới bắt đầu làm việc này. Chỉ cần bớt chút thời gian "tiện tay", chậm lại một nhịp để thêm vài dòng note, gắn vài cái link, bạn sẽ thấy mình không chỉ đang làm UI/UX cho người dùng cuối, mà còn đang làm UX cho chính những người đồng nghiệp ngồi ngay cạnh mình.