Wain AI/Tech Blog

世界のAIニュースブログ

Guide
6分

Figma Context MCP：AIコーディングツールがデザインデータを理解する新たな橋渡し

Graham Lipsmanが開発したFigma Context MCPは、CursorやClaudeなどのAIツールがFigmaデザインデータに直接アクセスし、より正確なコード生成を可能にするオープンソースプロジェクト。MCPによるデザイン・開発ワークフローの革新を解説

MCPFigmaAI-dev-toolsdesign-toolsClaudeCursorautomation
Figma Context MCP：AIコーディングツールがデザインデータを理解する新たな橋渡し

Figma Context MCP：AIコーディングツールがデザインデータを理解する新たな橋渡し

デザインとコードの間にある見えない壁

2025年6月現在、AIによるコード生成は開発者の日常的なツールとなりました。しかし、デザインファイルからコードへの変換において、依然として大きな課題が存在していました。スクリーンショットを基にしたAIのコード生成は、デザインの表層的な見た目は再現できても、レイアウトの構造やコンポーネントの関係性、スタイルの詳細な情報を正確に理解することは困難でした。

この課題に対して、開発者のGraham Lipsmanが革新的なソリューションを提供しました。それが「Figma Context MCP」です1。このオープンソースプロジェクトは、AIコーディングツールがFigmaのデザインデータに直接アクセスできるようにし、デザインからコードへの変換精度を飛躍的に向上させています。

Model Context Protocol（MCP）の登場背景

Figma Context MCPを理解するためには、まずAnthropicが2025年に発表したModel Context Protocol（MCP）について理解する必要があります2。MCPは、AIアシスタントとデータソースを安全に接続するための新しいオープンスタンダードです。

MCPの主な特徴は以下の通りです：

標準化されたアーキテクチャ：LLMと外部ツール・データソースをシームレスに接続するクライアント・サーバーアーキテクチャを提供します。これにより、開発者は統一されたインターフェースでさまざまなデータソースにアクセスできます。

双方向通信：AIモデルは情報を受け取るだけでなく、外部システムでアクションをトリガーすることも可能です。これにより、より動的でインタラクティブなアプリケーションの構築が可能になります。

プリミティブの定義：プロンプト、リソース、ツールといった基本的なメッセージタイプを定義し、相互作用を管理します。

Anthropicは、Google Drive、Slack、GitHub、Postgres、Puppeteerなどの人気エンタープライズシステム向けのプリビルトMCPサーバーを提供しており、開発者がすぐに利用を開始できる環境を整えています。

Figma Context MCPの革新性

Figma Context MCPは、MCPの仕組みを活用してFigmaのデザインデータをAIツールに提供する専用サーバーです。このプロジェクトは、GitHubで5,100以上のスターを獲得しており、コミュニティから高い関心を集めています1。

主要な機能と特徴

1. デザインデータの簡略化と翻訳

Figma Context MCPの最も重要な機能は、Figma APIからの複雑なレスポンスを簡略化し、AIモデルが理解しやすい形式に変換することです。これにより、不要なコンテキストが削減され、AIの応答がより正確で関連性の高いものになります。

2. 包括的なデザイン情報の提供

単なるスクリーンショットでは伝わらない以下の情報をAIに提供します：

  • 要素の階層構造
  • スタイルプロパティの詳細
  • コンポーネント間の関係性
  • レイアウト制約とサイジング情報
  • カラー、フォント、スペーシングなどのデザイントークン

3. マルチプラットフォーム対応

MacOS、Linux、Windowsのすべての主要プラットフォームで動作し、開発環境を選びません。

4. TypeScriptによる型安全な実装

97.7%がTypeScriptで書かれており、堅牢でメンテナンスしやすいコードベースを提供します。

技術的な実装詳細

Figma Context MCPは、以下のような技術的特徴を持っています：

カスタムURIスキーム：Figmaリソースへのアクセスを管理しやすくするカスタムURIスキームをサポートしています。

エラーハンドリングとバリデーション：堅牢なエラーハンドリングとリクエスト検証により、信頼性の高い動作を保証します。

バッチ操作のサポート：デザイン要素の効率的な処理のためのバッチ操作をサポートしています。

実際の使用方法とワークフロー

