Có nhiều bản thiết kế na ná nhau, nên làm theo bản nào?

Ai đó gửi cho bạn một liên kết thiết kế, và khi mở ra, bạn thấy cả một cụm màn hình nằm cạnh nhau. Vài màn hình trông gần như giống hệt: một cái có bảng trống, một cái đã có kết quả, cái thứ ba có dòng thông báo phía trên một nút, còn bản cho điện thoại thì nằm tít phía dưới. Trước khi ai đó viết dòng code đầu tiên, cần có người xác định đâu mới là phiên bản cần làm, và việc này đòi hỏi một kiểu chú ý khác hẳn lúc bắt tay vào làm.

Agent lập trình, tức một trợ lý AI có thể đọc và sửa code, có thể bắt đầu làm trang khi chưa chọn được màn hình cần theo, rồi lấy nút ở màn hình này và dòng thông báo ở màn hình kia. Từng mảnh đều có chỗ trong tệp thiết kế, nhưng trang ghép lại thì chẳng khớp với phiên bản nào trong đó.

Mình tạo ra Figma Lens để agent trả lời câu hỏi đó trước tiên. Figma là nơi các nhóm sắp xếp và chia sẻ thiết kế giao diện, còn Figma Lens giúp agent xem tổng quan một tệp Figma, chọn ra một màn hình, xem kỹ từng phần của màn hình đó ở kích thước đủ rõ, rồi giữ nó làm bản tham chiếu để kiểm tra trang sau khi làm xong. Chuyện này cũng giống nấu ăn theo một công thức nằm rải rác trên nhiều tờ giấy: trước khi đong nguyên liệu, bạn cần biết mình đang nấu theo phiên bản nào, vì một dòng ghi chú của phiên bản khác có thể đọc rất rõ mà vẫn khiến món ăn ra khác hẳn dự định.

Khi agent mở thiết kế trang tổng quan

Để giải thích quy trình, mình dùng một trang tổng quan (dashboard) tuyển dụng trước đây của Navigos Talent One. Trang này thuộc một sản phẩm do cả nhóm làm ra, mình chỉ mượn thiết kế của nó để minh hoạ các bước. Trang tập hợp các thẻ tóm tắt số liệu, một biểu đồ và bảng vị trí đang tuyển, nên nhìn toàn trang trước giúp xác định từng phần nằm ở đâu, rồi chọn vùng nội dung của trang để mọi bước kiểm tra phía sau cùng dựa vào một bản tham chiếu chung.

Khi đã chọn được màn hình, việc đặt câu hỏi về yêu cầu dễ hơn nhiều: phần nào sẽ thay đổi, phần nào cần giữ nguyên, và yêu cầu đang nói về cái bảng hay bộ điều khiển phía trên nó. Với mỗi câu hỏi, agent giờ có một chỗ cụ thể để tìm câu trả lời, thay vì cả một tệp toàn những màn hình na ná nhau.

Khi cần xem kỹ biểu đồ và bảng

Nhìn từ xa, trang đã chọn cho thấy bố cục, nhưng các nhãn nhỏ thì lẫn vào hình dạng của biểu đồ, và phóng lớn tấm ảnh nhỏ ấy sau này cũng không khôi phục được chi tiết vốn chưa có trong ảnh. Figma Lens có thể lấy riêng biểu đồ ở kích thước đủ dùng, nhờ vậy phần chú giải và bộ chọn thời gian đọc được rõ ràng.

Nhìn gần bảng tin tuyển dụng lại thấy một loạt quyết định khác: tiêu đề cần đủ chỗ để hiển thị, mỗi con số mang một ý nghĩa riêng, còn ngày hết hạn nên nằm ở cột riêng. Đây đều là những chi tiết bình thường, nhưng rất dễ bị bỏ sót khi cả màn hình bị xem như một bức ảnh duy nhất. Cho từng phần đủ chỗ để nhìn rõ giúp agent làm theo những gì thực sự thấy được, thay vì lấp chỗ trống bằng thứ chỉ có vẻ hợp lý.

Khi trang đã làm xong và chạy trên trình duyệt

Mình muốn màn hình đã chọn vẫn có ích sau khi viết xong code, vì ngoài việc làm điểm khởi đầu, nó còn giúp kiểm tra kết quả. Ở bước này có hai việc riêng: chữ trên trang có giống thiết kế đã chọn không, và trang khi chạy có hiển thị đúng không. Hai việc này bắt những lỗi khác nhau, vì một nút có thể đúng nhãn mà khoảng cách vẫn lệch, còn một trang tổng quan trông gọn gàng vẫn có thể chứa con số lấy từ trạng thái khác.

Figma Lens có sẵn bước kiểm tra nội dung chữ cho câu hỏi đầu. Với câu hỏi thứ hai, agent cần mở ứng dụng, xem trang hiển thị ra sao rồi so với bản tham chiếu. Phông chữ cũng thuộc về việc thứ hai này: thiết kế có thể chỉ định một phông mà website chưa từng tải, và khi thay bằng phông khác, chỗ xuống dòng có thể đổi rồi đẩy phần còn lại của trang xuống, vì vậy agent cần kiểm tra lại bố cục trong trình duyệt sau khi làm xong. Bài viết về môi trường làm việc của agent kể cách bản tham chiếu ấy đi theo công việc khi chuyển qua lại giữa các công cụ.

Mình làm Figma Lens ra sao, và bạn có thể bắt đầu từ đâu

Với Figma Lens, mình là người phụ trách chính: mình đặt ra trình tự kiểm tra và những hướng dẫn agent làm theo để chọn màn hình, đọc chi tiết rồi đối chiếu kết quả. Agent lập trình đảm nhận một phần đáng kể việc triển khai công cụ, còn mình kiểm soát các thay đổi trong code, chạy thử quy trình và rà xem agent có làm đúng các bước đã đặt ra hay không, rồi chỉnh lại công cụ hoặc hướng dẫn khi cần.

Nếu bạn là người bàn giao thiết kế, thói quen này cũng cho người nhận liên kết một điểm bắt đầu cụ thể: chỉ đúng màn hình cần làm, nói rõ phần nào quan trọng và giữ bản tham chiếu ấy để dùng khi đánh giá, nhờ vậy họ bớt phải tự đoán những lựa chọn chưa được nói ra.

Thêm về quy trình kiểm tra thiết kế

Figma Lens có thể trả về số đo và kiểu chữ, xuất tài nguyên đã chọn và cung cấp ảnh kết xuất cho từng khu vực. Hướng dẫn chuyển thiết kế thành code mô tả cách chọn một bản thiết kế cụ thể để đối chiếu trước khi triển khai, rồi kiểm tra cả nội dung chữ lẫn cách hiển thị sau đó. Agent cần khả năng xem ảnh và phải thực sự mở những ảnh Figma Lens trả về. Phía ứng dụng đích vẫn cần bảo đảm có tệp phông chữ và quyền sử dụng phông đó.