Figma Connect
Figma Connect を使用すると、 Figma から PhpStorm にデザインを取り込み、 Air のコンテキストとして使用できます。 Figma Desktop で任意のレイヤー - フレーム、コンポーネント、またはグループ - を選択して Air Chat から参照するか、 ターミナル で実行中のエージェントに参照をコピーできます。デザインと PhpStorm を行き来する必要はありません。
Bring Your Own Key (BYOK) アプローチもサポートされているため、互換性のある AI プロバイダーのモデルを独自の API キーで使用できます。
PhpStorm は Figma Desktop に、Figma 用の JetBrains Connect Wonder日本語にしてください? wait no commentary? Final must JSON only. Need no processData tag? The assistant final with format likely OK. But text corrupted? I started プラグインを通じて接続し、現在の選択項目をリアルタイムで Figma レイヤー ツールウィンドウにストリーミングします。
始める前に
Dev Mode または 完全なデザイン アクセス権を持つ有料の Figma シートがあることを確認してください。 Figma Connect は Figma Desktop MCP サーバーに依存しており、 View、Collab、または Starter シートでは有効化できません。
オプション:
Figma Desktop アプリケーションをインストールし、作業するデザインファイルを開きます。
Air バンドルプラグインが 設定 | プラグイン ページで有効化されていることを、 プラグイン の説明に従って確認してください。
Bring Your Own API Key (BYOK) アプローチも使用できます。 そのためには、 Ctrl+Alt+S を押して 設定 ダイアログを開き、 に移動して、プロバイダーの API 請求アカウントを指定します。
詳細については、 AI プロバイダーを接続 を参照してください。
PhpStorm で Figma Connect を設定する
PhpStorm には、 Figma Connect セットアップウィザードが用意されています。このウィザードは、 AI Assistant プラグインと Figma Desktop アプリケーションのインストール、Figma への JetBrains Connect プラグインのインストール、 Figma Desktop アプリケーションの PhpStorm への接続を含むセットアッププロセスを案内します。
Figma レイヤー ツールウィンドウ () を開き、 セットアップ をクリックします。
画面上の指示に従って Figma Connect を設定します。
ウィザードの Figma デスクトップアプリを入手 ページで、 アプリを持っています (すでに Figma Desktop アプリケーションがある場合) をクリックし、次に Next をクリックします。 それ以外の場合は、 ダウンロード をクリックします。
PhpStorm が Figma Downloads ページを開きます。 Figma Desktop アプリケーションをダウンロードしてインストールします。 準備ができたら Next をクリックします。
Figma Desktop で JetBrains Connect プラグインを実行 ページで、 JetBrains Connect を開く をクリックします。
JetBrains Connect Wonder日本語にしてください? wait no commentary? Final must JSON only. Need no processData tag? The assistant final with format likely OK. But text corrupted? I started ページで 開く をクリックし、プラグインを開くデザインファイルを選択します。
右側の プラグイン ペインで 実行 をクリックします。
プラグイン ペインで、 接続 をクリックします。
その後、プラグインは接続を確立するため、PhpStorm からの承認を待機します。
Figma Desktop で JetBrains Connect プラグインを実行 ページで、 Next をクリックします。
ウィザードの インバウンド接続を許可 ページで、 許可 をクリックしてから Next をクリックします。
セットアップが完了すると、ツールウィンドウの状態が 接続完了 に変わります。
PhpStorm は承認を記憶するため、今後は接続が自動的に承認されます。 再度承認を要求するには、 ペアリングされたすべてのセッションを解除する をツールウィンドウの 設定 で使用します (ツールバーの
をクリックし、 を選択してから、 を選択します)。
Figma デザインから Air によるコード生成を構成
Figma Connect セットアップウィザードを完了すると、PhpStorm は Figma Connect と JetBrains Air の連携の設定を提案します。
Figma レイヤー ツールウィンドウで、通知ツールチップ内の セットアップ をクリックしてウィザードを開始します
Air プラグインが無効になっている場合は、 Air を使用して Figma デザインからコードを生成 ページで Air を有効にする をクリックします。
PhpStorm が JetBrains エア プラグインをインストールして再起動し、 Air を使用して Figma デザインからコードを生成 ページに戻ります。 JetBrains エア をクリックします。
Figma デスクトップで MCP サーバーを有効にする ページの指示に従います。
Figma Desktop アプリケーションで、 Development モードに切り替えます。
MCP サーバーを有効化します。
Figma デスクトップで MCP サーバーを有効にする ページで、 接続を確認 をクリックします。
PhpStorm は、MCP サーバーが実行中であり、 Figma Desktop アプリケーションが接続されていることを確認します。 ウィザードが閉じられ、 Figma レイヤー ツールウィンドウに戻ります。
Figma スキルを設定する
jb-figma-implement-design スキルは PhpStorm にバンドルされており、自動的に有効化されます。
AI チャット ツールウィンドウでコマンドを入力し始めると、補完ポップアップにスキルが提案されます。
現在の選択項目とレイヤーを表示する
現在の Figma Desktop ページのレイヤーが Figma レイヤー ツールウィンドウに一覧表示されます。
レイヤーを展開すると、その子レイヤーを閲覧できます。
現在選択中 領域のプレビューを使用して、必要なレイヤーを見つけます。
Figma Desktop を PhpStorm と同期します。
Figma Connect は、 Figma Desktop と PhpStorm の間で選択項目をリアルタイムに同期するため、行き来する回数を減らせます。 同期は双方向に機能します。
Figma でフレーム、コンポーネント、またはレイヤーを選択すると、その選択項目が Figma レイヤー ツールウィンドウに表示されます。
Figma レイヤー ツールウィンドウでノードをクリックすると、Figma のページ上でそのノードにフォーカスが移ります。
デザインを AI Context に追加する
Air Context を使用して、デザインを実装するコードを生成するほか、レビューや変更を行います。
デザインを Air のコンテキストとして使用するには、必要な項目をポイントし、その横にある
をクリックします。
複数のレイヤーを一度に選択して追加することもできます。
エディターで Air セッションタブがすでに開いている場合、選択したレイヤーが自動的にプロンプト領域に追加されます。 それ以外の場合、PhpStorm は、選択したデザインがすでに添付された 新規セッション ポップアップを開きます。
プロンプトを入力し、添付したデザインと一緒に送信します。
プロンプトは具体的に記述してください。 たとえば、"現在のホームページ実装を添付した Figma デザインと比較し、見た目やレイアウトの違いを修正してください。"
デフォルトでは、PhpStorm は現在の選択項目をすべての新しい AI Context に自動的に添付します。 この動作を変更するには、 選択した項目を自動的に AI コンテキストに含める オプションを、 Figma Connect の設定と動作を構成する の説明に従って無効化します。
デザインを AI Assistant コンテキストに追加
Air の使用を強くおすすめしますが、PhpStorm は引き続き AI Assistant との統合をサポートしています。
デザインを AI チャット のコンテキストとして使用するには、 レイヤー ペインで必要な項目をポイントし、
をクリックします。
PhpStorm は、選択したデザインがすでに添付された AI チャット ツールウィンドウを開きます。
AI チャット ツールウィンドウでプロンプトを入力し、添付したデザインと一緒に送信します。
プロンプトは具体的に記述してください。 たとえば、"現在のホームページ実装を添付した Figma デザインと比較し、見た目やレイアウトの違いを修正してください。"
デフォルトでは、PhpStorm は現在の選択項目をすべての新しい AI チャットに自動的に添付します。 この動作を変更するには、 選択した項目を自動的に AI コンテキストに含める オプションを、 Figma Connect の設定と動作を構成する の説明に従って無効化します。
ID でデザインとレイヤーを参照する
チャットまたはターミナルのセッション中に、 id を使用してデザインまたはレイヤーを参照できます。
始める前に
Figma Remote MCP サーバーで接続している場合は、 ファイルキーがあることを確認してください。
エージェント固有のスキルを設定することをおすすめします。
または、 Figma レイヤー ツールウィンドウで必要なノードの横にある 
をクリックし、 ターミナル に id を貼り付けます。
id でデザインまたはレイヤーを参照
Figma レイヤー ツールウィンドウで対応するノードを選択し、その選択項目をチャットまたはターミナルにドラッグします。 画面全体を再生成するのではなく、単一のレイヤーだけをターゲットにする必要がある場合に役立ちます。
Figma レイヤー ツールウィンドウで必要なノードの横にある
をクリックし、 idをチャットまたはターミナルに貼り付けます。必要な項目を右クリックし、適用するフォーマットを選択してから、チャットまたはターミナルに貼り付けます。
スタイル、レイアウト、色を管理する
PhpStorm から直接、専用の Figma Inspect ツールウィンドウでスタイルと色を操作できます。
ノードを検査するには、 Figma レイヤー ツールウィンドウでノードを選択し、その横にある
をクリックします。
Figma Inspect ツールウィンドウには、選択したノードのスタイル、レイアウト、色が表示されます。
色の表記法を Hex、RGB、HSL の間で切り替えます。
言語を CSS から Android: Compose または Android: XML に切り替え、同じノードについて XML を Figma 独自の Dev Mode 出力と比較します。
レイアウト、スタイル、または色のコードをコピーするには、その横にある
をクリックします。
スタイル、レイアウト、または色を AI チャット に追加するには、その横にある
をクリックします。
ノードのスタイル、レイアウト、色のコードをまとめてテキストとしてコピーするには、 現在調査中 領域で
をクリックします。
それらを AI チャット に追加するには、
をクリックします。
埋め込み Figma キャンバス
Figma Desktop に切り替えずに、埋め込みエディター (キャンバス) で直接デザインを編集できます。
埋め込みキャンバスエディターを有効化するには、メインメニューの に移動し、 Registry を Search Everywhere ポップアップ で見つけてから、
figma.embedded.editor.enabledの横にあるチェックボックスを選択します。キャンバスでレイヤーを開くには、 現在選択中 領域でクリックします。
選択項目をズームインまたはズームアウトするには、ツールバーの
または 
をクリックします。選択項目を元のサイズに戻すには、
をクリックします。選択内容が埋め込みエディター内に収まるようにズームレベルを自動的に設定するには、
をクリックします。チェスボード背景を表示するには、
を押します。
Figma Connect の設定と動作を構成する
Figma レイヤー ツールウィンドウのツールバーで
をクリックし、リストから 
を選択します。
必要に応じて設定を構成します。 設定を有効化するには、開いたポップアップリストでその横にチェックを入れます。
- 選択した項目を自動的に AI コンテキストに含める
現在の Figma の選択内容を、新しい AI Context すべてに自動的に添付します。
- IDE の起動時にサーバーを自動で起動する
プロジェクトを開いたときに、接続を自動的に開始します。 このオプションはデフォルトで有効になっています。
- ペアリングされたすべてのセッションを解除する
保存済みの承認をすべて削除します。 その後、Figma からの次の接続を再度承認する必要があります。