デザインハンドオフは、2016 年頃から人間の開発者向けに解決済みの問題です。Zeplin、InVision Inspect、Avocode、Figma 自身の Dev Mode — これらはすべて同じことをします。開発者がノードをクリックしてプロパティを読み取れる Web インターフェースを提供します。

そのワークフローは、「開発者」が AI エージェントになった途端に完全に機能しなくなります。

この記事では、その理由、エージェントが実際に必要なもの、そして近似的なコードではなく正確なコードを生成するハンドオフワークフローの構築方法を説明します。解決策は figmascope です。Figma ファイルから直接構造化されたコンテキストバンドルをエクスポートするブラウザベースのツールです。ステップバイステップのワークフローについては、Figma から Claude Code へまたは Figma から Cursor へをご覧ください。

デザインハンドオフの前提

2023 年以前に作られたすべてのハンドオフツールは同じ暗黙の前提を持っています。もう一方の端には人間がいて、クリックして回り、値を読み取り、判断を下すということです。ツールの仕事は、開発者がデザイナーに常にコンテキストスイッチングしなくて済むほど明確に情報を表示することです。

この前提はこれらのツールの UX 全体に組み込まれています。

これは間違っていません。人間の開発者ワークフローには正しいです。ただ、エージェントには間違ったインターフェースです。

エージェントがデザインから実際に必要なもの

デザインタスクを受け取る AI エージェントには以下が必要です。

  1. 何かをする前に読むスペック — 制約、スコープ、トークン命名規則、バージョン注記。パネルにカーソルを合わせると示唆されるのではなく、明示的に書き出されたもの。
  2. 型付きトークン辞書 — 生の hex 値とピクセル数ではなく、名前付きで型付きのトークンとその値。エージェントは #d96a3a が color.accent であることを知る必要があります。正しい Tailwind クラス名または CSS カスタムプロパティを生成するために。
  3. フルスクリーンレイアウトツリー — すべてのノードの階層、レイアウト関係、サイズ、トークン参照。オンデマンドで 1 つずつではなく、メモリ内に完全なツリーが必要です。
  4. 集約された文字列 — すべてのテキストコンテンツが正規化され、リソースキーが付いています。個別のノードに散在しているのではなく。
  5. 視覚的グラウンドトゥルース — エージェントが出力と比較できる参照レンダリング。2× でのデザインのスクリーンショット。
  6. コンポーネント名 — 生成されたコードが使用すべき正規の識別子。発明された名前ではなく。

従来のハンドオフツールはこれらのいずれも、エージェントが使用できる形で提供しません。figmascope アプリはこれらすべてを 1 つの zip で生成します — Figma URL を貼り付けてバンドルを取得します。アップロードなし、バックエンドなし。トークンフォーマットの詳細は AI エージェント向けデザイントークンエクスポートを参照してください。

スクリーンショットが失敗する理由

人々が最初に試みるクイックワークアラウンド：Figma から PNG をエクスポートし、「このスクリーンを実装してください」というプロンプトと一緒にエージェントに渡します。エージェントはコードを生成します。時には近く見えることもあります。しかし：

これらのエラーはそれぞれ小さいです。合わせると、エージェントの使用による時間節約のほとんどを無効にするほどの手動修正が必要なコンポーネントになります。

例を交えた詳細な分析については why screenshots fail for AI codegen をご覧ください。

スクリーンショットはエージェントにデザインがどのように見えるかを伝えます。構造化コンテキストはデザインが何であるかを伝えます。

従来のハンドオフツールの評価

Zeplin

Zeplin の主要インターフェースは開発者がノードごとにデザインをインスペクトする Web アプリです。ファイルからカラーとタイポグラフィを集約する「Styleguide」機能があります — これがトークンエクスポートに最も近いものです。機械可読なレイアウトツリーはエクスポートしません。「Connected Components」機能は Storybook コンポーネントと Figma フレームをリンクしますが、ドキュメントには便利でもエージェントが新しいコードを生成するのに役立ちません。

Figma Dev Mode

ハンドオフに対する Figma のネイティブな回答です。コードパネルは選択されたノードから CSS を生成し、セットアップ時に Variable 名を表示します。人間の開発者向けに設計されています。ファイルレベルのエクスポートをサポートせず、レイアウトツリーを生成せず、コードスニペットは CSS のみです（フレームワーク非依存のトークンではありません）。Dev Mode シートが必要です。

Avocode

Avocode は Abstract に買収され、2022 年に廃止されました。「デザインハンドオフツール」の検索結果にまだ表示され、比較トラフィックを誘導するため言及します。現在は利用できません。

Locofy、Builder.io、Anima

