figma-design-system-inventory

figma-design-system-inventory — トークン、コンポーネント、スタイルを一括抽出

ファイル全体を走査し、構造化されたキットを返す単一の use_figma 呼び出しです。 トークン（すべてのローカル変数をコレクションとモードごとにグループ化）、コンポーネント（単独のコンポーネントとコンポーネントセット。プロパティ定義と、各バリアントの簡潔な visualSpec を含む）、スタイル（解決済みの値を含むペイント／テキスト／エフェクトスタイル）を取得します。コード生成やライブラリ監査のために「すべてを一度に読み取る」入口です。

スキルの範囲

• use_figma のルール — まず公式の figma-use スキルを読み込んでください。Figma Plugin API の完全なリファレンスです。これらのスクリプトで必要となる基本事項：トップレベルの await と return を使うプレーンな JS（IIFE や figma.closePlugin() は使わない。console.log の内容は返されない）、入力は各スクリプトの先頭で const としてインライン化する、色の値は 0～1 の範囲、テキスト操作の前にフォントを読み込む、await figma.getNodeByIdAsync(...) を使う、そして アトミックエラー（スクリプトが失敗すると変更は一切適用されません。エラーを読み、修正して再試行してください）。
• 各 visualSpec の正確な構造 → references/visual-spec.md。
• 1 つのコンポーネントを無制限の深さで取得（全ツリー、リアクション、インスタンス参照）→ figma-deep-component を使用してください。1 つのバリアントセットを CSS のステートマシンとして取得 → figma-analyze-component-set を使用してください。ディスク上のトークンファイル → figma-export-tokens を使用してください。
• これは、ネイティブ MCP にはないシステム全体を対象とするデザイン機能です。get_design_context は単一の選択範囲に対して機能し、get_metadata はフラットな構造を返すため、どちらも、どのプランでも利用できる統合された トークン＋コンポーネント＋スタイルのキットは提供しません。

ワークフロー

1. 大きなファイルでの応答サイズを抑えるために、対象範囲と詳細度を選択します。scripts/inventory.js の定数を編集します。
   • INCLUDE — "tokens"、"components"、"styles" のいずれか（デフォルト：すべて）。
   • VERBOSITY — "full"（バリアントごとのビジュアル仕様）、"summary"（コンポーネントのメタデータとプロパティ。バリアントごとの仕様はなし）、または "inventory"（名前／ID／件数のみ。巨大なファイル向け）。
   • COMPONENT_NAME_FILTER — コンポーネントを絞り込む部分文字列（例："Button"）。
2. use_figma を通じて実行します（skillNames: "figma-design-system-inventory"）。Plugin API を通じて変数を読み取るため、すべての Figma プランで動作します（Enterprise REST は不要です）。
3. 結果を利用します。 色／間隔／タイポグラフィの値には tokens、コンポーネント API には components[].properties、状態ごとの外観には components[].variants[].visualSpec、変数ベースではないスタイルの値には styles を使用します。
4. 結果がまだ大きい場合は、VERBOSITY を下げるか、INCLUDE／ COMPONENT_NAME_FILTER を絞り込んで再実行します。巨大な full 出力をページ分割しようとしないでください。

注記

• 色は 16 進数で出力されます（Figma では内部的に 0～1 の RGBA で保存されます）。間隔／サイズの値は px です。
• 変数は、可能な場合にエイリアスをトークン名に解決します（{Color.Brand.Primary} の形式）。
• バリアントごとのビジュアル仕様は、各バリアントのコンポーネントノードから取得します。項目（塗り、線、エフェクト、cornerRadius、opacity、レイアウト／パディング／間隔、タイポグラフィ）については references/visual-spec.md を参照してください。
• このスクリプトは、バンドルされている figma_get_design_system_kit ツールを、ルートと第 1 階層を対象に手動で記述したものです。ネイティブな use_figma の書式で記述されているため、Desktop Bridge なしで実行できます。各コンポーネント／バリアントのルートのビジュアル仕様と直下の子要素（childSpecs）を取得します。それより深い階層は再帰的に取得しません。