Android StudioでGithub Copilot × MCPを使って、FigmaからUIコードを爆速に自動生成してみた

はじめに

AI支援ツールの活用が進む開発現場において、MCPの活用例を検証する一環として、Androidアプリ開発でデモ実装を行いました。

本記事では、FigmaのデザインをAndroid画面に反映する際、Jetpack Compose (または XML) に落とし込む作業を、MCPを介してGitHub Copilotに自動生成させる試みを紹介します。

これにより、デザインとコードの垣根を大幅に下げ、UI実装の効率化と高精度化ができます。

導入手順と、手作業と比べた時間削減効果を共有します。

MCP (Model Context Protocol) とは？

MCP (Model Context Protocol)
AIモデル(Copilot)が外部のデータやツール(Figmaなど)と「安全」かつ「標準化された方法」で会話するためのオープンスタンダードなプロトコルです。

MCPを使うことで、IDEを経由してAIが直接FigmaのAPIから必要な構造データを取得できます。
Figmaの情報をAIに説明(画像をコピペなど)することなく、ノード情報を直接参照できるため、
数値が正確で情報精度が大幅に向上します。

また、ソースコードや画面のスクショ、トークンをチャットに貼り付ける必要がなくなるため、手間の削減、セキュリティ面でもメリットがあります。

では、実際の手順を見ていきます。

手順

環境

• Android Studio (2023.3以降推奨)
• GitHub Copilot のアカウント (個人プラン or 企業プラン)
• Node.js (npx経由でMCPサーバーを起動するため)

1. Android Studio に GitHub Copilot を導入

Android Studioに公式のGitHub Copilotプラグインをインストールします。

Settings > Plugins から "GitHub Copilot" を検索し、インストールします。

インストール後、右側のタブから「Copilot Chat」を開き、GitHubにログインします。

ダイアログが表示されるので、「Copy and Open」をクリックし、ブラウザでGitHubのDevice Codeを使って認証を行います。

【重要】個人プラン(Individual)の方は要確認
デフォルト設定では、コードスニペットが学習データとして利用される可能性があります。
Figmaのデザインデータやコードを守るため、以下の手順でオプトアウト(無効化)を推奨します。

設定手順を開く(クリックして展開)

GitHubにログインし、右上のアイコンから「Settings」を開きます。

左サイドバーの「Copilot」をクリックします。

"Allow GitHub to use my code snippets for product improvements" のチェックを OFF(外す) にします。

※ 企業利用では、管理者がポリシーを一括制御できる Business / Enterprise プランの利用が推奨されます。

2. Figmaの個人アクセストークンを取得

Figmaのマイページから 個人アクセストークン を取得します。

Figmaのホーム画面左上のプロフィールアイコンをクリックし、「設定」を選択します。

「セキュリティ」タブを開き、「個人アクセストークン」内の「新規トークンを作成」をクリックします。

新規トークン作成ページで、任意のトークン名を入力し、read-only 権限を付与して「トークンを作成」をクリックします。

発行されたトークンは一度しか表示されないため、必ず控えておいてください。

トークンの取り扱いについて
発行するトークンは、作成時に許可した権限を持ちます。
必要最低限の権限のみを付与し、漏洩しないよう適切に管理してください。
また、.gitignore に設定ファイルを追加するなど、Gitへのコミット漏れには十分注意してください。

3. Android Studio へのMCPサーバーの設定

Settings > Tools > GitHub Copilot > Model Context Protocol に移動します。
(設定タブの検索欄から"mcp"と検索することも可能です)

Configureボタンをクリックすると、設定ファイル(mcp.json)が開きます。

取得したトークンを使って、以下のように設定ファイルを記述します。

{
    "servers": {
        "figma-dev-mode": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp",
                "--figma-api-key=your_figma_api_key",
                "--stdio"
            ]
        }
    }
}

your_figma_api_key の部分に、先ほど取得したFigmaの個人アクセストークンを貼り付けてください。

