Sửa một màn hình trên Figma mất vài phút bằng cách kéo lại vị trí, đổi màu hay viết lại một dòng chữ. Sửa cùng thay đổi đó sau khi đã lập trình xong có thể mất vài ngày, vì phải đụng đến cả giao diện lẫn logic đã cắm sẵn. Đây là lý do tại Webix, không dòng code nào được viết trước khi khách hàng duyệt thiết kế Figma. Bài viết này giải thích prototype, hệ thống thiết kế và vòng duyệt hoạt động thế nào, cách kiểm tra một bản thiết kế trước khi duyệt, và vì sao bước này giúp tránh phát sinh chi phí giữa dự án.
Prototype: nhìn thấy sản phẩm trước khi nó tồn tại
Prototype trên Figma không phải là hình ảnh tĩnh mà là bản mô phỏng có thể bấm thử gần giống app hoặc website thật: bấm vào nút để chuyển màn hình, mở menu, xem luồng đặt lịch hoặc thanh toán diễn ra từng bước ra sao. Nhờ bấm thử được, những chỗ khó hiểu, thiếu bước hoặc luồng thao tác vòng vo sẽ lộ ra ngay ở giai đoạn thiết kế — lúc chi phí sửa gần như bằng không, vì chưa có một dòng code nào cần viết lại.
So với việc mô tả bằng lời hoặc tài liệu văn bản, prototype giúp cả hai bên — khách hàng và đội thiết kế — nói cùng một ngôn ngữ: nhìn vào màn hình cụ thể thay vì tưởng tượng qua chữ viết. Đây cũng là công cụ hữu ích khi cần lấy ý kiến từ nhiều người trong nội bộ doanh nghiệp trước khi chốt phương án.
Hệ thống thiết kế (design system)
Một hệ thống thiết kế gồm bộ màu sắc, font chữ, khoảng cách, các thành phần dùng lại (nút bấm, ô nhập, thẻ sản phẩm, thanh điều hướng) được định nghĩa nhất quán ngay từ đầu dự án. Thay vì thiết kế từng màn hình riêng lẻ, đội thiết kế dựng các thành phần này một lần rồi lắp ráp vào từng trang, đảm bảo giao diện đồng nhất xuyên suốt toàn bộ website hoặc app.
Lợi ích của hệ thống thiết kế không chỉ nằm ở tính thẩm mỹ đồng nhất. Khi cần thêm một màn hình mới hoặc mở rộng tính năng sau này, đội thiết kế và lập trình có sẵn các thành phần để tái sử dụng, rút ngắn đáng kể thời gian thực hiện so với thiết kế lại từ đầu mỗi lần.
Vòng duyệt thiết kế diễn ra thế nào
Quy trình duyệt thiết kế thường trải qua vài vòng góp ý trước khi chốt bản cuối, thay vì chỉ gửi một lần rồi chuyển thẳng sang lập trình.
- Phác thảo cấu trúc (wireframe): bố cục tổng thể của từng trang, chưa có màu sắc hay hình ảnh chi tiết, để thống nhất luồng thông tin trước.
- Thiết kế giao diện chi tiết: áp dụng màu sắc, font, hình ảnh theo nhận diện thương hiệu lên từng màn hình.
- Dựng prototype bấm thử: liên kết các màn hình thành luồng thao tác hoàn chỉnh để khách hàng trải nghiệm như sản phẩm thật.
- Khách hàng góp ý theo từng vòng, đội thiết kế chỉnh sửa và gửi lại bản cập nhật.
- Chốt bản thiết kế cuối cùng — đây là bản làm căn cứ để lập trình và cũng là căn cứ nghiệm thu sau này.
Ai nên tham gia vòng duyệt thiết kế
Một sai lầm phổ biến là chỉ để một người duyệt thiết kế thay mặt cả doanh nghiệp, để rồi phát hiện đồng nghiệp khác có ý kiến khác sau khi đã lập trình xong. Nên mời đúng những người sẽ trực tiếp dùng hoặc quản lý sản phẩm tham gia góp ý ngay từ vòng đầu: người phụ trách nội dung, người trực tiếp nhận đơn hoặc chăm sóc khách hàng, và người ra quyết định cuối cùng về ngân sách. Càng nhiều vòng góp ý rời rạc sau khi đã chốt phương án, càng dễ phát sinh chi phí và kéo dài thời gian dự án.
Những gì cần kiểm tra khi duyệt thiết kế
Duyệt thiết kế không chỉ là xem “đẹp hay chưa đẹp”. Một số điểm quan trọng cần rà soát kỹ trước khi chốt:
- Đầy đủ trang và trạng thái: có thiếu màn hình nào không, kể cả các trạng thái ít gặp như giỏ hàng trống, không có kết quả tìm kiếm, hoặc báo lỗi.
- Luồng thao tác chính có hợp lý không: đặt lịch, thanh toán, liên hệ có đủ bước và dễ hiểu khi bấm thử trên prototype.
- Nội dung mẫu có sát thực tế không: dùng chữ và số liệu gần giống nội dung thật, tránh chữ giả (lorem ipsum) khiến khó hình dung sản phẩm cuối.
- Khả năng hiển thị trên điện thoại: kiểm tra riêng bản thiết kế cho màn hình nhỏ, không chỉ xem bản máy tính rồi suy luận.
- Các nút gọi hành động (CTA) có nổi bật và nhất quán vị trí giữa các trang không.
- Đúng với nhận diện thương hiệu: logo, màu sắc, font chữ có khớp với các tài liệu thương hiệu hiện có của doanh nghiệp.
Vì sao bước này giúp tránh phát sinh chi phí
Khi thiết kế được duyệt kỹ trước khi lập trình, đội lập trình có một bản đặc tả rõ ràng để làm theo, giảm hẳn tình trạng vừa code vừa đoán ý khách hàng — nguyên nhân phổ biến nhất dẫn đến làm đi làm lại. Ngược lại, nếu bỏ qua bước duyệt Figma và code trực tiếp theo mô tả miệng, mỗi lần khách hàng muốn đổi bố cục, đổi luồng thao tác sau khi đã có giao diện chạy thật đều kéo theo việc sửa cả phần logic đã gắn vào giao diện đó, tốn thời gian và ngân sách hơn nhiều so với sửa trên Figma.
Bản thiết kế đã duyệt còn là căn cứ để hai bên đối chiếu khi nghiệm thu: sản phẩm bàn giao cuối cùng cần khớp với thiết kế đã chốt, tránh tranh cãi về việc “có đúng như thoả thuận ban đầu hay không”.
Thiết kế Figma giúp kiểm soát ngân sách ra sao
Với dự án tính giá trọn gói theo phạm vi công việc (scope), bản thiết kế đã duyệt là căn cứ để xác định chính xác phạm vi đó gồm những gì: bao nhiêu màn hình, bao nhiêu luồng thao tác, những trạng thái nào cần xử lý. Nếu sau khi duyệt thiết kế khách hàng muốn thêm một trang mới hoặc thay đổi lớn về luồng thao tác, đây là thay đổi phạm vi (scope) rõ ràng, dễ trao đổi về chi phí phát sinh (nếu có) ngay từ đầu — thay vì tranh cãi mơ hồ về việc “có nằm trong thoả thuận ban đầu hay không” khi dự án đã đi được nửa chặng đường lập trình.
Ngược lại, những dự án bỏ qua bước duyệt thiết kế kỹ và lập trình song song với việc chỉnh sửa ý tưởng thường khó ước tính phạm vi chính xác ngay từ đầu, dẫn đến tình trạng báo giá ban đầu thấp nhưng phát sinh liên tục trong quá trình làm — không phải vì đơn vị thực hiện cố tình, mà vì phạm vi công việc thực tế chưa từng được xác định rõ ràng bằng hình ảnh cụ thể.
Bàn giao cho lập trình viên
Sau khi thiết kế được duyệt, file Figma không chỉ là hình ảnh tham khảo mà còn chứa thông số kỹ thuật lập trình viên cần: khoảng cách chính xác giữa các phần tử, mã màu, kích thước font, thuộc tính của từng thành phần trong hệ thống thiết kế. Đây cũng là lúc khách hàng nên chắc chắn file Figma thuộc quyền sở hữu của mình, dùng lại được khi mở rộng tính năng hoặc khi đổi đội ngũ phát triển — nội dung này được nói kỹ hơn ở bài bàn giao dự án cần nhận những gì nếu bạn quan tâm đến toàn bộ những gì nên nhận khi dự án hoàn tất.
Thiết kế được duyệt là lời hứa rõ ràng nhất giữa khách hàng và đội ngũ phát triển — và là cách rẻ nhất để tránh phát sinh chi phí giữa chừng.
Bước tiếp theo
Tại Webix, các dự án thiết kế website và ứng dụng di động đều được duyệt giao diện kỹ trước khi lập trình, các gói có thiết kế riêng còn có prototype Figma bấm thử được. Xem thêm các dự án đã hoàn thiện tại trang dự án hoặc liên hệ để bắt đầu với một buổi tư vấn về thiết kế.
