Figma Mcp By Bao To Generate Design Systems & Tokens In Repos Quickly For Ai Agents

注： このサーバーは、元の Framelink Figma MCP server をフォークし、その基盤をもとに AI 駆動のデザインワークフロー向けの機能を強化したものです。元の Framelink チームによる基礎的な取り組みに感謝し、その貢献を称えます。

他との違い

これは単なる Figma データ抽出ツールではありません。Figma ファイルを深く理解するための、インテリジェントなデザインシステム生成・分析・ドキュメント作成プラットフォームです。

包括的なデザインシステムのドキュメント生成

• 独自のエンドツーエンドソリューション：Figma のリンクから、充実した多面的なデザインシステムのドキュメントを自動生成する唯一の MCP です。コンポーネントの詳細な解説、インタラクティブな概要、検証レポート、アクセシビリティチェック、トークン仕様を含み、すべてがインテリジェントに統合されています。
• 常に進化するデザインシステムハブ：静的な Figma ファイルを、動的で探索しやすく、保守可能なデザインシステムのナレッジベースに変換します。

コンポーネントインテリジェンス

• セマンティックな理解：Figma コンポーネントを分析し、その構造、バリアント、関係性を把握します
• スマートな Props 推論：コンポーネントのプロパティを自動検出し、TypeScript インターフェースに対応付けます
• アトミックデザイン分類：拡張性の高いアーキテクチャを実現するため、コンポーネントをアトム、モレキュール、オーガニズムに分類します
• 実装準備状況の判定：実装できるコンポーネントと、追加の仕様が必要なコンポーネントを示します

AI に最適化されたワークフローと開発者体験

• AI エージェントに最適：Cursor、Claude などの AI ツールが、生の JSON ではなくセマンティックなコンポーネントデータを利用できます
• ワンコマンドセットアップ：Figma のリンクから、完全なデザインシステムのドキュメントとトークンを生成します
• デザインとコードの同期：デザインと実装の整合性を保つための自動チェックを実行します
• アクセシビリティを標準搭載：WCAG 準拠チェックと適切な ARIA ロールを自動で含みます
• 効率化された運用：最小限の手間で、Figma のリンクからトークン、包括的なドキュメント、検証レポートを含むデザインシステム資産一式を生成します。

この Model Context Protocol サーバー、Bao To による Figma MCP サーバーを使えば、Cursor やその他の AI 搭載コーディングツールに Figma ファイルへのアクセスを許可できます。

Cursor が Figma のデザインデータにアクセスできると、スクリーンショットを貼り付けるといった別の方法と比べて、デザインをより正確に実装できます。

デモ

Cursor で Figma のデザインデータを使って UI を構築するデモを見る

仕組み

1. IDE のチャットを開きます（例：Cursor のエージェントモード）。
2. Figma ファイル、フレーム、またはグループへのリンクを貼り付けます。
3. Figma ファイルを使って実行するタスクを AI エージェントに依頼します。たとえば、デザインの実装を依頼します。
4. Bao To の Figma MCP Server を使用するよう設定された AI エージェントが、このサーバー経由で Figma から関連するメタデータを取得し、それを使ってコードを記述します。

この MCP サーバーは、Figma API からの応答を簡素化して翻訳し、最も関連性の高いレイアウトとスタイル情報のみを AI モデルに提供するよう設計されています。

モデルに提供するコンテキストの量を減らすことで、AI の精度を高め、応答の関連性を向上できます。

主な機能

AI 主導の開発

• コンポーネントのインテリジェンス：Figma のコンポーネント構造、バリアント、関連性を理解します
• アトミックデザインの分類：コンポーネントをアトム、モレキュール、オーガニズムに分類します
• スマートなプロパティ推論：コンポーネントのバリアントを分析し、コンポーネントのプロパティを理解します
• アクセシビリティの統合：アクセシビリティ要件とベストプラクティスを特定します

デザイントークンの抽出

• 包括的なトークン分析：色、タイポグラフィ、余白、角丸、エフェクトを抽出します
• スマートな分類：関連するトークン（プライマリーカラー、テキストサイズなど）を自動的にグループ化します
• 推定変数：Enterprise 以外のアカウント向けに、Enterprise Variables API の回避策を提供します
• 複数のエクスポート形式：JSON、CSS Variables、Tailwind、Style Dictionary、Figma Tokens