これらのツールは Figma デザインから直接フレームワークコード（React、Next.js、HTML）を生成しようとします。問題空間に近いです — 出力がプロパティパネルではなくコードである必要があることを理解しています。しかしエージェントに与えるコンテキストではなく、デプロイするコードを生成します。その違いは重要です。ツール自体がコードを生成している場合、「Settings スクリーンを実装してください。すでに構築した UserAvatar コンポーネントを再利用して」と依頼できません。構造化されたコンテキストを与えた Claude Code や Cursor にはそう依頼できます。

詳細な比較については figmascope vs Locofy と figmascope vs Builder.io を参照してください。

エージェント対応ハンドオフとはどのようなものか

エージェント対応ハンドオフには、従来のハンドオフと区別する 3 つのプロパティがあります。

1. UI ではなくファイルアーティファクトである

ハンドオフアーティファクトは、コードと並んでリポジトリに存在するバージョン管理されたファイル（またはファイルセット）です。ログインが必要な共有リンクではありません。Web アプリのパネルでもありません。JSON、PNG、Markdown ファイルを含む design/ ディレクトリです。

これにはいくつかの結果があります。

2. レンダリングされたテキストではなく型付きデータを使用する

tokens.json のデザイントークンは型付きです — $type: "color"、$type: "dimension" — Markdown テーブルの文字列だけではありません。screens/*.json のレイアウト IR には明示的なノード種類（stack、overlay、absolute、leaf）と $ref 記法を使ったトークン参照があります。strings.json の文字列にはドット記法のキーがあります。人間が読めるラベルだけではありません。

型付きデータはエージェントがプログラム的に推論できることを意味します。「background.$ref == color.surface のすべてのノードは同じ背景色を使用している」、「同じ背景に見えるすべてのノード」ではなく。

3. エージェントが最初に読むスペックドキュメントを含む

CONTEXT.md はデザイナーとエージェントの間の契約です。以下を説明します。

従来のハンドオフには相当するものがありません。Dev Mode にはフレームごとの「開発者メモ」フィールドがありますが、構造なしにデザイナーが臨機応変に書いたものです。CONTEXT.md はファイルの実際の内容から一貫して生成されます。

ハンドオフワークフローのステップバイステップ

  1. デザイナーがフレームを準備完了とマーク — Figma でデザイナーは実装の準備ができたフレームにフラグを立てます（命名規則、「ready」ラベル、チームが使用するもの何でも）。
  2. 開発者が figmascope を実行 — figmascope.dev でファイル URL と PAT を貼り付け、エクスポートをクリックし、zip をダウンロードします。
  3. design/ に展開 — unzip figmascope-<fileKey>.zip -d design/
  4. design/ をリポジトリにコミット — バンドルがハンドオフアーティファクトです。PR にはデザインバンドルと実装の両方が含まれます。
  5. エージェントが実装 — Claude Code または Cursor を design/CONTEXT.md と関連スクリーン JSON に向けます。エージェントはバンドルのトークン値、コンポーネント名、文字列を使ったコードを生成します。
  6. レビューと反復 — 開発者は screens/*.png と照合してレビューし、ギャップを記録し、プロンプトを改善します。

デザインが変わったら、ステップ 2 から繰り返します。_meta.json のタイムスタンプは、バンドルが最後に生成された時刻と Figma ファイルが最後に変更された時刻を教えてくれます — シンプルな鮮度チェックです。

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

変わらないもの

エージェント対応ハンドオフはデザインレビューを置き換えません。エージェントは構造化コンテキストから実装しますが、人間が出力を検証します。インタラクション状態、アニメーション、レスポンシブ動作、アクセシビリティ — これらは静的なデザインデータだけからエージェントが近似できても保証できない判断が必要です。

構造化コンテキストはデザイナーと開発者の会話も置き換えません。トークンの名前が曖昧だったり、コンポーネントが静的フレームが示す以上に複数ブレークポイントにわたって異なる動作をする場合、それは会話が必要です。CONTEXT.md はファイルに何があるかをキャプチャしますが、ファイルが扱わないケースについてデザイナーが意図したことは推論しません。

変わること：安定したデザインからの静的スクリーンレイアウトの実装が、数時間の手動プロセスからプロンプトとレビューのワークフローになります。エージェントが機械的な翻訳を処理し、開発者が判断を処理します。

チェックリスト：デザインハンドオフはエージェント対応か？

これらのほとんどが欠けている場合、エージェントは良いコンテキストを持って一から始めるよりも多くの修正が必要なコードを生成します。figmascope が生成するバンドルは 1 回のエクスポートでこれらすべてを満たします。各チェックリスト項目のケーススタディと詳細については figmascope ブログを、Dev Mode およびプラグインとの直接比較については Figma インスペクターの代替をご覧ください。