AIコーディングの費用を抑えるために、まずプロンプトを短くする必要はありません。Coinbaseが費用を22.5%下げたのは、指示文の長さではなく、エージェントが正しいコンポーネントを探し回る部分でした。
22.5%を生んだのは短いプロンプトではなく、正確な出発点です
Code Connectが行うのは、デザインコンポーネントとプロダクションコードのコンポーネントの間に対応表を作ることです。Figma MCPサーバーだけを使う場合、エージェントはキャンバスの構造や視覚情報をReact形式で受け取れますが、それが社内コードベースのどのコンポーネントに対応するかは分からないことがあります。Code Connectテンプレートも用意すると、MCPレスポンスの一部が実際のimport文、コンポーネント名、プロパティ値を含むコード断片に変わります。
たとえばデザインにステップインジケーターがあっても、接続情報がなければ、エージェントは進行バーとラベルを組み合わせて似たUIを新たに作るかもしれません。一方、接続情報にCDSのStepperとプロパティのマッピングがあれば、既存コンポーネントをそのまま取り込みます。トークンを節約する鍵は、モデルに渡す情報を減らすことではなく、誤った候補を探索しなくて済むよう正解の場所を渡すことです。
Coinbase Design Systemは、Webやモバイルを含む複数プラットフォームのコンポーネントとデザイントークンを管理しています。公開リポジトリでは、React、React Native、Android Compose、iOS SwiftUI向けのパッケージも確認できます。 このようなマルチプラットフォームのシステムでは、同じ「ボタン」でもフレームワークごとにimportパスとAPIが異なるため、単純なコンポーネント名の一覧だけでは不十分です。Code Connectでは、1つのデザインコンポーネントを異なる言語・フレームワークのコード実装にそれぞれ接続できます。
| エージェントが行うこと | Code Connectなし | Code Connectあり |
|---|---|---|
| コンポーネントの選択 | コードベースを検索するか、新しいUIを作成 | マッピング済みのプロダクションコンポーネントを使用 |
| プロパティの変換 | Figmaプロパティを見てAPIを推測 | デザインプロパティとコードpropの明示的なマッピングを使用 |
| スタイルの処理 | 任意のCSSや似た色を生成する可能性 | 実際のトークンと使用例を参照 |
| 失敗のコスト | 検索、デバッグ、書き直しで会話が長くなる | 初期経路が狭まり、探索呼び出しが減る |
Coinbaseチームは、既存のCode Connectマッピングが古く、新しいコンポーネントにはテンプレートがない状態から始めました。Claude CodeとFigmaのfigma-code-connectスキルでコンポーネント一覧を並列処理し、チームの説明によれば約4時間で数百のコンポーネントのマッピング範囲をデザインシステム全体へ広げました。 公式CLIドキュメントにも、このスキルはFigmaの選択範囲から未接続コンポーネントを見つけ、リポジトリ内の対応コードを確認して.figma.tsテンプレートを生成するとあります。ただし、生成結果をレビュー・修正してから公開するよう明記されています。
22.5%はコピーする目標値ではなく、検証する仮説です
Coinbaseの結果は有望ですが、標本は小規模です。チームは同じデザイン、同じ曖昧なプロンプト、同じSonnet 4.6モデルを使い、空のコードベースを毎回初期化して3回実行しました。プロンプトキャッシュが結果を有利にしないよう制御し、平均で使用トークンは11.5%、実装時間は22.3%、費用は22.5%減少したと報告しています。
ここで3つの数値を同じ意味として読んではいけません。トークン数と請求費用には、入力、出力、キャッシュ読み取り、キャッシュ書き込みで異なる単価が適用される場合があります。Anthropicのドキュメントによると、キャッシュの読み取りと書き込みも基本入力トークンとは異なる価格体系であり、同じプロンプト接頭辞が維持されるかによってキャッシュヒットの有無が変わります。 したがって自社実験では、総トークンだけを記録せず、入力、出力、キャッシュ読み取り、キャッシュ作成、実際の請求額を分ける必要があります。
Figmaが別途実施した、より広い評価はCoinbaseの数値の方向性を補強しています。Reactベースのデザインシステム2つにおける27件のテストケースで、Code Connect使用時は中央値でトークン使用量が29.5%、作業時間が19.6%減少し、コード品質は1〜4点尺度で2点から3点へ上がりました。 ただし、この結果もすべての組織にそのまま適用できる普遍的な削減率ではありません。
実際にFigmaの評価で効果を大きく左右した変数は、Code Connectカバレッジでした。MCPレスポンスに占めるCode Connect断片の平均が20%だった例示デザインシステムは、約6%だった内部システムより改善幅が大きくなりました。接続範囲が広いほど、エージェントがnode_modulesを探し回ったり、アイコン名を広範に検索したり、既存コンポーネントをCSSで作り直したりすることが減りました。
22.5%を導入提案の確定ROIとして使わないでください
Coinbaseの数値は、1つのデザインを条件ごとに3回実行した独自評価の平均です。モデル、リポジトリの規模、デザインの難易度、コンポーネント再利用率、キャッシュ状態が変われば結果も変わります。まず頻繁に実装する画面をいくつか使ってベースラインを作り、カバレッジと品質も合わせて測定するほうが安全です。
品質も画面の類似度だけで判断するのでは不十分です。Coinbaseは正しいコンポーネントとデザイントークンを使ったかを確認し、Figmaの評価では正確性、コード品質、保守性、完全性、アクセシビリティ・セキュリティなどを含むベストプラクティスも採点しました。 画面が似ていても、タブが実際には切り替わらなかったり、既存コンポーネントの代わりに数百行のCSSが生まれたりしたなら、成功として数えるべきではありません。
チームで再現する4段階
繰り返し使用量の多いコンポーネントから一覧化します
最近実装した画面を10個選び、Button、Input、ListCell、Modalのように登場回数の多いコンポーネントを数えます。各項目にFigmaノード、コードのimportパス、対応プラットフォーム、非推奨かどうかを記載します。最初からライブラリ全体を接続するのではなく、上位20件とエージェントがよく間違えるアイコン・複合フォームを優先すれば、初期効果を早く確認できます。
チーム構成に合わせてUIとCLIの接続方法を選びます
パスとコンポーネント名を素早く接続するなら、Figma内のCode Connect UIが便利です。デザインプロパティを実際のpropへ動的にマッピングし、正確なコード例を提供するなら、リポジトリで実行するCLIが適しています。両方の方法を併用できますが、現在のCode ConnectにはOrganizationまたはEnterpriseプランのFull・Dev seatが必要です。
マッピングファイルを作り、実際のimportまでレビューします
CLIを使う場合は、Node.js 18以上とCode Connect権限を持つFigma個人アクセストークンを用意し、npm install --global @figma/code-connect@latestでツールをインストールします。プロジェクトルートにfigma.config.jsonを作成し、.figma.tsファイルでFigmaの文字列・真偽値・列挙型プロパティをコードpropへ接続します。生成されたテンプレートのimportパス、デフォルト値、variant、非推奨コンポーネントを人が確認してから、npx figma connect publishで公開します。
同じ課題をA/Bで繰り返し、カバレッジ別に分けます
実際の業務から中程度の難易度の画面を5つ選び、「Code Connectなし」と「あり」をそれぞれ最低5回実行します。モデル、プロンプト、リポジトリのコミット、権限、キャッシュ条件を固定します。実行ごとに入力・出力・キャッシュトークン、費用、完了時間、ツール呼び出し数を記録し、ビルド・テストの合格可否と正しいコンポーネント・トークンの使用率も採点します。最後に全体平均だけでなく、画面内のデザインシステムコンポーネント比率と接続カバレッジの区間ごとに結果を分けます。
運用段階では、新コンポーネントのリリースとCode Connectの更新を同じ完了条件に結び付けることが重要です。Coinbaseも、現在はコンポーネントを作成または修正する際に対応テンプレートも同期すると説明しています。 マッピングが古くなると、エージェントに正しい答えではなく古い答えを自信を持って渡すことになるからです。
さらに深く知りたい場合
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 — インストール、設定ファイル、テンプレート作成、公開コマンドをたどれる公式開発者ドキュメントです。 developers.figma.com
Code Connect — UIとCLIの違い、対応プラン、MCPで渡される接続情報を説明しています。 help.figma.com
Coinbase has open sourced its design system — Coinbaseが公開したデザインシステムの構成、100を超えるコンポーネント、トークン、アクセシビリティ原則を紹介しています。 coinbase.com
GitHub - coinbase/cds: Coinbase Design System · GitHub — CDSの実際のプラットフォーム別パッケージと公開リポジトリの構造を確認できます。 github.com
