デザインシステムがあるのに、なぜAIはボタンを作り直すのでしょうか？

Figmaの画面をコーディングエージェントに渡すと、既存コンポーネントを使わず、似たReactとCSSを新たに作ってしまうことがあります。画面はおおむね合っていても、開発者は正しいimportパスとpropを探してコードを修正し直さなければなりません。デザインシステムはあっても、エージェントはその場所を知らないのです。

Coinbaseは、同じデザイン、意図的に曖昧なプロンプト、Sonnet 4.6モデル、実行ごとに初期化した空のコードベースを使い、Code Connectの有無を条件別に3回比較しました。Code Connectありの条件では、平均トークンが11.5%、実装時間が22.3%、費用が22.5%減少し、3回すべてで3指標が改善したと報告しています。

ただし、これは1つのデザインを対象にした小規模な社内評価であり、実行ごとの生データ、分散、統計的検定は公開されていません。すべてのチームが22.5%節約できるという意味ではありません。持ち帰るべき発見は、プロダクションコンポーネントを出発点に置くと、エージェントの検索・推測・作り直しを減らせるという仕組みです。

Code Connectは正しいコードの場所を伝えます

Code ConnectはFigmaコンポーネントとコードベース内の実際のコンポーネントを結び付けます。Figma MCPサーバーがこの接続を読むと、実際のimport、コンポーネント名、現在のデザイン属性値を反映したコードスニペットをエージェントに渡せます。

実装プロセス接続情報がない場合Code Connectがある場合
コンポーネント選択リポジトリを検索するか、似たUIを新規作成マッピング済みのプロダクションコンポーネントから参照
属性変換Figma属性を見てコードAPIを推測定義済みのprop変換を使用
スタイル処理新しいCSSや近似値を作る可能性がある既存コンポーネントとトークンを再利用しやすい
修正作業検索・デバッグ・置き換えが続く可能性がある最初の候補が絞られ、不要な探索が減る

Coinbaseの公開デザインシステムリポジトリには、Web React、React Native、Android Compose、iOS SwiftUIの実装が別パッケージとしてあります。 同じ名前のボタンでもプラットフォームごとにimportパスとAPIが異なる場合があるため、コンポーネント名の一覧より実装そのものを指す接続の方が有用です。

最初の成功は、1つのコンポーネントをInspectに表示することです

最初からCoinbaseのStepperをまねたり、ライブラリ全体を接続したりする必要はありません。Figma属性とプロダクションAPIを直接確認できるButtonを1つ選んで始めましょう。以下の手順のテンプレートは公式構造を基にした入力例であり、Coinbaseが使った実際のマッピングではありません。

