こんにちは。デザイン事業部エンジニアの鶴若です。
デザインと実装の分断は、コーディングの非効率性や手戻りの原因となります。この課題を解決する手段として、FigmaとエディタをMCPサーバーで連携させ、デザインデータから直接コードを生成する手法が求められるようになります。本記事では、その連携を実現するための具体的な設定方法について説明していこうと思います。
Figma側での設定
右のサイドバー内のMCP serverのStatusをDisabledからEnabledに変更します。
VSCode側での設定
前提
GitHub Copilotの利用が前提になりますので、GitHub アカウントの作成しVSCode上でCopilotを利用出来るように設定をしてください。
設定の追加
⌘ + ,で設定画面を開きMCPで検索します。
Chat › Mcp › Discoveryの[settings.jsonで編集]を開き下記を追加します。
"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
MCP Servers for agent modeの利用
https://code.visualstudio.com/mcp
リスト内のFigmaから「Install Figma」ボタンを押すことで自動でvscodeに追加されます。
サーバーの起動
⌘ + Shift + Pでコマンドパレットを開く- [MCP: サーバーの一覧表示]を選択
- [Figma Dev Mode MCP]を選択
- [サーバーの起動]を選択
統合ターミナル に下記のような文言が表示されたら起動成功です。
Claude Codeでの設定
以下の手順で登録、確認、起動を行います。
登録
claude mcp add --transport sse [登録名] [URL] claude mcp add --transport sse figma-mcp http://127.0.0.1:3845/sse
確認
ターミナルで
claude mcp list
を実行し下記が表示されたら登録は成功です。
figma-mcp: http://127.0.0.1:3845/sse (SSE)
サーバーの起動
下記のコマンドで起動します。
# Claude Code起動 claude # mcp一覧表示 /mcp │ Manage MCP servers │ │ ❯ 1. figma-mcp ✔ connected · Enter to view details
MCPサーバーとの連携
⌥ + ⌘ + Bでcopilotのチャットツールバーを開きます。
プロンプトの例
選択ベース
左サイドバーのレイヤー名かオブジェクトを選択します。
選択中のオブジェクトをベースにコンポーネントを生成してください。 ## 条件： - **形式**: React - **コンポーネント名**: `PrimaryButton` - **ファイル名**: `PrimaryButton.tsx` - **言語**: TypeScript - **スタイリング**: CSS Modulesを使用し、ファイル名は `PrimaryButton.module.css` とする - **Props**: - `label` (string型): ボタンに表示されるテキスト - `onClick` (関数型): ボタンクリック時に実行される関数 - **その他**: - `button` タグを使用すること - Storybook用のファイルも `PrimaryButton.stories.tsx` として生成してほしい
リンクベース
左サイドバーのレイヤー名かオブジェクトを選択中に ⌘ + L または、右クリックし[Copy link to selection]でリンクをコピーします。
[ここにFigmaの選択範囲へのリンクを貼り付け] このデザインをベースにコンポーネントを生成してください。 ## 条件： - **形式**: React - **コンポーネント名**: `PrimaryButton` - **ファイル名**: `PrimaryButton.tsx` - **言語**: TypeScript - **スタイリング**: CSS Modulesを使用し、ファイル名は `PrimaryButton.module.css` とする - **Props**: - `label` (string型): ボタンに表示されるテキスト - `onClick` (関数型): ボタンクリック時に実行される関数 - **その他**: - `button` タグを使用すること - Storybook用のファイルも `PrimaryButton.stories.tsx` として生成してほしい
今回は、FigmaとエディタをMCPサーバーで連携させる方法をご紹介しました。設定にはいくつかの手順が必要ですが、一度環境を構築すれば、デザインから実装への流れが格段にスムーズになることが実感できるはずです。この記事を参考に、ぜひ日々の業務における効率化に取り組んでみてください。
簡単30秒