GeekyAnts vừa ra mắt một plugin dựa trên React-Fiber cho phép các nhà phát triển đưa trực tiếp các component React đang chạy vào các file Figma có thể chỉnh sửa, hứa hẹn một quy trình khép kín (round-trip) thực sự giữa mã nguồn và thiết kế. Công cụ này giải quyết vấn đề "sai lệch giữa thiết kế và mã nguồn" (design-code drift) đang ngày càng gia tăng, thứ vốn buộc các nhóm phải làm lại công việc mỗi khi các thay đổi về UI vượt qua ranh giới giữa nhà thiết kế và nhà phát triển.

Tại sao cách tiếp cận ưu tiên DOM cũ lại bộc lộ hạn chế

Các công cụ import truyền thống thường quét Document Object Model (DOM) HTML đã được render – danh sách phẳng các thẻ <div, <span và các thẻ khác của trình duyệt. DOM cho công cụ biết rằng một nút bấm tồn tại, nhưng nó không thể thấy được rằng nút bấm đó là một thực thể (instance) của một component dùng chung trong một hệ thống thiết kế (design system). Nếu export mười nút bấm, bạn sẽ nhận được mười lớp (layer) độc lập trong Figma, mỗi lớp đều tách rời khỏi component gốc (master component). Sau đó, các nhà thiết kế phải tạo lại các biến thể (variants), áp dụng lại các ràng buộc (constraints) và về cơ bản là phải xây dựng lại những gì mà mã nguồn đã có sẵn.

Sự mất mát về tính thông minh của component này tạo ra nợ thiết kế (design debt). Mỗi khi một phần tử UI được tinh chỉnh trong mã nguồn, file Figma tương ứng phải được cập nhật thủ công, nếu không hai bản biểu diễn sẽ trở nên khác biệt. Sự sai lệch này làm tăng chi phí bảo trì.

React Fiber là mắt xích còn thiếu

React Fiber là công cụ hòa giải (reconciliation engine) nội bộ giúp theo dõi tên component, phân cấp và trạng thái qua các lần render. Không giống như DOM, Fiber bảo toàn ý nghĩa ngữ nghĩa (semantic meaning) của từng phần tử UI. Bằng cách đọc cây Fiber thay vì đầu ra HTML, một công cụ có thể ánh xạ trực tiếp một component <Button> tới một component Figma, giữ nguyên mối liên kết với design token gốc.

Plugin của GeekyAnts tận dụng hiểu biết này. Nó đọc React Fiber để đưa mã nguồn đang chạy vào các file Figma có thể chỉnh sửa. Kết quả là một tập hợp các lớp vẫn giữ nguyên các mối quan hệ biến thể ban đầu của chúng.

Quy trình hoạt động như thế nào

Quá trình import tuân theo ba giai đoạn riêng biệt:

  • Variant Expander (Bộ mở rộng biến thể) – Quét mã nguồn component để tìm các định nghĩa trạng thái (hover, disabled, active) và tạo ra một bộ đầy đủ các biến thể hình ảnh. Chúng được đóng gói thành các Figma Component Sets, giúp nhà thiết kế có thể chuyển đổi các trạng thái mà không cần rời khỏi file.
  • Layout Mapping (Ánh xạ bố cục) – Chuyển đổi các quy tắc CSS Flexbox thành các ràng buộc Figma Auto Layout. Điều này giúp bảo toàn hành vi đáp ứng (responsive) và cho phép các nhà thiết kế điều chỉnh khoảng cách trực tiếp trong trình chỉnh sửa UI.
  • State Triggering (Kích hoạt trạng thái) – Thực thi các luồng mã để mở các modal, dropdown hoặc các phần tử UI động khác, đảm bảo plugin nắm bắt được mọi chế độ xem có thể.

Tổng hợp các giai đoạn này tạo ra một bản sao trung thực, có thể chỉnh sửa của UI đang chạy, chứ không phải là một ảnh chụp màn hình tĩnh.

Hệ sinh thái đang hình thành

GeekyAnts không phải là đơn vị duy nhất cố gắng khép kín vòng lặp thiết kế-mã nguồn:

  • Anima tập trung vào hướng ngược lại, chuyển đổi các thiết kế Figma thành mã React hoặc Vue.
  • Locofy.ai bổ sung khả năng tạo mã responsive bằng AI từ các file thiết kế.
  • Builder.io cung cấp tính năng import HTML-to-Figma nhưng vẫn dựa trên DOM, do đó vẫn kế thừa những hạn chế của nó.
  • Codia AI chuyển đổi các phần tử web thành các file Figma có cấu trúc.

Điều làm cho cách tiếp cận dựa trên Fiber trở nên khác biệt là khả năng nhận biết ngữ nghĩa của component, điều mà các công cụ tập trung vào DOM còn thiếu.

Ai thắng, ai thua

Một cách tiếp cận tự động tôn trọng các component sẽ giúp giảm thiểu nợ thiết kế.

Điều cần theo dõi tiếp theo

Lời hứa cốt lõi rất rõ ràng: bằng cách chuyển trọng tâm import từ DOM sang React Fiber, các công cụ như plugin của GeekyAnts cung cấp cho các nhà thiết kế một chế độ xem UI thực tế (production UI) có tính nhận biết component. Sự chuyển dịch đó cuối cùng có thể xóa bỏ khoảng cách lâu đời giữa thiết kế và mã nguồn, biến quá trình bàn giao vốn tốn kém và dễ sai sót trước đây thành một quy trình làm việc hai chiều mượt mà.