Figmaが公式にMCPに対応　外部AIツールとの連携が可能に

デザインツールのFigmaに、Model Context Protocol（MCP）を活用したベータ版の新機能「Dev Mode MCP server」が追加されました。

これにより、Figmaと外部のAIツールが密接に連携できるようになります。

The Dev Mode MCP Server is now available in beta. Access Dev Mode data directly in your agentic coding workflow

→ VS Code with Copilot
→ Cursor
→ Windsurf
→ Claude Code pic.twitter.com/tPW5SpYYeQ

— Figma (@figma) June 4, 2025

FigmaがMCPに対応

近年では、GitHub CopilotやCursorといった、AIを活用したコーディングエージェントの活用が広まっています。

これまで、AIツールにFigma上のデザインの情報を提供してそのデザインを実装してもらうには、デザインのスクリーンショットやAPIレスポンスをAIに送信するという方法しかありませんでした。

AI（LLM）は既存の訓練データからコードを生成できますが、十分なコンテキストなしでは、既存のコーディングスタイルや設計方針と一致しない場合があります。

コードベースの構造、フレームワーク、用語、ワークフローなどの情報をAIが理解するためには、スクリーンショットだけでなく追加のコンテキストが不可欠です。

MCPという新しいプロトコルの登場により、デザインの情報をより直接的かつ正確にAIに渡せるようになりました。

Turn your designs directly into code using @figma's Dev Mode MCP server in @code - now available in open beta! pic.twitter.com/x81tszWxzp

— Visual Studio Code (@code) June 4, 2025

MCPは、開発者がAIと情報源やツールを接続するためのプロトコルです。

MCPを使うことで、AIがさまざまなデータやツールと単一のプロトコルで接続でき、シンプルで信頼性の高い方法でAIシステムが必要なデータにアクセスできるようになります。

AIとツールの未来を変える？MCP（Model Context Protocol）について解説！

Clauseを開発するAnthropicが、オープンソースのMCP（Model Context Protocol）を発表しました。MCPは、さまざまなデータやツールとAIを接続するためのプロトコルです。この記事では、MCPについて詳しく紹介します。

2024年12月3日

今回、FigmaがMCPに公式に対応したと発表されました。

今回発表されたFigmaの「Dev Mode MCP server」は、デザイン情報をAIツールに提供し、設計意図が正しくコードに反映されるよう支援します。

MCPに対応したことで、Figmaと外部のAIコーディングツールと簡単に連携できるようになります。

記事執筆時点では、FigmaのMCPは次のツールに公式対応しています。

• VS CodeのGitHub Copilot
• Cursor
• Windsurf
• Claude Code

MCPはオープンな規格なので、MCPに対応していればこれ以外のAIツールとも連携できます。

Dev Mode MCP serverは現在、ベータ版として提供されており、今後さらに機能が追加される予定です。

FigmaのMCPサーバーで何ができる？

FigmaのDev Mode MCP serverを利用することで、デザインとコードの一貫性を保ちながら、コード生成プロセスを効率化でき、生成されるコードの品質や精度も向上します。

デザインデータを実際のコードに落とし込む作業では、スクリーンショットで得られるような視覚的な情報だけでなく、設計の背後にある意図も重要です。

FigmaのDev Mode MCP serverは、デザインからAIがプロダクトを実装するときに役立つ、いくつかの情報を提供します。

パターンメタデータ

UIデザインでは、プロダクトにおけるデザインのルールやツールをまとめた「デザインシステム」が使われることがあります。

デザインシステムを利用しているプロダクトでは、そのコンポーネント、変数、スタイルなどをコードに反映させることが求められます。

FigmaのMCPサーバーは、こうしたパターンを直接AIに伝えることで、高い精度と効率でコードを生成でき、保守性も向上します。

例えば、赤色の矩形をスクリーンショットとしてAIに渡した場合、AIはその色を多くの似たようなトークンから探し出さなければならないかもしれません。

また、同じ色であるはずの部分が、微妙に異なるカラーコードで実装されてしまう可能性もあります。

しかし、FigmaのMCPサーバーを使うと、AIに正確なトークン名を提供できるため、デザインシステムに合致したコードを生成できるようになります。

スクリーンショット

インタラクティブな要素を含むデザインの全体像やセクションの流れを理解するためには、メタデータだけでは十分でない場合があります。

FigmaのMCPサーバーでは、スクリーンショットを利用することで、デザイン全体の流れや関係性の視覚的な情報をAIに伝えられます。

インタラクティブ性（疑似コード）

Figma Dev Mode MCP serverは、Figmaで定義されたインタラクティブな動作やコードベースと連動する疑似コードも提供します。

とくに状態管理を含むUIコンポーネントなどのコードをより正確に生成できるようになります。

コンテンツ

テキスト、SVG、画像、レイヤー名、注釈などのデザイン内のコンテンツも、AIが正確なコードを生成する上で重要な情報源になります。

これらのコンテンツを活用することで、設計意図をより具体的にAIに伝えることができます。

Figma Dev Mode MCP Serverを使うには？

記事執筆時点では、FigmaのDev Mode MCP serverを利用するにはDevまたはFullのシートが必要です。

まとめ

デザインツールのFigmaに、Model Context Protocol（MCP）を活用したベータ版の新機能「Dev Mode MCP server」が追加されました。

FigmaのDev Mode MCP serverを利用することで、デザインとコードの一貫性を保ちながら、コード生成プロセスを効率化でき、生成されるコードの品質や精度も向上します。

参考リンク

• Introducing our Dev Mode MCP server: Bringing Figma into your workflow | Figma Blog