Wain AI/Tech Blog

世界のAIニュースブログ

広告
広告スペース（728x90）
Guide
4分

Figma Dev Mode MCP Server登場！デザインからコード生成が革命的に進化

FigmaがDev Mode MCP Serverのベータ版を発表。Model Context Protocolを活用し、デザインデータをAIコーディングツールに直接提供。CursorやVS Codeでワンショット実装が可能に。

FigmaMCPAI-developmentdesign-toolsCursorVS Codedevelopment-efficiency
Figma Dev Mode MCP Server登場！デザインからコード生成が革命的に進化

Figmaが革新的な新機能を発表した。デザインとコードの架け橋となる「Dev Mode MCP Server」が、ついにベータ版として登場したのだ。これは開発者たちにとって非常に重要な進化と言える。

MCPとは何か？開発者必見の新標準

Model Context Protocol（MCP）とは、AIシステムがソフトウェアアプリケーションやツール、プラットフォームに接続するための標準規格である1。AnthropicのClaudeチームが中心となって開発したこの規格により、LLMがより豊富なコンテキストを得られるようになった。

今回Figmaが発表したDev Mode MCP Serverは、このMCPを活用してFigmaのデザインデータをAIコーディングツールに直接提供する画期的なツールである。VS CodeのGitHub Copilot、Cursor、Windsurf、そしてClaude Codeなどで利用可能だ1。

なぜこれが革命的なのか

従来、デザインからコードを生成する際は、スクリーンショットを撮ってAIに渡すか、APIレスポンスをチャットボットに投げるくらいしか方法がなかった。しかし、この方法では以下の問題があった：

  • AIツールがコンポーネントを特定するのに時間がかかる
  • 一致するものが見つからない場合、新しいコンポーネントを作成してしまう
  • デザインの意図や詳細な情報が失われる

Figma Dev Mode MCP Serverは、これらの問題を一挙に解決する。具体的な変数、コンポーネント、スタイルへの参照を提供することで、生成されるコードがより正確で効率的になり、LLMのトークン使用量も削減される1。

提供される4つの強力なコンテキスト

1. パターンメタデータ

Code Connectと連携し、使用されているコンポーネントの正確なコードファイルパスを提供する。変数にコード構文が設定されている場合は、その正確なコードもLLMに渡される1。

2. スクリーンショット

デザインの高レベルビューを提供し、画面のシーケンスやレスポンシブコンテキストを理解するのに役立つ。これは単なるピクセルの複製ではなく、デザインの意図を伝えるものである1。

3. インタラクティビティ

ReactとTailwindを使用したデフォルトのコード表現を提供。これは完全に動作するReact表現となっており、LLMがコードベースに組み込む際に活用できる1。

4. コンテンツ

テキスト、SVG、画像、レイヤー名、アノテーションなど、デザインに含まれる暗黙的な情報も抽出。これによりLLMは、インターフェースをデータモデルとどう結びつけるかを導き出せる1。

実際の使い方は簡単

ステップ1：MCP Serverを有効化

Figmaデスクトップアプリを最新版に更新し、左上のFigmaメニューから「Preferences」→「Enable Dev Mode MCP Server」を選択する。サーバーはhttp://127.0.0.1:3845/sseでローカルに実行される2。

ステップ2：IDEの設定

VS Codeの場合は、settings.jsonに以下を追加する2：

"chat.mcp.discovery.enabled": true,
"mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
},
"chat.agent.enabled": true

ステップ3：デザインからコード生成

2つの方法でFigmaデザインのコンテキストを提供できる：

  • 選択ベース：Figmaでフレームやレイヤーを選択し、クライアントに実装を依頼
  • リンクベース：FigmaのリンクをコピーしてクライアントにURLで実装を依頼2

GitHubで7,800以上のスターを獲得している「Framelink Figma MCP」は、Figma APIのレスポンスを簡素化し、最も関連性の高いレイアウトとスタイリング情報のみをモデルに提供する3。

このツールを使えば、CursorなどのAIコーディングツールでFigmaのリンクを貼り付けるだけで、デザインを正確に実装できる。スクリーンショットを貼り付けるよりもはるかに精度が高い3。

日本の開発者への影響

この技術により、日本の開発現場では以下のような変化が期待できる：

  1. デザインシステムの価値向上：既存のデザインシステムへの投資が、AIによるコード生成でも活用される
  2. 開発速度の大幅向上：デザインからコードへの変換時間が劇的に短縮
  3. 品質の一貫性：デザイントークンやコンポーネントが正確に反映される

特に、日本企業が重視する「品質」と「効率性」の両立が可能になるのは大きな意味を持つ。

今後の展開

Figmaは今後数ヶ月で以下の機能を追加予定である1：

  • リモートサーバー機能
  • より深いコードベース統合
  • アノテーション、Grid対応
  • より簡単なCode Connect体験

これはデザインツールとAI開発ツールの融合の始まりに過ぎない。今後、より多くのツールがMCPに対応し、開発ワークフローがさらに効率化されることが予想される。

開発者の皆様には、今すぐFigma Dev Mode MCP Serverを試してみることを推奨する。デザインからコードへの変換が、これまでにない速度と精度で実現できるようになった。

Sources

  1. Introducing our Dev Mode MCP server: Bringing Figma into your workflow - Figma公式ブログ（2025年6月4日）
  2. Guide to the Dev Mode MCP Server - Figma公式ヘルプセンター
  3. Framelink Figma MCP Server - GitHub（コミュニティ製MCPサーバー）