GeekyAntsは、開発者がライブのReactコンポーネントを編集可能なFigmaファイルに直接取り込める、React-Fiberベースのプラグインを発表しました。これにより、コードとデザインの間の真のラウンドトリップ（双方向連携）が実現します。このツールは、UIの変更がデザイナーと開発者の境界を越えるたびに作業のやり直しを強いる、深刻化する「デザインとコードの乖離（design-code drift）」という課題に対処するものです。

従来のDOM優先アプローチが不十分な理由

従来のインポートツールは、レンダリングされたHTML Document Object Model (DOM) — つまり、ブラウザ上の<div>、<span>、その他のタグのフラットなリスト — をスクレイピングします。DOMはツールに対して「ボタンが存在する」ことは伝えられますが、そのボタンがデザインシステム内の共有コンポーネントのインスタンスであることまでは認識できません。10個のボタンをエクスポートすると、Figma上には10個の独立したレイヤーが生成され、それぞれがマスターコンポーネントから切り離されてしまいます。その結果、デザイナーはバリアントを再作成し、制約（constraints）を再適用し、実質的にコードがすでに把握している内容をゼロから構築し直さなければなりません。

このようなコンポーネント情報の欠落は、デザイン負債（design debt）を生み出します。コード内でUI要素が微調整されるたびに、対応するFigmaファイルをマニュアルで更新するか、さもなければ2つの表現が乖離してしまいます。この乖離がメンテナンスコストを押し上げる原因となります。

ミッシングリンクとしてのReact Fiber

React Fiberは、レンダリングをまたいでコンポーネント名、階層、状態を追跡する内部の再構築（reconciliation）エンジンです。DOMとは異なり、Fiberは各UI要素のセマンティックな意味を保持します。HTMLの出力ではなくFiberツリーを読み取ることで、ツールは<Button>コンポーネントをFigmaコンポーネントに直接マッピングでき、元のデザイントークンとのリンクを維持したままにできます。

GeekyAntsのプラグインはこの知見を活用しています。React Fiberを読み取ることで、ライブコードを編集可能なFigmaファイルへと持ち込みます。その結果、元のバリアント関係を保持したレイヤーセットが得られます。

パイプラインの仕組み

インポートプロセスは、以下の3つの明確なフェーズに従います。

  • Variant Expander（バリアント拡張） – コンポーネントコードをスキャンして状態定義（hover、disabled、active）を特定し、完全なビジュアルバリアントのセットを生成します。これらはFigmaのComponent Setsにまとめられるため、デザイナーはファイルから離れることなく状態を切り替えることができます。
  • Layout Mapping（レイアウトマッピング） – CSS FlexboxのルールをFigmaのAuto Layoutの制約に変換します。これにより、レスポンシブな挙動が維持され、デザイナーはUIエディタ上で直接スペーシングを調整できるようになります。
  • State Triggering（状態トリガー） – モーダル、ドロップダウン、その他の動的なUI要素を開くコードパスを実行し、プラグインがあらゆる可能なビューを確実にキャプチャできるようにします。

これらのフェーズが組み合わさることで、静的なスクリーンショットではなく、ライブUIの忠実で編集可能なレプリカが生成されます。

台頭するエコシステム

デザインとコードのループを閉じようとしているのは、GeekyAntsだけではありません。

  • Anima は逆方向のアプローチに焦点を当てており、FigmaのデザインをReactやVueのコードに変換します。
  • Locofy.ai は、デザインファイルからレスポンシブなコードをAI駆動で生成する機能を提供しています。
  • Builder.io はHTMLからFigmaへのインポートを提供していますが、依然としてDOMに依存しているため、その制限を引き継いでいます。
  • Codia AI は、ウェブ要素を構造化されたFigmaファイルに変換します。

Fiberベースのアプローチを際立たせているのは、DOM中心のツールには欠けている「コンポーネントのセマンティクス（意味論）」を認識している点です。

勝者と敗者

コンポーネントを尊重する自動化されたアプローチは、デザイン負債を軽減します。

今後の注目点

核心となる約束は明確です。インポートの焦点をDOMからReact Fiberへと移すことで、GeekyAntsのプラグインのようなツールは、デザイナーに対して本番環境のUIをコンポーネントを意識したライブな視点で見せてくれます。この転換により、長年の課題であったデザインとコードのギャップがついに解消され、かつてはコストがかかりミスも起きやすかったハンドオフ（引き継ぎ）が、スムーズな双方向のワークフローへと変わる可能性があります。