Figma MCP機能概要 - コード生成の仕組みと実際のレスポンス

概要

Figma MCP Serverは、FigmaデザインをAIアシスタント（GitHub Copilot、Claude等）から直接アクセスできるようにするMCP（Model Context Protocol）の実装です。デザインとコードを連携させることで、デザインシステムの構築・保守を効率化し、デザインと実装の一貫性を保ちます。

本記事では、Figma MCPの仕組みと主要機能、実際のレスポンス形式を紹介します。

Figma MCP Serverのセットアップと基本的な使い方については、前編のVisual Studio Code: GitHub Copilot Agent の Figma MCP Server セットアップで解説しました。

Figma MCPとは

Figma MCP Serverは、AIアプリケーションを外部システムに接続するオープンソース標準プロトコル「Model Context Protocol（MCP）」の実装です。MCPはUSB-Cのようにデータ接続を標準化する仕組みで、Figma MCPはこれを活用してFigmaデザインをAIエージェント（GitHub Copilot、Claude等）から直接参照できるようにします。

従来のFigma REST APIが生のJSONデータ（ノードツリー、スタイル、座標）を返すのに対し、Figma MCPはReact + Tailwindの実装コードをデフォルトで生成します。これはAIエージェントが理解しやすい標準形式で、受け取ったAIがプロジェクトの技術スタック（Vue、Angular、CSS Modules等）に自動変換します。デザイントークン、TypeScript型定義、画像アセットURL、変換指示、次のアクション提案まで含まれており、「AI支援による実装」を目的とした設計です。

詳細はFigma MCP Server - IntroductionおよびModel Context Protocol 公式サイトをご覧ください。

接続方式

Figma MCP Serverは2つの接続方式に対応しています。

インストールガイド:

• Remote Server Installation Guide
• Desktop Server Installation Guide

利用するAIクライアント（GitHub Copilot、Claude等）がローカル・リモートのどちらをサポートしているかは、MCP Catalogで確認できます。

主要な機能

Figma MCP Serverを有効化すると、以下の機能が利用可能になります。

• 選択フレームからコード生成:
  Figmaフレームを選択してコードに変換。プロダクトチームが新しいフローを構築したり、アプリ機能を反復改善する際に有用
• デザインコンテキストの抽出:
  変数・コンポーネント・レイアウトデータをIDEに直接取り込む。デザインシステムやコンポーネントベースのワークフローに特に有用
• Makeファイルのリソース取得:
  Makeファイルからコードリソースを収集し、LLMにコンテキストとして提供。プロトタイプから本番アプリケーションへの移行を支援
• Code Connectによる一貫性の保持:
  実際のコンポーネントを再利用して出力品質を向上。生成されるコードをコードベースと一貫させる

利用可能なツール一覧

Figma MCP Serverには以下のツールが含まれています。

デザインコンテキスト取得

Figmaデザインからコード生成やメタデータ抽出を行うツールです。

デザインシステム・変数

デザイントークンや変数定義を取得・管理するツールです。

Code Connect連携

Figmaコンポーネントと実装コードを紐付けるツールです。

ユーティリティ

認証情報など補助的な機能を提供するツールです。

実験的機能（アルファ版・ローカルのみ）

開発中の実験的な機能です。ローカルサーバーでのみ利用できます。

デザインからコード生成

get_design_contextツールは、Figmaノードからコンポーネントコードを自動生成します。デフォルトでReact + Tailwindコードを出力しますが、プロジェクトの技術スタックに合わせた変換が可能です。

実行例

以下のプロンプトをAIアシスタントに送信することで、Figmaデザインからコードを生成できます。

プロンプト例:

このFigmaデザインからコードを生成して:
https://www.figma.com/design/[ファイルキー]/[ファイル名]?node-id=[ノードID]

実際のレスポンス

get_design_contextツールを実行すると、以下のような形式でレスポンスが返されます。

// コンポーネントコード（React + Tailwind）
const img = "https://www.figma.com/api/mcp/asset/[アセットID]";

type ComponentProps = {
  className?: string;
  variant?: "primary" | "secondary";
};

function Component({ className, variant = "primary" }: ComponentProps) {
  return (
    <div data-node-id="[ノードID]" className="...">
      {/* コンポーネントの実装 */}
    </div>
  );
}

export default Component;

// 以下、AIエージェント向けの指示と警告
SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.
These styles are contained in the design: [デザイントークンの一覧]
Images and SVGs will be stored as constants. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.
IMPORTANT: After you call this tool, you MUST call get_screenshot to get a screenshot of the node for context.

レスポンスの解説

レスポンスには以下の要素が含まれます。

まとめ

今回は get_design_context のレスポンスを確認してみました。レスポンスの中身を理解することで、Figmaデザインからコード生成の仕組みが把握でき、AIアシスタントに対してどのように指示するのが良いか役立つと思います。

参考リソース

• Code Connect Documentation
• Figma Code Connect - GitHub
• Figma MCPサーバーの紹介 - Figma Blog