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