現在、Code ConnectはFigma OrganizationまたはEnterpriseプランのFull・Dev seatで提供されています。始める前に、ルートコンポーネントがあるFigmaライブラリ、実際のコンポーネントリポジトリ、Node.js 18以上、Code Connect WriteとFile content Readスコープを設定した個人アクセストークンを用意する必要があります。

  1. CLIをインストールします。 リポジトリのNode.jsバージョンを確認してから、npm install --global @figma/code-connect@latestを実行してください。
  2. 設定ファイルを作成します。 リポジトリルートのfigma.config.jsonに、以下の最小設定を追加します。テンプレートを別の場所に置く場合は、includeパターンをそのパスに合わせて変更してください。 
{
  "codeConnect": {
    "include": ["**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}
  1. ルートコンポーネントURLをコピーします。 Figmaで接続するButtonのルートコンポーネントを右クリックし、Copy link to selectionを選択してください。
  2. Button.figma.tsを作成します。 以下の例のURL、Label・Disabled・SizeというFigma属性名、enum値、Button API、importパスをチームの実際の値に置き換えてください。idもリポジトリ内で重複しない値にします。 
// url=<Copy link to selectionでコピーしたルートコンポーネントURL>
import figma from 'figma'

const instance = figma.selectedInstance
const label = instance.getString('Label')
const disabled = instance.getBoolean('Disabled')
const size = instance.getEnum('Size', {
  Large: 'large',
  Medium: 'medium',
  Small: 'small',
})

export default {
  example: figma.code`
    <Button size={${size}} disabled={${disabled}}>
      ${label}
    </Button>
  `,
  imports: ['import { Button } from "components/Button"'],
  id: 'button',
}
  1. 元コードと照合します。 Figma属性名が正確か、enumの各選択肢が実際のprop値に変換されるか、importパスとデフォルト値が現在のプロダクションコードと一致するかを確認してください。誤った接続は、誤った答えをより速く届けてしまいます。
  2. 認証して公開します。 個人アクセストークンをリポジトリやコマンド履歴に直接書かず、組織のシークレット管理方法でFIGMA_ACCESS_TOKENに読み込んでください。リポジトリルートでnpx figma connect publishを実行します。
  3. レンダリングされたコードスニペットを確認します。 CLIが返したコンポーネントURLを開き、Dev Modeに切り替えてInspectパネルを確認してください。最初の成功基準は、定義したimportと現在のFigma属性値を反映したコードスニペットが表示されることです。

Inspectはマッピング定義を編集する画面ではありません。

Inspectに表示された結果コードスニペットと、Button.figma.tsの元ファイルを並べて比較してください。importやprop値が期待どおりでなければ、テンプレートの属性名・enum変換・コードAPIを修正して再公開します。ここまで成功しても、AIコーディング費用が減ったと判断することはできません。

費用比較は公開成功後の任意のステップです

Code Connectの公開とAIコーディングの比較は別の作業です。比較するには、対応するコーディングクライアントにFigma MCPリモートサーバーを別途接続し、Figmaアカウントで認証する必要があります。クライアント別の設定は、公式のリモートサーバーインストール文書で選択できます。

ベースラインは、Code Connectを公開していない隔離された評価ノードで先に記録してください。運用ライブラリの接続を解除せず、複製ファイルまたは別の評価ノードを使います。接続の前後で、同じデザインリンク、プロンプト、モデル、リポジトリの初期状態、キャッシュ条件を維持する必要があります。

このFigmaデザインを現在のリポジトリに実装してください：<同じFigmaデザインリンク>。リポジトリ内にすでにあるデザインシステムコンポーネントを優先して使用し、実装後にビルドとテストの結果を報告してください。

この依頼文は比較入力の例です。2つの条件で文言を変えず、実行ごとに入力・出力・キャッシュ作成・キャッシュ読み取りトークン、実際の請求額、完了時間、ツール呼び出し数を記録してください。トークンと費用の確認場所は使用するクライアントと課金経路により異なるため、比較前にチームがアクセスできるログまたは請求記録を決めておく必要があります。

成功条件には、正しい既存コンポーネントとデザイントークンを使ったか、ビルドとテストに通ったかも含めてください。費用だけ下がっても、UIを生のCSSで作り直しているなら、検索コスト削減の成功とは言いにくいでしょう。

22.5%は目標値ではなく、比較仮説です

11.5%
Coinbase評価における平均トークン削減
22.3%
Coinbase評価における平均実装時間削減
22.5%
Coinbase評価における平均費用削減
3回
条件ごとの実行回数

トークン削減率と費用削減率は一致する必要がありません。Claudeは基本入力、キャッシュ書き込み、キャッシュ読み取り、出力トークンに異なる単価を適用し、使用量も区別して記録します。 Coinbaseは実行ごとのトークン種別と費用計算式を公開していないため、外部から11.5%と22.5%の差を再計算することはできません。

Figmaの別評価でも、改善の方向は同じでした。Reactベースのデザインシステム2つにおける27のテストケースでは、Code Connect使用時にトークン使用量の中央値が29.5%、作業時間が19.6%減少し、コード品質の中央値は1～4点尺度で2点から3点に上がりました。 Coinbase評価とはモデル・課題・集計方法が異なるため、2つの結果を合わせて1つの平均削減率にしてはいけません。

注目すべき変数は接続カバレッジです。Figma評価では、MCP応答に占めるCode Connectスニペットの比率が平均20%だった例示システムは、約6%だった内部システムより改善幅が大きくなりました。 この2つの比率は推奨目標値ではなく、異なるシステムでの観察値です。自社の結果も全体平均だけを見ず、画面に含まれるデザインシステムコンポーネントと実際の接続比率に応じて分けて確認してください。

接続ファイルもコンポーネントと一緒に管理してください

パイロットで検索と作り直しが減ったなら、繰り返し利用量とエラー頻度が高いコンポーネントから接続範囲を広げましょう。Coinbaseは、古いマッピングと未接続コンポーネントがある状態から、Claude Codeと関連スキルを使って約4時間で数百のモバイル・Webコンポーネントへ範囲を拡大したと説明しています。 これはCoinbase自身の報告であり、他チームの想定作業時間として使うべきではありません。

新しいコンポーネントをリリースしたりpropを変更したりする際は、同じ変更内でCode Connectテンプレートも確認するのがよいでしょう。Coinbaseも、コンポーネントの作成または変更時に対応テンプレートを同期すると説明しています。 最新の接続は検索を減らす資産ですが、古い接続は古いimportとpropを素早く広める負債になります。

さらに深掘りするなら

How Coinbase used Code Connect to guide agents and shrink token costs — Coinbaseの比較条件、3回の実行結果、運用方法を確認できます。 figma.com

Better code, fewer tokens: The benefits of Code Connect in MCP — 27のテストケースにおける品質評価と、接続カバレッジによる違いを説明しています。 figma.com

Getting started with Code Connect CLI — インストール、認証、テンプレート作成、公開、Inspect確認の流れを収録した公式スタートガイドです。 developers.figma.com

Set up the remote server (recommended) — 公開後にAIコーディング比較まで進める際に必要な、クライアント別のFigma MCP接続方法を確認できます。 developers.figma.com