セットアップ手順

  1. Figma APIトークンの取得

    • Figmaアカウントの設定画面でAPIアクセストークンを生成
    • トークンに分かりやすい名前（例：Figma_MCP）を付けて管理

  2. サーバーの起動

    npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

  3. AIツールの設定 Claude DesktopやCursorなどの設定ファイルに以下を追加：

    {
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

実際の使用フロー

  1. FigmaでターゲットのフレームやコンポーネントをI選択
  2. 右クリックして「Copy link to selection」を選択
  3. IDEのチャット（例：Cursorのエージェントモード）を開く
  4. Figmaのリンクをペーストし、実装を依頼
  5. AIがFigmaからメタデータを取得し、コードを生成

開発者は「Cursorがデザインデータにアクセスできる場合、スクリーンショットを貼り付ける代替アプローチよりも、デザインを正確に一発で実装する能力が格段に向上する」と報告しています3。

実用的なユースケース

1. デザインからコードへの自動変換

最も一般的な使用例は、FigmaデザインからReact、Vue、Flutter、SwiftUIなどのフレームワーク向けコードを自動生成することです。例えば：

@https://www.figma.com/design/[デザインID]
このインターフェースをReact + Tailwindで再現してください。
画像とアイコンを自動的にダウンロードし、構造とスタイルを可能な限り正確に再現してください。

2. プロダクトマネジメントの自動化

興味深い応用例として、FigmaデザインからJiraのエピックやユーザーストーリーを自動生成するケースも報告されています4。複雑なFigmaデザインを6つのエピックと20のユーザーストーリーに10分で変換できたという事例があります。

3. デザインシステムの一貫性確保

デザイントークンやコンポーネントの命名規則を含むデザインシステムの情報をAIが理解することで、生成されるコードがプロジェクトの規約に従うようになります。

4. マルチフレームワーク対応

同じFigmaデザインから、異なるフレームワーク（React、Vue、Flutter等）向けのコードを生成できるため、クロスプラットフォーム開発の効率が大幅に向上します。

日本の開発現場への影響と可能性

Figma Context MCPの登場は、日本の開発現場にも大きな影響を与える可能性があります：

1. デザイナーと開発者の協業強化

従来、デザインの意図を正確に開発者に伝えることは困難でした。Figma Context MCPを使用することで、デザインの細かなニュアンスまでコードに反映させることが可能になり、両者のコミュニケーションコストが大幅に削減されます。

2. 開発速度の向上

日本企業の多くが直面している開発リソース不足の問題に対して、AIによる自動コード生成は有効な解決策となります。特に、UIの実装に多くの時間を費やしていた開発チームにとって、大幅な生産性向上が期待できます。

3. 品質の均一化

人手によるコーディングでは避けられなかった実装のばらつきが、AIによる自動生成により均一化されます。これにより、大規模プロジェクトでも一貫性のあるコードベースを維持できます。

今後の展望と課題

技術的な発展の可能性

MCPエコシステムは急速に成長しており、今後以下のような発展が期待されます：

1. マルチエージェントアーキテクチャ：複数のAIエージェントが協調してより複雑なタスクを処理

2. 認証と認可の強化：エンタープライズ環境での利用に向けたセキュリティ機能の充実

3. サーバー発見機能：利用可能なMCPサーバーを自動的に発見し、接続する仕組み

現時点での制限事項

1. ベータ版の制約：Claude Desktopでの利用は現在ベータ機能として提供されており、安定性に課題がある可能性があります。

2. APIトークンの管理：セキュリティ上、APIトークンの適切な管理が必要です。トークンをコードベースにハードコーディングすることは避け、環境変数として管理する必要があります。

3. 読み取り専用の制限：現在のところ、多くのFigma MCPサーバーは読み取り専用のアクセスに限定されています。

日本の開発現場においても、この技術を積極的に活用することで、グローバルな競争力を維持・向上させることができるでしょう。デザインからコードへの変換が「AIのUSB-Cポート」によってシームレスに行われる未来は、もうすぐそこまで来ています。

Sources

  1. GitHub - GLips/Figma-Context-MCP - Figma Context MCPの公式GitHubリポジトリ
  2. Introducing the Model Context Protocol - Anthropic公式発表（MCPの詳細）
  3. Figma Now Has a MCP Server and Here’s How to Use It - Figma MCPの使用方法に関する詳細ガイド
  4. MCP for PMs: How To Automate Figma → Jira - プロダクトマネジメントでの活用事例

最新のAIニュースを毎日お届けしています。

RSSで購読する 更新をいち早くチェックできます。

他のキーワードで探す →