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