デザインシステムツール

• 包括的なドキュメント：コンポーネントの例を含むデザインシステムのドキュメントを生成します
• バージョン比較：デザインシステムのバージョン間の変更を追跡します
• 検証とガバナンス：一貫性とベストプラクティスへの準拠を確認します
• WCAG 準拠：適切なコントラスト計算による実際のアクセシビリティ分析を行います
• デザインとコードの同期：デザイントークンがコード実装と一致していることを確認します

利用可能なツール

デザイントークンの抽出

• get_figma_data - Figma ファイルの構造とデザインデータ全体を抽出します
• download_figma_images - Figma から画像、アイコン、グラフィックをダウンロードします
• get_figma_variables - Figma Variables を取得します（重要：Enterprise プラン限定）
• generate_design_tokens - デザイントークン（色、タイポグラフィ、余白、エフェクト）を抽出して構造化します

コンポーネントのインテリジェンス

• analyze_figma_components - 新機能！ AI 主導の開発に向けて、コンポーネントをインテリジェントに分析します

📚 デザインシステムの管理

• generate_design_system_doc - 包括的なデザインシステムのドキュメントを生成します
• compare_design_tokens - ファイル間またはバージョン間のデザイントークンを比較します
• validate_design_system - デザインシステムの一貫性とベストプラクティスへの準拠を検証します
• check_accessibility - 実際のコントラスト計算によって WCAG アクセシビリティへの準拠を確認します
• migrate_tokens - トークンを別の形式（Tailwind、CSS Variables、Style Dictionary）に変換します
• check_design_code_sync - デザイントークンとコード実装を比較します

🎯 新機能：高度なデザインシステムツール

• デザイントークンの比較（compare_design_tokens）：

  • 異なる Figma ファイルまたはバージョン間でデザイントークンを比較します
  • 追加、削除、変更されたトークンを特定し、詳細な変更履歴を記録します
  • デザインシステムのバージョン管理や移行計画に最適です
  • チームでのコラボレーションに役立つ、構造化された比較レポートを出力します

• デザインシステムの検証（validate_design_system）：

  • デザインシステムのベストプラクティスとルールに照らしてデザイントークンを検証します
  • 色の命名規則、タイポグラフィスケールの一貫性、スペーシングパターンをチェックします
  • 本番環境に反映される前に、潜在的な問題や不整合を特定します
  • デザインシステムを改善するための、実行可能な推奨事項を提示します

• アクセシビリティ準拠チェッカー（check_accessibility）：

  • アクセシビリティ準拠に関する問題がないか、デザイントークンを分析します
  • テキストサイズ、色のコントラスト、タッチターゲットのサイズをチェックします
  • WCAG 準拠を改善するための具体的な提案を提示します
  • インクルーシブでアクセシブルなデジタルプロダクトを構築するために不可欠です

• 複数フォーマットでのトークン移行（migrate_tokens）：

  • デザイントークンを Tailwind、CSS Variables、Style Dictionary、Figma Tokens などの一般的なフォーマットに変換します
  • 既存の開発ワークフローやツールとシームレスに連携します
  • フォーマット間でトークンの関係性と意味を維持します
  • 大規模なデザインシステムの一括変換に対応します

• デザインとコードの同期チェッカー（check_design_code_sync）：

  • Figma のデザイントークンと、実際のコードベースにあるトークンを比較します
  • デザイン仕様と実装の不一致を特定します
  • JSON、JavaScript、TypeScript のトークンファイル形式に対応します
  • デザインと開発の完全な整合性を維持するのに役立ちます

このサーバーを AI エージェントと使用する

Figma MCP Server by Bao To の機能、特にデザインシステム生成ツールを最大限に活用するには、AI エージェント（Cursor など）に適切な指示を与える必要があります。手順は以下のとおりです。

1. このサーバーを指定する：

   • タスクを開始するときに、「Getting Started」セクションの説明に従って、AI クライアントが「Figma MCP Server by Bao To」を使用するよう設定されていることを確認します。
   • AI エージェントが複数の MCP サーバーから選択できる場合や、より一般的な指示を与える場合は、「Figma のタスクには『Figma MCP Server by Bao To』を使用してください。」、または npm パッケージ名を使って 「MCP サーバー @tothienbao6a0/figma-mcp-server を使用してください。」 と明示する必要がある場合があります。

