GitHub Copilot Coding Agent の開発に Figma デザインを連携する
1. 背景
MCP サーバー によるデザインの連携
コーディングエージェントへの情報連携の手段として、MCP サーバーによる連携が一般的になっています。
本記事ではその中でも Figma MCP サーバーの連携手順について記載いたします。
デザインの情報はプロンプトやスクリーンショットによる画像にだけではコーディングエージェントへ正確に情報が伝わらず、以下のような問題が発生していました。
- 正確な測定値の欠如: フォントサイズ、パディング、ボーダー半径、カラーコード（HEX 値）などの正確な数値情報の欠如
- テーマ・スタイルの参照不可: デザインシステム上の変数やスタイルの情報が伝わらず、手動で修正するなどの手間が発生
MCP サーバーによる連携では、デザインの背後にある構造データ（トークン、レイヤー、制約）も連携することができます。これにより、単なる視覚情報ではなく、デザインの正確な意図に基づいたコード生成が可能になります。
2. 導入（セットアップ）
前提
本記事では下記の構成において、デザインツールからコーディングエージェントへ MCP サーバーによるデザインの連携方法を記載いたします。
- デザインツール：Figma
- コーディングエージェント：GitHub Copilot Coding Agent
2.1. Figma MCP サーバー利用のための設定
Figma を連携する MCP サーバー(以下 Figma MCP サーバー)は主に公式から提供されている MCP サーバーと、オープンソースの MCP サーバーがあります。
本記事ではオープンソースの MCP サーバーを利用した方法を記載します。
Figma MCP サーバー利用のためには、Figma のアクセストークンを発行する必要があります。
アクセストークンの発行手順は下記の通りです。
- Figma のチーム画面を開く
- 設定画面を開く (左上プロフィール > Settings)。
- セキュリティタブにある「個人アクセストークン」へ移動し、「新規トークンを作成」をクリックする。
- トークン名を入力する。
- 権限は 「File content: Read-only」が最低限必要です。
- 有効期限を設定 (期限設定推奨)する。
- 「トークンを生成」をクリック後、表示されるトークン文字列を必ずコピーし、安全な場所に保管します。
2.2. GitHub Copilot Coding Agent 側で MCP サーバーを利用するための設定
Coding Agent が Figma のデザインを参照できるように、MCP サーバーの接続設定手順を記載します。
- Github のリポジトリ設定画面(settings)を開きます。
- 「Copilot」タブから「Coding agent」を選択します。
- 「MCP configuration」に JSON 形式で接続する MCP サーバーの設定を記載します。
Figma MCP サーバーの設定は下記の通りです。FIGMA_ACCESS_TOKEN には発行した Figma のアクセストークン文字列を記載してください。{ "mcpServers": { "figma": { "type": "local", "tools":["*"], "command": "npx", "args": [ "-y", "figma-developer-mcp", "--figma-api-key=FIGMA_ACCESS_TOKEN", "--stdio" ] } } }
3. Github Copilot Coding Agent による Figma デザインの実装手順
Github Copilot Coding Agent が issue/Pull Request で Agent に Figma のデザインの実装を依頼し、機能が動作するまでの具体的な手順を説明します。
ステップ 1: Figma 上で実装したいデザインのリンクを取得する
Figma 上で作成したデザインを Agent に指示するために、対象の要素リンクを取得する必要があります。
このリンクの中にデザインの ID などが含まれており、Agent は MCP サーバーを経由してデザインを取得することができます。
要素リンクの取得方法は下記の通りです。
- Figma で対象のフレームを右クリックする。
- 「選択範囲へのリンクをコピー」を選択する。
- クリップボードにコピーされているので、メモ帳などにペーストする。
ステップ 2: issue を作成して 実装内容とデザインのリンクを記載する
GitHub リポジトリから issue を作成します。
issue の中で実装する機能の説明と、ステップ 1 で取得したデザインのリンクを指示します。
指示の内容は下記の例を参考にしてください。
issue 例 (Todo アプリのホーム画面実装):
ここでは Flutter を使用したモバイルアプリの作成を例としています。
下記のFigma のデザインを参考に、Todo リストアプリを作成してください。
https://www.figma.com/file/xyz/todo-screen?node-id=...要件:
Todo リストの一覧表示、追加・削除・編集操作ができる画面を作る
レイアウト・UI 構成は Figma のデザインを最大限再現する
必要に応じて UI 部品を新規作成し、Flutter で自然な見た目になるよう調整する
実装担当は作成した UI パーツごとに Widget 分割を意識する
Figma で作成したデザイン例:
ステップ 2: 生成されたコードを確認する
issue から Pull Request(PR) が作成され、コードの実装が完了しました。
生成されたコードを実行してデザインを確認します。
生成されたコードをビルドした画面キャプチャ:
Figma のデザイン通りに表示されていることがわかります。
各ボタンが押されたときに出る UI についても、 Figma で指定したホーム画面のカラーテーマなどをもとに自然なデザインで実装されていました。
コード生成中にエージェントが Figma を参照しているセッション:
作成された PR 例:
4. 開発フローに取り組むため工夫したこと
上記の手順で基本的には Github Copilot Coding Agent に Figma のデザインを連携できるようになったと思います。
しかし、プロジェクトで開発をしていると、指示した Figma のデザインを突然無視したり、画面を動かすと意図したものと違う動きをしてしまうことが多くありました。
そういった課題について Agent の設定やプロンプトの工夫でいくつか解決できたので、以下に共有いたします。
4.1. agents.mdファイルによるルールの明文化
リポジトリのルートに**agents.md**ファイルを配置することで、Agent がコードを生成する際のローカルルールやデザインシステムの情報をあらかじめ学習させることができます。
以下のルールを記載することで、Agent が意図と異なる行動することを幾らか防ぐことができました。
- デザインの確認方法強制: 「Figma のデザインが指示にあるときは MCP サーバーを使用して確認すること」
- デザインルールのドキュメント化: 「デザインのルールは docs ディレクトリ内の md ファイルを確認し、変更があった場合は更新すること」
4.2. 効果的なプロンプト(issue)の記述方法
issue の書き方も工夫することで、生成されるコードの品質向上や、Agent にデザインの補完をさせることができました。
- 具体的な要素への言及: 単に「デザイン通りに」ではなく、「デザインのフッター部分にあるナビゲーションバーを実装する」のように、具体的な要素名を指定します。
- Agent に一部のデザインを考えさせる: 「基本デザインは指定したものを参考に、仕様に合わせてデザインを補完して実装する」のように、あくまで参考情報としてデザインを指定することで Agent 自体にデザインを考えさせます。
5. おわりに
GitHub Copilot Coding Agent が Figma のデザインを直接参照して実装することで、デザインとコードのギャップを最小限に抑えることがわかりました。
GitHub Copilot Coding Agent とデザインの連携で悩んでいる方はぜひ試してみたください。
参考
実装をする際には以下のサイトを参考にさせていただきました。
- GitHub Copilot Coding Agent MCP サーバー設定：https://docs.github.com/ja/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp
- Figma：https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
We Are Hiring!