これで、Android Studio内のCopilotがFigmaにアクセスする準備が整いました。

補足: npx figma-developer-mcp について
figma-developer-mcp は、FigmaのAPIとやり取りするためのオープンソースのMCPサーバーです。
npx コマンドを使うことで、ローカルにインストールせずに実行できます。

https://github.com/GLips/Figma-Context-MCP

4. Figmaでテスト用の画面を作成

検証用にシンプルな「ログイン画面」を作成します。

作成後、コード化したいフレームやグループのURLを控えておきます。
https://www.figma.com/.../app?node-id=... のような形式のURLです。

5. Copilotでコード生成を実行

Android Studioで任意のプロジェクトを作成します。
今回は新規アプリを作成するため、テンプレートの「Empty Activity」を選択しました。

右側のタブから「Copilot Chat」を開きます。

Copilot Chatで以下のように指示します。

このURLのデザインをもとに、Jetpack ComposeでAndroidのログイン画面のコードを生成してください。
UIコンポーネントはMaterial3を使用し、Preview関数も作成してください。

対象URL: https://www.figma.com/.../app?node-id=...

このとき、左上のクリップマークからコンテキストソースを追加します。
検索窓で「figma」と入力し、get-figmadata を選択します。

実行すると、MCP経由でFigmaのレイヤー構造が解析され、コードが生成されます。

生成されたコードとPreview画面は以下の通りです。

MCPサーバーの設定などの下準備を一度行えば、5分もかからずにコードが生成されます。

初めてMCPを使う場合は、アクセス許可が求められることがありますが、一度許可すれば次回以降はスムーズに動作します。

検証結果: 時間はどの程度短縮できたか

「Figmaを見て人間が一から実装した場合」の所要時間を検証してみます。

計測条件

• 対象: 上記のFigmaでデザインされた画面
• 実装範囲: UI実装のみ（ロジック除く）、新規プロジェクト作成から完了まで
• 計測者: Android開発半年未満のエンジニア（私）

手動実装の所感

私自身、Android開発歴は半年未満であり、Jetpack Composeも学習中です。
そのため、今回はXMLレイアウトでのUI実装を行いました。
思い出しながらの記述となり、簡単な内容でも調査しながらの実装となりました。

結果、手動実装では約120分かかりました。

※この手動実装では、マージンやパディングなど、Figmaデザインへの完全な調整は行っていません。

新規実装のデモであったため、ConstraintLayoutの中に各種Viewを配置し、Figmaデザインと似た位置決めを行い、idの命名もシンプルにするなど、手動のたたき台を作成するのにかかった時間が約120分です。

実際の現場ではここからさらに微調整が必要なため、より多くの時間がかかることが予想されます。

同じチームのエンジニアに確認したところ、「UIだけの実装でも半日程度はかかりそう」とのことでした。

結果比較

手法	所要時間	備考
手動実装	約120分	色、配置等の微調整に時間がかかる
MCP × Copilot	約 5分	指示記述(1分) + コード生成(4分) + 微調整
短縮効果	約 85% 削減	🚀

考察

Figma × MCP を使ったCopilotによるコード生成が役立つシーンを考えてみます。

任せられる内容:

• 生成したコードを活用し、その場で実機のプレビューを確認してデザインの調整ができる
• 色や大きさをFigmaデザインそのままに反映できるため、UI実装の初期段階での時間短縮ができる
• Figmaデザインの微調整があった場合でも、再度依頼することで迅速にコードを更新できる

注意が必要な内容:

• 生成されたコードはあくまで「たたき台」であり、最終的な品質は開発者が担保する必要がある
• 既存のリソースやスタイルがある場合は、それらに合わせて手動で調整する必要がある

まとめ

Android Studio上でCopilotとMCPを使ってFigma連携を試してみました。
すべてを任せることはできませんが、「UI実装のたたき台」の作成には効果的です。

AIに任せられる範囲をうまく見極め、MCPを活用していきましょう。

この爆速体験をぜひ試してみてください。