デザイナーが作業を引き渡すとき、まず手を伸ばすのがFigma Dev Modeです。組み込みで、公式で、Figma自身の言語を話す。では、なぜ別のものを選ぶのでしょうか？
答えはDev Modeが悪いわけではありません。Dev Modeは別の問題を解いているのです。その問題が何で、何でないかを理解するのがこの記事の目的です。すぐに答えが欲しい方はfigmascopeをこちらで試してください。
Figma Dev Modeとは
Dev ModeはFigmaの有料ハンドオフ層で、ProfessionalプランとOrganizationプランで利用できます。トップツールバーの</>ボタンで切り替えると、選択したレイヤーのCSSやiOS/Androidスニペット、コンポーネントアノテーション、変数値、デザイナーが設定できる「開発準備完了」ステータスマーカーが表示されるパネルが現れます。
「これが完成したので作ってください」とデザイナーが言う瞬間のために設計されています。開発者はFigmaを開き、クリックしてスニペットをコピーし、スペーシングを確認します。エクスポートステップも、ファイルも、コンテキストスイッチも不要です。デザインをその場で読むだけです。
FigmaはDev Mode向けの公式MCPサーバーも提供しています（別機能です—MCP比較記事で詳しく説明しています）が、UIとしてのDev Modeは主として人間が読むための体験です。指さして、クリックして、検査して、コピーする。
Dev Modeが生成するコードスニペットはクイックリファレンスとして本当に役立ちます。フォントスタック、変数が設定されていれば正確なスペーシングトークン、ボーダー半径を確認できます。特定の値のサニティチェックだけが必要なシニア開発者にとっては速い。
figmascopeとは
figmascopeはブラウザサイドのツールで、バックエンドもインストールも不要でタブ内で動作します。FigmaのURLとPersonal Access Token（メモリに保持され、サーバーには送信されません）を貼り付けると、以下を含む.zipが生成されます：
CONTEXT.md— 人間とマシン双方が読めるデザイン仕様tokens.json— 型付きデザイントークン（Figma変数が存在する場合はそこから、なければ頻度から推測）screens/*.json— 画面ごとの中間表現（IR）：スタック・オーバーレイ・アブソリュート・リーフノードと空間関係screens/*.png— 2倍解像度のリファレンススクリーンショットcomponents/inventory.json— インスタンスIDを持つコンポーネントインデックスstrings.json— i18n用にキー付けされたすべてのテキストコンテンツ（stringRef.key）_meta.json— エクスポートメタデータ、ファイル情報、トークンソース
バンドルはプレーンファイルです。ランタイムもSDKも不要です。リポジトリに置いて、コミットして、差分を取って、ファイルを読むAIエージェントに渡せます。
Dev Modeとの主な違い：これはFigma内の読み取り体験ではありません。Figmaを完全に離れるエクスポートです。
Dev Modeが優れている点
ライブ検査。特定のレイヤーをクリックして今すぐ正確な計算値を取得したい場合、Dev Modeは即座です。エクスポートステップも、zipも、コンテキストスイッチも不要です。答えはパネルの中にあります。
公式インテグレーション。Figmaがビルドしてメンテナンスしてプロダクトとともにリリースします。変数サポート、アノテーションワークフロー、開発準備完了ステータス—これらはファーストパーティのサポートを持つネイティブ機能です。FigmaがデザインシステムCapabilityを追加すると、Dev Modeに反映されます。
チーム配布。Figma組織プランのすべてのデザイナーと開発者がすでに利用できます。インストール、説明、メンテナンスが必要な追加ツールはありません。
デザイン時ツール。デザイナーはフレームを準備完了としてマークし、コードレベルのアノテーションを残し、同じキャンバス内で開発者とコラボレーションできます。コメントやステータス更新が必要なQAサイクルではこの往復が本当に優れています。
figmascopeが優れている点
エージェント非依存のファイルベース出力。Dev Modeの出力はFigmaの内部にあります。figmascopeの出力はあなたが管理するzipの中にあります。コードの隣に置いてClaude CodeやCursorに向けると、Figmaへの接続なしで全仕様（すべての画面、すべてのトークン、すべての文字列）をエージェントが持てます。
バージョン管理。figmascopeバンドルは差分が取れます。コミットして、PRに含めて、先週のデザインと今日のデザインでどのトークンが変わったかを確認できます。Dev Modeには仕様自体のバージョン履歴という概念はありません—Figmaにはファイルバージョン履歴がありますが、それはソースのためであって、デザイン意図のエクスポート可能なスナップショットのためではありません。
有料ティア要件なし。figmascopeはMITライセンスで無料です。公開FigmaのREST APIを使用し、PATのみが必要です（どのFigmaアカウントでも無料）。Dev ModeはProfessionalまたはOrganizationプランが必要です。無料プランのデザイナーと作業するソロ開発者や小さなチームには、figmascopeが唯一の選択肢です。
決定論的出力。同じバージョンの同じFigmaファイルのエクスポートは毎回同じバンドルを生成します。同じJSON、同じトークン、同じ文字列。これは再現性のために重要です—CIで実行し、リリースにバンドルをピン留めし、それに対してリグレッションテストができます。
ポータブルかつオフライン。バンドルを手に入れたら、FigmaやサーバーへのFigmaの接続なしで動作します。エージェントコンテキストは自己完結しています。飛行機の中でも、ファイアウォールの内側でも、ビルドスプリント中にFigmaのアップタイムに依存したくない場合でも使えます。
IRが空間的セマンティクスを保持。screens/*.json中間表現はレイアウトの種類（スタック、オーバーレイ、アブソリュート）、コンポーネントIDenity（INSTANCEノードのcomponentId）、テキスト文字列参照を捉えます—計算されたCSSだけでなく。エージェントはスニペットをコピーするだけでなく、レイアウト構造を推論できます。
並列比較：同じFigmaファイル
フォーム、プライマリボタン、いくつかのテキストトークンを持つログイン画面を例に取ります。各ツールが提供するものは：
Dev Modeの出力：クリックしたレイヤーのCSSプロパティ（font-size: 16px; color: #1f1d1a; border-radius: 8px）。一度に1レイヤー。必要なものをコピーします。ボタンの全ステートが欲しければ、それぞれをクリックします。トークン名が欲しければ、デザイナーが変数を配線していれば表示されます—なければ表示されません。
figmascopeバンドルの出力：ログイン画面の完全仕様を持つCONTEXT.md。color.text.primary、spacing.4、radius.mdのキー付き、型付き、変数からソースされたtokens.json。IRツリーを持つscreens/login.json：componentId: "abc123"を参照するフォームINSTANCEを保持するスタックコンテナー、stringRef.key: "auth.login.cta"を持つ子リーフノード。そのキーを「Sign in」にマッピングするstrings.json。2倍のscreens/login.png。
バンドルをCursorに渡します。CONTEXT.mdを読み、tokens.jsonからトークン名を引いて、IRからコンポーネントをビルドします。Figmaを全く開く必要はありません。
比較表
| 項目 | Figma Dev Mode | figmascope |
|---|---|---|
| 価格 | 有料（Professional / Orgプラン） | 無料、MITオープンソース |
| 出力形式 | Figma内パネル、CSS/iOS/Androidスニペット | .zip: CONTEXT.md、tokens.json、screens/*.json、*.png |
| インテグレーションモデル | Figma UI内、レイヤーごとの検査 | ブラウザエクスポート、その後どこでもプレーンファイル |
| エージェント対応 | MCPサーバー経由（別機能） | ファイルを読むあらゆるエージェント対応（Claude Code、Cursor、Aider、Copilot…） |
| バージョン管理対応 | なし（出力はFigmaの内部） | あり—バンドルは差分可能、コミット可能 |
| 決定論的出力 | なし（クリックごと、セッションバウンド） | あり—同じファイルバージョン→同じバンドル |
| オフライン/ポータブル | なし—Figma接続が必要 | あり—バンドルは接続不要で動作 |
| デザイン時アノテーション | あり—開発準備完了、コメント | なし |
| 空間/レイアウトIR | なし—選択レイヤーのフラットCSS | あり—コンポーネントIDenityを持つスタック/オーバーレイ/アブソリュート/リーフ |
| トークンソース | 設定されていればFigma変数から | Figma変数→頻度から推測→なし |
| i18n文字列キー | なし | あり—IRのstringRef.key + strings.json |
| プラグインインストール不要 | なし（Figmaに組み込み） | なし（ブラウザタブ、REST API） |
それぞれを使うタイミング
Dev Modeを使うとき：特定の値をスポットチェックしたい、デザインレビューの最中にトークンを調べたい、チームがすでに有料Figmaプランに入っていてFigmaの中に住んでいる、またはデザイナーのアノテーションワークフローと開発準備完了ステータスマーカーが欲しい場合。
figmascopeを使うとき：ビルドスプリントのためにAIエージェントにコンテキストを渡したい、デザイン仕様をコードと並べてバージョン管理したい、無料Figmaプランを使っている、レイヤーごとのCSSではなく完全なレイアウトIRが欲しい、またはリリースにピン留めしたりPRで差分を取れる決定論的で再現可能な出力が欲しい場合。
両者は相互排他的ではありません。ビルド中の検査にはDev Modeを使い、デザイン仕様をリポジトリにアンカーするためにfigmascopeバンドルをエクスポートする。両者は競合しません—ワークフローの異なる部分をカバーします。