2. 特定のツールをリクエストする：

   • 基本的な Figma データを取得する場合：「[Figma link] の Figma データを取得してください。」（エージェントはおそらく get_figma_data を使用します）。
   • Figma の変数を取得する場合 ⚠️ Enterprise のみ：「『Figma MCP Server by Bao To』を使って、[Figma link] から変数を取得してください。」 と指示します。エージェントは get_figma_variables ツールを呼び出します。注：これは Figma Enterprise プランでのみ動作します。
   • デザイントークンを生成する場合：「『Figma MCP Server by Bao To』を使って、[Figma link] のデザイントークンを生成してください。」 と指示します。エージェントは generate_design_tokens ツールを呼び出します。
   • 推定変数を含むデザイントークンを生成する場合：「『Figma MCP Server by Bao To』を使って、推定変数の分析を含め、[Figma link] のデザイントークンを生成してください。」 と指示します。エージェントは includeDeducedVariables: true を指定して generate_design_tokens を呼び出します。これにより、Enterprise 以外のユーザーでも変数に似た構造を取得できるようになります。
   • デザインシステムのドキュメントを生成する場合：「『Figma MCP Server by Bao To』を使って、[Figma link] のデザインシステムのドキュメントを生成してください。」 と指示します。エージェントは generate_design_system_doc ツールを呼び出します。

3. 必要なパラメーターを指定する：

   • fileKey：Figma ファイルのリンクを必ず指定してください。エージェントとサーバーが fileKey を抽出できます。
   • scope（get_figma_variables 用）：⚠️ Enterprise のみ - 「local」変数（デフォルト。ファイル内のすべての変数）または「published」変数（チームライブラリに公開された変数のみ）のどちらを取得するかを指定するオプションのパラメーターです。
   • outputFilePath（get_figma_variables および generate_design_tokens 用）／outputDirectoryPath（generate_design_system_doc 用）：
     • これらのツールでは、生成したファイルの保存先を指定できます。
     • ドキュメント、トークン、または変数を現在のプロジェクト内（例：/docs または /tokens フォルダー）に直接保存する場合は、エージェントに次のように伝えてください。
       • 「[Figma link] から変数を取得し、プロジェクトの src/design-system フォルダーに variables.json として保存してください。」
       • 「[Figma link] のデザインシステムドキュメントを生成し、現在のプロジェクトの docs/design_system フォルダーに保存してください。」
       • 「[Figma link] のデザイントークンを生成し、プロジェクトの src/style-guide フォルダーに JSON ファイルを design-tokens.json として保存してください。」
     • その後、AI エージェントがプロジェクトのサブフォルダーの絶対パスを特定し、該当するツールを呼び出す際に outputDirectoryPath または outputFilePath として指定します。
     • パスを指定しない場合、これらのツールは一時システムディレクトリに出力を保存します（ドキュメントに記載されているデフォルトの動作に従います）。エージェントにはそのパスが通知され、ファイルの取得をサポートできます。

エージェントへのプロンプト例：

「AIさん、Bao To の Figma MCP Server を使って、https://www.figma.com/design/yourFileKey/Your-Project-Name の完全なデザインシステムドキュメントを生成してください。出力は、現在のプロジェクトのルートディレクトリ内に新しく作成する figma_docs フォルダーに保存してください。」

具体的に指示すると、AI エージェントが適切なパラメーターでこのサーバーを正しく呼び出せるようになり、開発ワークフローで高度な機能を活用できます。

はじめに

Cursor などの AI コーディングクライアントは、この MCP サーバーを使用するように設定できます。クライアントの MCP サーバー設定ファイルに以下を追加し、YOUR-KEY を Figma API キーに置き換えてください。

注：このサーバーを使用するには、Figma のアクセストークンを作成する必要があります。Figma API アクセストークンの作成方法は、こちらをご覧ください。

