AntigravityとFigmaを連携するには？設定方法や使い方も解説

Antigravityを使い始め「Figmaと繋げたら…」と考えている人は多いですよね。

料金や単体利用との違いなど、詳細を把握してから連携するかを決めたい人もいるはず。

そこでこの記事では利点や必要なものも交え、AntigravityとFigmaの連携方法を解説します。連携がうまくいかないときの対処法も紹介するので、ぜひ参考にしてください。

AntigravityとFigmaを連携するメリット

AntigravityとFigmaをMCP連携すると、Figmaのデザイン情報をAIに渡し、コード生成や開発作業を効率化できます。デザインを見ながら色や余白などを手作業で確認する工程を減らせる点が大きなメリットです。 

ここからはAntigravityとFigmaを連携するメリットを、3つにまとめて解説します。

デザインからコード生成までが自動化される

AntigravityとFigmaを連携する最大のメリットは、Figmaのデザイン情報をもとにコード生成を効率化できる点です。

従来のワークフローでは、デザイナーがFigmaで画面を設計し、エンジニアがそれを見ながら手動でコーディングしていました。色やフォントサイズ、余白の数値をひとつずつ確認して実装するため、作業には大きな時間がかかることもあります。

Figma MCPを利用すると、Figmaのフレームやコンポーネント、レイアウト、デザイン変数などの情報をAIエージェントに渡せます。AIは取得したデザインコンテキストをもとに、ReactやTailwind CSSなどのコードを生成できます。

そのため、デザインからコードを作成する際の手作業を減らし、開発スピードの向上につなげられます。

手戻りや認識齟齬が大幅に減る

AntigravityとFigmaの連携には、チーム内の手戻りや認識のズレを減らせるメリットもあります。

デザイナーとエンジニアの間では「デザイン通りに実装されていない」というトラブルが起こりがちです。口頭やチャットでの伝達では、余白や色、コンポーネントの構造などの細かな情報が正確に伝わらないこともあるためです。

MCP連携を使えば、Figmaからレイアウトやコンポーネント、変数などの構造化されたデザイン情報を取得できます。AIが同じ情報を参照しながらコードを生成できるため、手作業で仕様を読み取る場合と比べて認識のズレを抑えやすくなります。

バリアブルやスタイルも取得できる

Figma MCPでは、バリアブル（変数）やスタイルなどのデザイン情報も自動で取得可能です。

Figmaではカラーやタイポグラフィ、スペーシングなどを変数として管理する機能が用意されています。デザインシステムを構築しているチームでは、こうしたデザイントークンを正確に開発側へ伝えることが重要です。

Figma MCPのget_variable_defsツールを利用すると、選択した範囲で使用されている変数やスタイルを取得できます。たとえば、カラーやスペーシングなどの変数名と値を確認し、生成するコードに反映させることが可能です。

また、Figma公式ドキュメントでは、カラー・スペーシング・タイポグラフィなどに変数を設定し、コンポーネントやAuto Layoutを適切に構成することで、よりデザイン意図に沿ったコードを生成しやすくなると説明されています。

このように、Figmaのデザイン情報をAIに正確に渡せる環境を整えることで、デザインと実装の一貫性を保ちやすくなります。

Antigravity×Figma連携に必要なもの

AntigravityとFigmaの連携を始めるには、いくつかの環境やアカウントを事前に準備する必要があります。不足があると連携自体が動かないため、作業前の確認が大切です。

ここからはAntigravity×Figma連携に必要なものを、3つにまとめて解説します。

FigmaのDev/Fullシート

AntigravityとFigmaを連携するには、Figmaのプランとシートの種類を確認しておく必要があります。

Dev/Fullシートとは、Figmaで付与されるユーザー権限（シート）の種類です。Devシートは主に開発者向けの機能を利用するための権限、Fullシートはデザインの作成・編集など、Figmaの幅広い機能を利用できる権限を指します。」

Figma公式によると、StarterプランでもDev・FullシートでMCPを利用できます。ただし、プランやシートによって利用できる回数に上限が設定されています。

