Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
GitHubは2026年3月13日、VS Code上のGitHub CopilotからFigma MCPサーバーを利用し、実装済みのライブUIを編集可能なFigmaデザインレイヤーとして取り込める機能を紹介しました。従来の「Figmaからコードへ」という一方向の連携に加え、コードで実装した画面をFigmaへ戻し、デザイナーがレビュー・修正できる往復ワークフローが可能になります。
ただし、これはスクリーンショットを貼る機能でも、AIが正式な完成デザインを無条件に自動生成する機能でもありません。ブラウザーで表示したUIをFigma上で編集可能なレイヤーとして再構成し、デザインレビューや反復作業に使うための機能です。
As an Amazon Associate I earn from qualifying purchases.
Free tools Windows power users keep installed
One-click scans. No signup required.
何が新しくなったのか
GitHubの発表では、GitHub CopilotとFigma MCPサーバーの連携がVS Codeで強化されたことが示されています。
これまでもFigma MCPサーバーは、Figmaのフレーム、コンポーネント、変数、レイアウトなどのデザインコンテキストをAIエージェントへ渡し、コード生成を支援していました。今回の重要な追加点は、反対方向、つまりコードからFigmaへUIを送れることです。
#1 Best Overall
Figmaデザイン
↓ デザインコンテキストを取得
VS Code + GitHub Copilot
↓ コード生成・修正・実行
ブラウザー上のライブUI
↓ リモートFigma MCPサーバー経由でキャプチャ
Figmaの編集可能なデザインレイヤー
↓ デザインレビュー・修正
コードへ反映ローカルホスト、ステージング、プロダクションなど、ブラウザーで確認できるUIを対象に、ページ全体、個別要素、画面状態、複数画面のフローをFigmaへ送信できます。GitHubの発表では、Figma MCPサーバーのGitHub Copilot CLI対応は「対応予定」とされています。現時点の対応状況は公式情報で確認してください。
「デザインレイヤーを生成する」とは
生成されるのは、ブラウザーの表示を単純な画像にしたものではありません。実際にレンダリングされたUIを読み取り、Figma Designファイル内で編集できるデザインレイヤーとして扱えるようにします。
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →- スクリーンショットを背景画像として置くだけではない
- HTMLをそのままFigmaへ貼り付ける機能でもない
- テキスト、レイアウト、要素などをFigma上で確認・修正できる
したがって、実装済みの画面をデザイナーが再調整できる構造化されたデザイン素材、と考えると分かりやすいでしょう。ただし、編集可能であることと、既存のデザインシステムに完全に一致することは別です。レイヤー名、Auto Layout、コンポーネント化、変数・トークン、フォント、レスポンシブ状態などは人間による確認が必要です。
Figmaの公式ガイドは、デザインコンテキストの取得、ライブUIのデザインレイヤー化、Code Connectの活用を案内しています。既存コンポーネントやCode Connectが整備されているほど、デザインと実装を近い形で扱いやすくなります。
利用に必要な環境
- VS Code
- VS Codeで有効化したGitHub Copilot
- Figmaアカウント
- MCPに対応したVS Code環境
- コードからライブUIを送る場合は、原則としてリモートFigma MCPサーバー
- ブラウザーからアクセスできる実行中のUI
VS Code本体は公式サイトから入手できます。Figmaの公式設定手順は、VS Codeをインストールし、GitHub Copilotを有効にした状態でMCPサーバーを追加する流れです。
リモート版とデスクトップ版の違い
| 種類 | 特徴 | 用途 |
|---|---|---|
| リモートMCPサーバー | Figmaがホスト。URLはhttps://mcp.figma.com/mcp |
一般ユーザー向けの推奨選択肢。ライブUIのFigma取り込みに必要 |
| デスクトップMCPサーバー | Figmaデスクトップアプリを介してローカルで動作 | 特定の組織・エンタープライズ環境など |
Figmaは一般的にはリモート版を推奨しています。デスクトップ版はFigmaデスクトップアプリを起動し、Dev ModeからMCPサーバーを有効化する構成です。ライブUIを編集可能なデザインレイヤーとして取り込む機能には、Figmaのガイド上、リモートサーバーが必要とされています。
Recommended Free Tools
VS CodeにFigma MCPサーバーを設定する
推奨：リモートMCPサーバー
- VS Codeを起動します。
- コマンドパレットを開きます。macOSは
Cmd + Shift + P、WindowsはCtrl + Shift + Pです。 MCP: Open User Configurationを検索して実行します。- 表示された
mcp.jsonに次の設定を追加します。
{
"inputs": [],
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}- ファイルを保存します。
- MCPサーバー名の上に表示されるStartを押します。
- 外部ブラウザーでFigmaアカウントの認証を完了します。
- VS Code上でサーバーが稼働状態になったことを確認します。
設定の細部や画面表示はVS CodeおよびFigmaの更新で変わる可能性があります。問題がある場合はFigma公式のVS Code設定ガイドを基準に確認してください。
デスクトップ版を使う場合
- Figmaデスクトップアプリを起動し、Figma Designファイルを開きます。
- キャンバス上で何も選択していない状態にします。
- ツールバーからDev Modeへ切り替えます。
- 右サイドバーでMCPサーバーを有効にします。
- 表示されたサーバーURLをコピーします。
- VS CodeのコマンドパレットでAdd serverを検索し、HTTPを選択します。
- 通常は
http://127.0.0.1:3845/mcpを登録し、サーバーIDを入力します。
Figmaのデザインをコードへ渡す手順
- Figma Designで対象のフレームまたはレイヤーを選択します。
- 対象フレーム・レイヤーへのリンクをコピーします。
- VS CodeのGitHub Copilotチャットまたはエージェントにリンクを貼り付けます。
- 実装したい内容を自然言語で指示します。
- CopilotがFigma MCPサーバーを通じて対象ノードの情報を取得します。
- 既存コードベース、コンポーネント、変数に合わせて実装・修正します。
単に「この画面を作って」と頼むより、利用する既存コンポーネント、対応するデザイントークン、必要なレスポンシブ幅、変更してよい範囲を明記したほうが、プロジェクトのルールから外れにくくなります。
コードからFigmaへUIを送る手順
- VS Codeからアプリのローカル開発サーバーを起動します。
- Copilotに、対象UIを新しいFigmaファイルとしてキャプチャするよう依頼します。
- Copilotの案内に従ってブラウザーを起動するか、アクセス用リンクを開きます。
- キャプチャツールバーでページ、要素、画面状態、またはフローを選びます。
- キャプチャが完了したことをCopilotへ伝えます。
- Copilotが提示したリンクから作成されたFigmaファイルを開きます。
- Figma上でレイヤー、レイアウト、コンポーネント、テキストなどを確認します。
ライブUIの取り込みを試す場合は、まずMCP設定がリモートサーバーになっているかを確認してください。Figmaの公式ガイドでは、対応クライアントとしてVS Codeのほか、Claude CodeやOpenAI Codexなども案内されています。
実務向けのプロンプト例
以下は固定の公式文言ではなく、対象と目的を明確にするための例です。
Free tools Windows power users keep installed
One-click scans. No signup required.
アプリのローカルサーバーを起動し、現在のトップページUIを新しいFigmaファイルとしてキャプチャしてください。デスクトップ幅とモバイル幅の両方を確認し、主要なインタラクション状態も含めてください。このFigmaフレームのデザインコンテキストを取得し、現在の実装との差分を整理してください。既存のコンポーネント、変数、余白、タイポグラフィを優先して実装を修正してください。現在の設定画面だけをFigmaへ送信してください。ページ全体ではなく、フォーム、バリデーションエラー状態、送信成功状態を別々にキャプチャしてください。MCPが担う役割
MCPは、AIエージェントが外部のデータやツールへアクセスするための標準化されたインターフェースです。Figma MCPサーバーは、Figmaファイルの構造化された情報をAIクライアントへ渡し、対応する操作を通じてFigma側へコンテンツを書き戻します。
扱われる情報には、コンポーネント、変数、レイアウト、選択中のフレーム、ライブUI、Code Connectに関連するコンポーネント情報などが含まれます。AIがデザインの見た目だけでなく、既存の設計資産や実装上の対応関係を参照できる点が、単純な画像認識との違いです。
プラン、利用回数、権限に注意
Figmaの公式資料では、リモートMCPサーバーはすべてのシート・プランで利用可能と説明されています。ただし、利用可能であることと無制限であることは別です。プランやシート種別によってMCPツールの呼び出し回数やレート制限が異なります。
Figmaの開発者ドキュメントと料金ページには、月間・日次の呼び出し上限や、1分あたりの制限が掲載されています。資料上は、20回/月、200回/日・10回/分、200回/日・15回/分、600回/日・20回/分といった区分が示されています。また開発者ドキュメントには、Starterや一部のView・Collabシートについて別の制限説明もあるため、契約中のプランとシート種別を最新ページで確認してください。
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →GitHub Copilot側もプラン、アカウント状態、ロールアウト状況によって利用条件が異なります。GitHubのプランページでは、Copilot Freeに2,000回のコード補完と50回のチャットリクエストという限定枠が案内されています。今回のワークフローに有料契約が必須だと一律に断定するのは避け、実際のアカウントでMCPとエージェント機能が利用できるか確認するのが安全です。
実務で効果が出やすい使い方
- 実装済み画面をデザイナーがFigma上でレビューする
- ステージング環境のUIをデザインと比較する
- 仕様変更後の画面差分をFigmaに戻して認識を合わせる
- 未整理の画面状態をFigma上に並べて確認する
- 新機能の初期実装を短時間でレビュー可能な形にする
- Code Connectや既存コンポーネントを中心にデザインと実装を近づける
特に、デザインとコードを頻繁に往復するチーム、Figmaのデザインシステムが整備されているチーム、ローカルUIをデザイナーに確認してもらう機会が多いチームに向いています。
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.限界と注意点
完成デザインの自動生成ではない
取り込まれるのは、その時点でブラウザーに表示されている実装の状態です。Figma上で編集できても、正式なデザイン承認済みの成果物とは限りません。デザイナーはAuto Layout、レイヤー名、コンポーネント、変数、フォント、アクセシビリティを確認し、必要に応じて正式なデザインへ統合する必要があります。
状態ごとに準備が必要
未入力、入力済み、バリデーションエラー、ローディング、空状態、データあり、権限エラー、モバイル表示、ダークモードなどは、ブラウザーで実際に表示して個別にキャプチャします。1枚の画面を送っただけで、すべての状態がFigmaに再現されるわけではありません。
デザインシステムとの統合には人手が要る
既存コンポーネントや変数と生成レイヤーが自動的に完全一致するとは限りません。ページ全体を一度に送るより、コンポーネント単位・状態単位で確認し、既存の命名やトークンへ整理するほうが実務では扱いやすい場合があります。
機密データを送らない
リモートMCPサーバーを使う場合は、UIやFigmaデータの取り扱いが組織のセキュリティ・コンプライアンス要件に合うか確認してください。個人情報や顧客データを含む本番画面ではなく、マスク済みのステージング環境を使い、Figmaファイルの共有権限も確認します。Copilotのデータ利用やオプトアウトについては、管理者が現行の公式説明を確認してください。
トラブルシューティング
MCPサーバーが起動しない
mcp.jsonのJSON構文を確認する。- URLが
https://mcp.figma.com/mcpになっているか確認する。 - VS Codeを再起動する。
- Startをやり直す。
- 外部ブラウザーでFigma認証を完了する。
- VS CodeでGitHub Copilotが有効か確認する。
Figmaのレイヤーを取得できない
- フレームまたはレイヤーのURLを使っているか確認する
- 対象ファイルへの権限を確認する
- リンクをVS CodeのCopilotチャットへ直接渡す
- MCPサーバーがRunning状態か確認する
UIをFigmaへ送信できない
まずリモートMCPサーバーを使っているか確認します。その後、ローカル開発サーバーが起動しているか、ブラウザーで対象URLを開けるか、localhostへのアクセスをファイアウォールが遮断していないかを確認してください。キャプチャツールバーで対象ページを選択しているか、Figma認証が切れていないか、利用回数制限に達していないかも確認します。
他の方法との比較
| 方法 | 強み | 弱み |
|---|---|---|
| Figma MCP + VS Code | デザインとコードを同じ開発フローで往復できる | 設定、権限、レート制限がある |
| Figma MCP + 他のクライアント | Cursor、Claude Code、Codexなどを選べる | 認証、操作、料金体系が統一されていない |
| スクリーンショット共有 | すぐ使える | 編集可能なレイヤーにならない |
| 手動でFigmaを再制作 | 構造と品質を管理しやすい | 時間がかかる |
| 独自プラグイン・連携 | 組織固有のワークフローに対応できる | 開発・保守コストが高い |
Figmaを使ったデザインレビューが少ない場合や、UIが機密性の高い場合は、従来のスクリーンショットや手動レビューのほうが適しています。逆に、実装とデザインの差分確認を繰り返すチームなら、MCP導入の効果を見込みやすいでしょう。
まとめ
今回の変更は、Figma MCPサーバーを「FigmaのデザインをAIに読ませる仕組み」から、デザインと実装を往復するための連携基盤へ近づけるものです。VS CodeとGitHub Copilotで実装したライブUIを、編集可能なFigmaレイヤーとしてレビューできるため、デザイナーと開発者の認識合わせを短縮できます。
一方で、生成物は完成デザインの保証ではありません。リモートMCPサーバーの要件、FigmaとCopilotの利用枠、組織のデータポリシーを確認し、状態ごとのキャプチャとデザイナーによる最終レビューを前提に導入するのが現実的です。
Quick Recap
