はじめに
みなさんこんにちは。株式会社インプルの岩崎です。
今回は久しぶりにMCPの話題です！
MCPとは
今回紹介するのは、MCP （ Model Context Protocol ）の略称で、アプリケーションが LLM にコンテキストを提供する方法（コミュニケーションする方法）を標準化するオープンプロトコルです。
過去にFigmaとcursorをMCP連携させた記事も作っているので、詳しくはこちらから。ぜひご覧ください。
今回は、この技術を使ってAntigravityとFigmaを繋げてみようと思います！
AntigravityとFigmaをMCPで接続
前回はCursorと連携させましたが、今回はAntigravityとの連携方法を紹介します。
Figma側のプラン
Figma側のプランは、以前MCP接続を紹介した時のように、プランによって接続できるかどうかが決まります。詳しくは、こちらの公式サイトを確認してください！
この機能を使用できるユーザー
・リモートサーバーはすべてのシートとプランで利用可能です。
・デスクトップサーバーは全ての有料プランのDevまたはフルシートで利用可能です。
・MCPサーバーをサポートするコードエディターまたはアプリケーションを使用する必要があります
以前はベータ版でしたが、久しぶりに見ると、正式なバージョンにアップしてますね笑
利用できるユーザーは上記抜粋の通りで、以前まではパソコンのデスクトップアプリを利用してMCP接続をするデスクトップサーバーの繋げ方でやっていましたが、リモートエンドポイント経由のコンテキスト取得方法であるリモートサーバー接続というのもできたようです。
今回は、以前と同じくデスクトップサーバーを用いたMCP接続をします。そのため、今回の方法は有料プランであることに注意してください。リモートサーバーの接続方法も、調査し記事にしたいと思います！
MCP Servers からインストール
それでは早速、接続していきましょう。
ますは、AntigravityのMCP Serversから、「Figma用のMCP Server」 をインストールします。MCP Server は、LLMがFigmaの情報を取得する際に情報を仲介する役割を果たします。
チャット画面の右上に「…」があります。そこをクリックすると、MCP Server というのがあるので、それをクリックします。
すると、MCP Store が開くので、figma と検索ワードを入力すると、Figma Dev Mode MCP というのが出てくるので、これをクリックしてください。
すると、下記のような画像が出てきますので、Install から、インストールしましょう！
MCPサーバーの設定
続いて、MCPサーバーを設定します。
Figma Desktop がローカルで公開している MCP Server に対して、HTTP 経由で接続する設定をします。
先ほどの「…」の下に、Manage MCP Servers というのがあるので、これをクリックします。
すると、下記のような画面になりますので、タイトルの Manage MCP servers の右側にある View raw config をクリックします。
すると、下記のようなconfig.jsonが現れるので、ここにサーバーの情報を書きましょう。下記の内容をそのままコピペしてもらってOKです。
"servers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
},これで接続の準備はOKです！
Figmaからの読み込み
上記状態でFigmaを起動し、制作したいデザインファイルを選んで開きましょう。そして、デザインモードからDevモードに切り替えます。緑色のモードですね。
そして、MCPで制作したいフレームの右上をクリックすると、リンクをコピーというのが出てくるので、それをクリックし、Antigraityのチャット画面に貼り付けます。
または、右側にMCPの項目がありますので、プロンプト例をコピーし、そのままチャット画面に貼り付けて送信することも可能です。
こうすることで、AntigravityがFigmaのデザインデータを読み取り、デザインを実装することができます。
おわりに
いかがだったでしょうか？
手順自体はCursorとさほど大差なく準備することができますね。そして、Figma MCPを使うことで、簡単にデザインを実装させることができます。ですが、指示がうまく伝わらなかったり、少し工夫をしないとうまくデザインが反映されないことも・・・。それは次回のお話にします笑
ご覧いただきありがとうございました！