なお、Figma MCPでデザイン情報を読み取るだけであればDevシートでも利用できます。一方、AIエージェントからFigmaファイルを編集する「Write to canvas」などの機能を利用する場合は、Fullシートと編集権限が必要です。

そのため、デザイン情報の取得が目的ならDevシート、Figmaファイルの作成・編集まで行いたい場合はFullシートを選ぶとよいでしょう。まずは必要な機能と利用量を確認したうえで、適切なプラン・シートを選択してください。

Antigravity本体

連携には、MCPに対応したAntigravityの環境が必要です。

Antigravity側でFigma MCPサーバーを登録し、Figmaのデザイン情報をAIから取得できる状態にします。具体的な設定方法は利用するAntigravityのバージョンやMCP対応状況によって異なるため、記事内の連携手順では実際の設定画面を確認しながら進めましょう。

また、Figma MCPを利用するには、Figma側だけでなくMCPサーバーに対応したAIクライアントも必要です。Figma公式では、VS Code、Cursor、Claude Codeなど、Figma MCPカタログに掲載されたクライアントがサポートされています。

Figmaデスクトップアプリ

Figmaのデスクトップアプリは、デスクトップ版のMCPサーバーを利用する場合に必要です。

Figma公式では、デスクトップ版MCPサーバーをFigmaデスクトップアプリ上で起動できます。Figmaファイルを開いてDev Modeに切り替え、MCPサーバーを有効化すると、ローカルでMCPサーバーが起動します。

一方、リモート版のFigma MCPサーバーを利用する場合は、Figmaデスクトップアプリをインストールする必要はありません。Figma公式も、一般的な利用ではリモート版を推奨しています。

したがって、デスクトップアプリを必須と考えるのではなく、デスクトップ版MCPを使う場合のみ必要と覚えておきましょう。

AntigravityとFigmaを連携すべき？

AntigravityとFigmaの連携は、FigmaのデザインをもとにAIで開発を効率化したい人におすすめです。

とくに次のような課題を抱えている人には、導入効果が大きいといえます。

一方で、個人開発でデザインからコーディングまで自分で完結している場合や、Figmaをほとんど利用していない場合は、連携の優先度は下がります。

まずは小規模なプロジェクトでFigma MCPを試し、コード生成の効率化や手戻りの削減につながるかを確認するのがおすすめです。必要な機能や利用量が増えてきたら、Figmaのプランやシートなどを見直すとよいでしょう。

AntigravityとFigmaの連携手順

ここからはAntigravityとFigmaの連携手順を、3つにまとめて解説します。MCP有効化からデザイン読み込みまで、順番どおりに進めれば初心者でも完了できます。

1.FigmaでMCPを有効化する

最初のステップは、Figma側でMCP機能を有効にする作業です。

Figma MCPにはリモート版とデスクトップ版があります。Figma公式では、一般的な利用にはFigmaデスクトップアプリを必要としないリモートMCPサーバーが推奨されています。一方、デスクトップ版MCPサーバーを利用する場合は、Figmaデスクトップアプリが必要です。

デスクトップ版MCPサーバーを利用する場合は、次の手順で有効化できます。

1. Figmaデスクトップアプリを開き、Figma Designファイルを開く
2. Dev Modeに切り替える
3. Inspectパネルの「MCP server」セクションを開く
4. 「Enable desktop MCP server」をクリックする
5. MCPサーバーが起動したことを確認する

デスクトップ版MCPサーバーは、標準ではhttp://127.0.0.1:3845/mcpで起動します。Antigravity側で接続先を設定するときに使用するため、URLを確認しておきましょう。

2.AntigravityでMCPサーバーを設定する

次に、Antigravity側でFigmaのMCPサーバーへ接続する設定を行います。

AntigravityにはMCP Storeが用意されており、対応するMCPサーバーを画面から追加できます。FigmaのMCPも「Figma Dev Mode MCP」として対応サーバーに含まれています。

Antigravity 2.0では、次の手順でMCPを追加できます。

