GeekyAnts 发布了一款基于 React-Fiber 的插件，允许开发者将实时的 React 组件直接导入到可编辑的 Figma 文件中，承诺实现代码与设计之间的真正双向同步。该工具旨在解决日益严重的“设计-代码脱节”（design-code drift）问题，即每当 UI 变更跨越设计师与开发者的边界时，团队不得不重复劳动。

为什么传统的“DOM 优先”方法力不从心

传统的导入工具通过抓取渲染后的 HTML 文档对象模型（DOM）——即浏览器中 <div>、<span> 等标签的扁平列表。DOM 只能告诉工具一个按钮的存在，但无法识别该按钮是设计系统中某个共享组件的实例。如果你导出十个按钮，在 Figma 中就会得到十个独立的图层，每个图层都与母版组件（master component）脱节。设计师随后不得不重新创建变体（variants）、重新应用约束（constraints），本质上是在重建代码中已经存在的信息。

这种组件智能的缺失造成了设计债（design debt）。每当代码中的 UI 元素进行微调时，相应的 Figma 文件必须手动更新，否则两种表示形式就会产生分歧。这种分歧推高了维护成本。

React Fiber：缺失的关键环节

React Fiber 是负责在多次渲染中追踪组件名称、层级结构和状态的内部协调引擎（reconciliation engine）。与 DOM 不同，Fiber 保留了每个 UI 组件的语义含义。通过读取 Fiber 树而非 HTML 输出，工具可以直接将 <Button> 组件映射到 Figma 组件，从而保持与原始设计令牌（design token）的链接。

GeekyAnts 的插件利用了这一洞察。它通过读取 React Fiber 将实时代码引入可编辑的 Figma 文件。其结果是一组保留了原始变体关系的图层。

工作流程原理

导入过程分为三个不同的阶段：

  • 变体扩展器 (Variant Expander) – 扫描组件代码中的状态定义（悬停 hover、禁用 disabled、激活 active），并生成全套视觉变体。这些变体会打包成 Figma 组件集（Component Sets），以便设计师无需离开文件即可切换状态。
  • 布局映射 (Layout Mapping) – 将 CSS Flexbox 规则转换为 Figma Auto Layout 约束。这保留了响应式行为，并允许设计师直接在 UI 编辑器中调整间距。
  • 状态触发 (State Triggering) – 执行打开模态框（modals）、下拉菜单（dropdowns）或其他动态 UI 元素的代码路径，确保插件能够捕获所有可能的视图。

这些阶段共同产生了一个忠实且可编辑的实时 UI 副本，而非静态截图。

新兴的生态系统

GeekyAnts 并不是唯一试图闭合设计-代码环路的企业：

  • Anima 专注于相反的方向，将 Figma 设计转换为 React 或 Vue 代码。
  • Locofy.ai 增加了从设计文件生成响应式代码的 AI 驱动功能。
  • Builder.io 提供 HTML 到 Figma 的导入功能，但仍依赖于 DOM，因此继承了其局限性。
  • Codia AI 将 Web 元素转换为结构化的 Figma 文件。

基于 Fiber 的方法之所以脱颖而出，是因为它具备组件语义感知能力，而以 DOM 为中心的工具则缺乏这一点。

谁是赢家，谁是输家

一种尊重组件的自动化方法可以减少设计债。

值得关注的后续发展

核心承诺非常明确：通过将导入重心从 DOM 转向 React Fiber，像 GeekyAnts 这样的插件为设计师提供了生产环境 UI 的实时、具备组件感知能力的视图。这种转变最终可能会消除设计与代码之间长期存在的鸿沟，将过去昂贵且易错的交付过程转变为流畅的双向工作流。