MacOS / Linux

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "npx",
      "args": ["-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma MCP Server by Bao To": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

これにより、npx を使って npm から @tothienbao6a0/figma-mcp-server パッケージをダウンロードし、実行します。-y フラグを指定すると、npx による確認プロンプトに自動的に同意します。

または、最初にパッケージをグローバルにインストールすることもできます（ただし、CLI ツールでは、グローバルにインストールせずに常に最新バージョンを使用できる npx が推奨されることがよくあります）。

npm install -g @tothienbao6a0/figma-mcp-server

その後、コマンドとして @tothienbao6a0/figma-mcp-server を直接使用するようにクライアントを設定してください。

生成したデザインシステムを読みやすくする

この MCP サーバーを使ってデザイントークンやドキュメントを生成すると、fill-hxq15en のような Figma の内部 ID によって、システムの保守が難しくなることに気付くでしょう。生成されるデザインシステムドキュメントは広範囲にわたり、複数のファイルやセクションに内部 ID が散在しています。以下は、これらの ID をすべて意味のある読みやすいトークンに置き換えるワークフローです。

セマンティックマッピングのワークフロー

1. 初期デザインシステムを生成する

   • MCP サーバーを使用して、初期デザイントークンとドキュメントを生成します
   • Figma の内部 ID が含まれた複数のファイルが生成されます：
     • デザイントークン JSON
     • CSS 変数
     • コンポーネントのドキュメント
     • スタイルガイド
     • 使用例

2. カラーシステムのスクリーンショットを準備する

   • Figma で、カラーのスタイルページに移動します
   • 次の内容がはっきりと確認できるスクリーンショットを撮影します：
     • すべてのカラースウォッチ
     • 色の名前と値
     • 色のグループ分け／階層
   • 参照用にこのスクリーンショットを保存します

3. AI を使って包括的なセマンティックマッピングを作成する

   • Cursor で、カラーシステムのスクリーンショットを共有します
   • AI に包括的なマッピングを依頼します
   • プロンプトの例：

     "Figma のカラーシステムのスクリーンショットと、生成されたデザインシステムのファイルがあります。
     ドキュメント全体に含まれる内部 ID のすべての箇所について、セマンティックマッピングの作成を手伝ってください。
     1. まず、画像内のカラーシステムを分析し、各色のセマンティックな意味を把握します
     2. 次に、生成されたすべてのファイルを検索し、各内部 ID が使われている箇所をすべて見つけます
     3. ID とセマンティック名の完全な対応表を作成します
     4. 次のすべての箇所を更新します：
        - トークンファイル
        - CSS 変数
        - コンポーネントのドキュメント
        - 使用例
        - スタイルガイド
     5. デザインシステム全体で一貫性を確保します
     6. 次の内容を含む追加ドキュメントを生成します：
        - セマンティックトークンの使用ガイドライン
        - さまざまなコンテキスト（コンポーネント、テーマなど）での例
        - 実装のベストプラクティス
        - 一般的なパターンと組み合わせ
        - アクセシビリティに関する考慮事項"
     

   • AI は次の処理を行います：
     • カラーシステムを視覚的に分析します
     • 各 ID のすべての箇所を検索します
     • 包括的なマッピングを作成します
     • すべてのファイルにあるすべての箇所を更新します
     • 全体を通して一貫性を保ちます
     • 補足ドキュメントを作成します

4. 生成されるファイル AI は、関連するすべてのファイルを作成／更新します：

   • token-mapping.json - ID とセマンティック名の完全な対応表
   • design_variables.css - 更新された CSS 変数
   • セマンティック名を使ったすべてのドキュメントファイル
   • 新しいトークン名を使ったコンポーネントの例
   • セマンティックな参照を含むスタイルガイド

包括的な変換の例

変換前（複数のファイルにまたがる場合）：

/* design_variables.css */
--fill-hxq15en: #556AEB;
--stroke-heus4w0: #B9C4FF;

/* component_examples.md */
Use `var(--fill-hxq15en)` for primary actions
Border: 1px solid var(--stroke-heus4w0)

/* style_guide.md */
| fill-hxq15en | Primary blue | #556AEB |

変換後：

/* design_variables.css */
--color-primary-500: #556AEB;
--stroke-primary-light: #B9C4FF;

/* component_examples.md */
Use `var(--color-primary-500)` for primary actions
Border: 1px solid var(--stroke-primary-light)

/* style_guide.md */
| color-primary-500 | Primary blue | #556AEB |

ベストプラクティス

1. カラーシステムのスクリーンショット

   • すべての色が見えるようにします
   • 命名システム全体を含めます
   • 色の階層全体を表示します
   • 使用ガイドラインがあれば、それも撮影します

2. セマンティックな命名

   • 一貫性のある、目的に基づいた名前を使います
   • 明確な命名階層に従います
   • 色同士の関係をドキュメントに記載します
   • 使用するコンテキストを含めます

3. 包括的な更新

   • すべての箇所が更新されたことを確認します
   • すべてのドキュメントファイルを確認します
   • すべてのコンポーネント例を見直します
   • すべての参照を検証します

4. メンテナンス

   • スクリーンショットを最新の状態に保ちます
   • 必要に応じてマッピング全体を再実行します
   • すべてのファイルで一貫性を確認します
   • 手動で上書きした箇所を記録します

AI は、開発者がセマンティックトークンを正しく使えるように、さまざまなコンテキスト（コンポーネント、テーマなど）での例や使用ガイドラインなどの追加ドキュメントも生成します。

貢献

AI エージェントでこれらのツールにアクセスするには、次のプロンプトを使用します。

• 包括的なデザインデータを抽出する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]からデザインシステムを分析してください。」 エージェントは続いてget_figma_dataツールを呼び出します。
• 特定の画像をダウンロードする場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]からアイコンと画像をダウンロードしてください。」 エージェントは続いてdownload_figma_imagesツールを呼び出します。
• 変数を抽出する場合（Enterprise のみ）：「'Figma MCP Server by Bao To'を使用して、[Figma link]から変数を取得してください。」 エージェントは続いてget_figma_variablesツールを呼び出します。
• デザイントークンを生成する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]のデザイントークンを生成してください。」 エージェントは続いてgenerate_design_tokensツールを呼び出します。
• 推定変数を含むデザイントークンを生成する場合：「'Figma MCP Server by Bao To'を使用して、推定変数の分析を含めて[ Figma link]のデザイントークンを生成してください。」 エージェントはincludeDeducedVariables: trueを指定してgenerate_design_tokensを呼び出します。これにより、Enterprise 以外のユーザーも変数に似た構造を取得できます。
• 包括的なドキュメントを生成する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]のデザインシステムのドキュメントを生成してください。」 エージェントは続いてgenerate_design_system_docツールを呼び出します。