1. Antigravityのアプリまたはダッシュボードを開く
2. 画面左下の「Settings」をクリックする
3. 「Customizations」を選択する
4. 「Installed MCP Servers」の「Add MCP」をクリックする
5. MCP Storeから「Figma Dev Mode MCP」を探して追加する

接続テストが成功すれば、AntigravityからFigmaのデザインデータにアクセスできる状態です。エラーが出た場合は、Figmaデスクトップアプリが起動しているか、ポート番号が一致しているかを確認してください。

3.デザインを読み込んで動作確認する

最後に、実際のFigmaデザイン情報をAntigravityから取得できるか確認します。

Figma MCPでは、Figma上で対象のフレームやレイヤーを選択する方法と、フレームやレイヤーのリンクを使ってデザイン情報を指定する方法があります。

たとえば、次のように操作します。

1. Figmaで対象のデザインファイルを開く
2. 読み込みたいフレームまたはレイヤーを選択する
3. 対象のデザイン情報を取得するようAntigravityに指示する
4. 取得したレイアウトやコンポーネントなどの情報を確認する
5. 必要に応じて、取得したデザインをもとにコード生成を依頼する

MCPが正常に接続されていれば、AntigravityからFigmaのデザインコンテキストを取得して、実装に活用できます。

なお、Figma公式サイトではリモートMCPサーバーが一般的な利用方法として推奨されています。デスクトップ版を利用する場合は、ローカルMCPサーバーを起動して接続する方式であることを理解しておきましょう。

Figma連携がうまくいかないときの対処法

AntigravityとFigmaの連携でエラーが出た場合、原因の多くは環境設定や通信周りの問題です。よくあるトラブルと対処法を次にまとめます。

トラブル	主な原因	対処法
MCPサーバーに接続できない	Figma側でMCPサーバーが起動していない	Figmaデスクトップアプリを起動し、Dev ModeからMCPサーバーが有効になっているか確認する
ポート番号のエラーが出る	Antigravity側の接続先URLが間違っている	Figma側で表示されるMCPサーバーのURLと、Antigravity側の設定が一致しているか確認する
デザインデータを取得できない	対象のファイルやレイヤーを正しく指定できていない	Figmaで対象のフレームやレイヤーを選択し、再度デザイン情報の取得を試す
MCPサーバーが表示されない	Antigravity側でFigma MCPが追加・有効化されていない	Antigravityの「Installed MCP Servers」を確認し、Figma Dev Mode MCPをインストール・有効化する
接続後もツールが表示されない	MCPクライアントやFigma側で接続状態に問題がある	FigmaデスクトップアプリとAntigravityを再起動し、MCPサーバーを再接続する
デザインの取得結果が期待と異なる	Figmaのレイアウトやコンポーネントの構成に問題がある	Auto Layoutやバリアブルなどの設定を見直し、デザイン情報を整理してから再度取得する
デスクトップ版で接続できない	ローカルMCPの設定に問題がある	リモート版Figma MCPの利用も検討する

上記で解決しない場合は、AntigravityとFigmaの設定を再確認し、それぞれの公式ドキュメントで最新の接続方法を確認するのがおすすめです。

まとめ

本記事では、AntigravityとFigmaのMCP連携方法を解説しました。

Antigravity Figmaとは、AntigravityとFigmaをMCPで連携し、Figmaのデザイン情報をAIによる開発に活用する方法です。Figma MCPを使うことで、画面のレイアウトやコンポーネントなどのデザイン情報をAntigravityから取得できます。取得した情報をもとにコード生成を行えば、Figmaのデザインを確認しながら手作業で実装する工程を減らせます。

まずは小さなプロジェクトで連携を試し、デザインからコード生成までの自動化を体験してみましょう。

こちらの記事もおすすめ

Antigravityで画像生成する方法を詳しく知りたい人は、次の記事を参考にしてください。

Antigravityが遅いときの対処法を詳しく知りたい人は、次の記事を参考にしてください。

Antigravityのおすすめ設定を詳しく知りたい人は、次の記事を参考にしてください。