Figma MCPサーバーがVS Codeからデザインレイヤーを生成可能に
GitHub CopilotユーザーがFigma MCPサーバーを介して、VS CodeからFigmaのデザインコンテキストをコードに取り込んだり、レンダリングされたUIをFigmaに編集可能なフレームとして送信したりできるようになり、デザインとコードの連携ワークフローが強化された。
キーポイント
Figma MCPサーバーとGitHub Copilotの連携
GitHub CopilotユーザーがFigma MCPサーバーに接続することで、Figmaのデザインコンテキストをコードに取り込んだり、レンダリングされたUIをFigmaに編集可能なフレームとして送信したりできるようになった。
接続されたワークフローの実現
デザインからコードを生成し、UIをFigmaに送り返して反復し、更新をコードベースに取り戻すという接続されたワークフローをサポートする。
利用可能な環境と対象者
この機能は現在VS Codeで利用可能で、Copilot CLIにも近日中に提供される予定であり、GitHub Copilotサブスクリプションを持つすべての開発者が利用できる。
リモートMCPサーバーの要件
編集可能なフレームとしてUIをFigmaにキャプチャするには、リモートMCPサーバーが必要となる。
影響分析・編集コメントを表示
影響分析
この連携により、デザイナーと開発者の間のワークフローが大幅に効率化され、デザインからコードへの変換とその逆のプロセスがシームレスになる。AI支援開発ツールとデザインツールの統合が進み、製品開発のスピードと品質向上に寄与する可能性が高い。
編集コメント
デザインと開発の間の長年の課題である「デザインからコードへの変換」と「コードからデザインへのフィードバック」をAIを介して双方向に解決する画期的な連携。実際の開発現場での生産性向上に直結する実用的な機能拡張と言える。
改善版翻訳文
GitHub Copilotユーザーは、Figma MCPサーバーに接続して、デザインコンテキストをコードに取り込んだり、レンダリングされたUIを編集可能なフレームとしてFigmaに送信したりできるようになりました。これらの機能を組み合わせることで、連携されたワークフローが実現します。デザインからコードを生成し、UIをFigmaに送り返して繰り返し改善し、更新内容をコードベースに反映させるという流れです。この機能は本日よりVS Codeで利用可能で、Copilot CLIにも近日中に追加される予定です。
仕組み
Figma MCPサーバーとGitHub Copilotの使い始めは簡単です：
- Figma MCPサーバーをインストールします。
- Figmaアカウントを接続します。
- Copilotを使用して、Figmaからデザインコンテキストをコードに取り込むか、レンダリングされたUIからFigmaに編集可能なフレームを作成します。
この機能を利用できるユーザー
GitHub Copilotのサブスクリプションをお持ちの開発者なら、誰でもFigma MCPサーバーに接続できます。これはすべてのFigmaシートとプランで利用可能です。UIを編集可能なフレームとしてFigmaに取り込むには、リモートMCPサーバーが必要です。
Figma MCPサーバーについて詳しく知る。
GitHubコミュニティ内で議論に参加する。
この投稿「Figma MCPサーバーがVS Codeからデザインレイヤーを生成できるようになりました」は、The GitHub Blogで最初に公開されました。
原文を表示
GitHub Copilot users can now connect to the Figma MCP server to both pull design context into code and send rendered UI to Figma as editable frames. Together, these capabilities support a connected workflow: generate code from a design, send your UI back to Figma for iteration, and pull updates back into your codebase. This feature is available today in VS Code and coming soon to Copilot CLI.
How it works
Getting started with the Figma MCP server and GitHub Copilot is simple:
Install the Figma MCP server.
Connect your Figma account.
Use Copilot to pull design context from Figma into code or create editable frames in Figma from your rendered UIs.
Who can use this feature
Any developer with a GitHub Copilot subscription can connect to the Figma MCP server. This is available on all Figma seats and plans. Capturing UI to Figma as editable frames requires the remote MCP server.
Learn more about the Figma MCP server.
Join the discussion within GitHub Community.
The post Figma MCP server can now generate design layers from VS Code appeared first on The GitHub Blog.
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み