🎯 高度なデザインシステムツールの使用方法

• バージョン間でデザイントークンを比較する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link 1]と[Figma link 2]のデザイントークンを比較してください。」 エージェントはcompare_design_tokensツールを呼び出します。
• デザインシステムへの準拠を検証する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]のデザインシステムへの準拠を検証してください。」 エージェントはvalidate_design_systemツールを呼び出します。
• アクセシビリティへの準拠を確認する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]のアクセシビリティへの準拠を確認してください。」 エージェントはcheck_accessibilityツールを呼び出します。
• トークンを別の形式に移行する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]のデザイントークンをTailwind形式に変換してください。」 エージェントは目的のターゲット形式を指定してmigrate_tokensツールを呼び出します。
• デザインとコードの同期を確認する場合：「'Figma MCP Server by Bao To'を使用して、[Figma link]のデザイントークンが、[file path]にあるコードのトークンファイルと同期しているか確認してください。」 エージェントはcheck_design_code_syncツールを呼び出します。

プランの制限

⚠️ Figma Variables API に関する重要なお知らせ

get_figma_variables関数を使用するには、Figma Enterprise プランが必要です。この制限はFigmaによるものであり、このMCPサーバーによるものではありません。

• すべてのプランで利用可能：get_figma_data、download_figma_images、generate_design_tokens、generate_design_system_doc
• Enterprise のみ：get_figma_variables（Variables REST APIへのアクセス）

この制限がある理由：

• FigmaはVariables APIへのアクセスをEnterpriseプランのみに制限しています
• Starter、Professional、Organizationプランのユーザーには403 Forbiddenエラーが返されます
• これはEnterpriseの販売を促進するためのFigmaのビジネス上の判断です

Enterprise以外のユーザー向けの代替手段：

• generate_design_tokensでincludeDeducedVariables: trueを使用します。デザイントークンを分析して変数に似た構造を作成します（新しい回避策機能）
• generate_design_tokens（標準）を使用します。デザインから同様のスタイル情報を抽出します
• FigmaのPlugin APIを使用します（カスタムプラグインの構築が必要です）
• Figma UIから手動で変数をエクスポートします

詳細については、Figmaのプラン機能に関する公式ドキュメントをご覧ください。