Figma MCPを使用してアプリのUI作成を効率化しよう

本多啓路

開発

デザイン

本多啓路

最終更新日2026/03/31 投稿日2026/03/31

はじめに

こんにちは、NX開発推進部プロダクト開発第1グループの本多啓路です。 Androidエンジニアとして日々開発を行っております。

最近はAIを活用して開発を行うことが日常茶飯事になってきました。そんな中で特に変わったなと感じるのはFigma MCPを使用したアプリのUI作成です。今回は、Android StudioでFigma MCPを利用するための環境構築方法について紹介します。

Figma MCP（Model Context Protocol）について

Figma MCPは、AIがFigmaのデザインデータに安全かつ統一的な方法でアクセスし、画面構成・コンポーネント・スタイルなどの情報を取得して理解／要約／実装支援に活用できるようにするための連携方式（またはそれを実現するMCPサーバー）です。 MCPという共通プロトコルを介することで、AI側は個別のFigma専用実装に依存しすぎずに、ツール呼び出しとしてFigma API由来の情報を参照できます。

この機能を使用できるユーザー
- リモートサーバーはすべてのシートとプランで利用可能
- デスクトップサーバーは全ての有料プランのDevまたはフルシートで利用可能

注意点として、MCPサーバーをサポートするコードエディターまたはアプリケーションを使用する必要があります。今回はAndroid Studioを使用します。

今回使用するツール

Figma(リモート、デスクトップどちらでも可)
GitHub Copilot
Android Studio(Narwhal)

前提条件

Node.js（v18以降のLTS推奨）
- npm / npxがコマンドラインから実行できる状態になっていること

実際に設定してみる

Figma MCPサーバーを接続する方法は2つあります。

デスクトップMCPサーバー
- Figmaデスクトップアプリを通じてローカルで実行する
リモートMCPサーバー
- Figmaのホストエンドポイントhttps://mcp.figma.com/mcpにHTTP経由で接続する

今回はFigmaのリモートMCPサーバーへHTTP接続するNode.js製のローカルMCPブリッジ（stdioで提供されるMCPサーバー）をnpx ... --stdioで起動し、Android Studio からそのローカルプロセス（stdio）に接続する構成で環境構築を行っていきます。

Figmaでの設定

1. FigmaのページでFigmaマーク → ヘルプとアカウント → アカウントの設定を押下

2. 個人アクセストークンタブの新規トークンを作成を押下

3. 新規トークンの名前、有効期限、スコープを設定しトークンを作成する

この項目は各自で適宜設定を行ってください。

これでアクセストークンの作成は完了です。一度しかアクセストークンは表示されないので必ず保存しておきましょう。

Android Studioでの設定

私はGitHub Copilotを普段使いしているので、今回はGitHub Copilotを使用して環境を構築していきます。

1. Settings > Tools > GitHub Copilot > Model Context Protocol(MCP)に移動し、Configureを押下

2. mcp.jsonが開くため、以下のように編集する

{
  "servers": {
    "figma-dev-mode": {
      "command": "npx",
      "args": [
        "-y",   //npx実行時の確認プロンプト等を省略して自動で進めるための指定
        "figma-developer-mcp",    //実行するMCPサーバー（Figma向け）
        "--figma-api-key=個人用アクセストークン",   //Figma API にアクセスするためのトークン
        "--stdio"   //MCPクライアントとこのプロセスが 標準入出力（stdin/stdout）で通信するモード
      ]
    }
  }
}

figma-api-keyの部分は先ほど作成した個人用アクセストークンを入力してください。このmcp.jsonのコードはオープンソースを参考にしています。

これで環境構築は終了です。

使ってみる

実際にサンプルカードをFigmaに作成したので実装させてみます。

読み取らせたいコンポーネントを指定すると画像のようにプロンプトを表示してくれます。プロンプト例をコピーを押下すると必要なURLをコピーできます。ブラウザの場合ページのURLをそのまま持ってきても問題ないです。

// コピーしたプロンプトの例
これらの1個のデザインをFigmaから実装して。
@https://www.figma.com/..../?node-id=....

このプロンプトだけでも実装は行ってくれますが、より正確なUI生成を行いたいときは別途指示を出してあげます。

体感ですがロジックに関しての指示は含めず、UIのみの指示に留めると精度は上がります。そのため、UI作成を行なってからロジックに関する指示を出すような流れが効率の良いAI活用だと思います。

アイコンが含まれている場合や複雑な構成になっているUIに対してプロンプトそのままで指示出しすると、一度で想定通りのUIが完成することはあまりないです。一度の指示でUIを完成させようとはせず、Figma MCPで読み取ったUI情報を元にAIとの認識がずれていないかをチャットした上で実装させると精度が格段に上がります。

最終的なコード確認の際にもチャット内容を参考にできるため便利です。

今回GitHub Copilotに投げた命令

@https://www.figma.com/..../?node-id=....
このURLをFigma MCPで読み取ってください。

実装する箇所はメイン画面です。背景色もそのまま適用させてください。
コンポーネントの形状やテキストは現在ハードコードされているものをそのまま利用してください。
アイコンはプロジェクト内にすでに配置しておいたので、参照してください。

そのまま実装は行わず、私にコードを見せながら構成や思考を説明してください。
よろしくお願いします。

作成された画面

まとめ

今回はFigma MCPを利用してUI作成を行う方法を紹介しました。

実際のプロダクト開発ではUI作成だけでなくロジックの実装も必要になりますが、Figma MCPを使用することでUI作成を効率化できます。これからもFigma MCPを有効活用して開発におけるQOLを上げていきたいです。

ここまで読んでいただきありがとうございました。誰かの参考になれば幸いです。

RecoChoku Engineering Blog

目次