Figma Connect
Figma Connect では、 Figma から WebStorm へデザインを取り込み、 AI Assistant のコンテキストとして利用できます。 Figma Desktop でフレーム、コンポーネント、またはレイヤーを選択して AI チャットに追加し、AI Assistant に対応するコードの実装を手伝わせることができます。デザインと IDE 間の切り替えは不要です。
WebStorm は Figma 用の JetBrains Connect プラグインを介して Figma Desktop に接続し、現在の選択内容をリアルタイムで Figma Connect ツールウィンドウにストリームします。
始める前に
Figma Connect は実験的機能であり、デフォルトでは無効化されています。 レジストリ内の figma.integration.enabled キーで管理されています。 有効化方法：
Ctrl+Shift+A を押すか、メインメニューから を選択します。 開いたポップアップで、
レジストリの入力を開始し、対応する項目を選択して Enter を押します。figma.integration.enabled キーを探し、その横のチェックボックスを選択して機能を有効化してください。
WebStorm を再起動して変更を適用してください。
AI Assistant がインストールされており、有効な AI Assistant サブスクリプションで JetBrains Account にログインしていることを確認してください。
Figma Desktop アプリをインストールし、作業したいデザインファイルを開いてください。
Figma で JetBrains Connect プラグインをインストールする
WebStorm は、Figma Desktop 内で動作するコンパニオンプラグインを通じて Figma と通信します。
Figma コミュニティで JetBrains Connect プラグインページを開きます。
…で開く をクリックし、作業したいファイルを選択してください。
プラグインはそのファイルに直接インストールされて開くため、Figma メニューから手動で探す必要はありません。
Figma を WebStorm に接続する
Figma Connect ツールウィンドウ（ ）を開き、画面の指示に従ってください。
Figma Desktop で、現在作業中のデザインファイルで JetBrains Connect プラグインを実行してください。 そのためには、ファイルを開き、
をクリックし、 を選択します。
プラグインで 接続 をクリックし、WebStorm に戻ってください。
WebStorm 内のバナーで、接続承認を求められたら 許可 をクリックしてください。
接続が確立されると、ツールウィンドウのツールバー内のステータスが 接続済み に変わります。 WebStorm は承認を記憶するため、今後は接続が自動で許可されます。 再度承認が必要な場合は、ツールウィンドウ 設定 で ペアリングされたすべてのセッションを解除する を使用してください。
現在の選択内容とレイヤーを表示する
Figma Desktop を WebStorm と同期します。
Figma Connect は、Figma Desktop と WebStorm の選択内容をリアルタイムで同期し、行き来する手間を減らします。 同期は双方向で動作します：
Figma でフレームやコンポーネント、レイヤーを選択すると、その選択内容が 現在選択中. の Figma Connect ツールウィンドウ内にサムネイルと共に表示されます。
Figma Connect ツールウィンドウでレイヤーをクリックすると、そのレイヤーが現在の選択となり、対応するノードが Figma のページでフォーカスされます。
レイヤー セクションには、現在の Figma ページのレイヤーが一覧表示されます。 レイヤーを展開して、その子レイヤーを閲覧できます。
デザインを AI チャットに追加
AI チャットのコンテキストとしてデザインを使うには、 現在選択中. または レイヤー リストで必要な項目にポインタを合わせ、
をクリックしてください。
WebStorm は選択されたデザインがすでに添付されている AI チャット ツールウィンドウを開きます。
AI チャット ツールウィンドウでプロンプトを入力し、添付されたデザインと一緒に送信します。
プロンプトは具体的に入力してください。 例えば、「現在のホームページ実装と添付の Figma デザインを比較し、見た目やレイアウトの違いを修正してください。」
デフォルトでは、WebStorm は現在の選択内容をすべての新しい AI チャットに自動で添付します。 この動作を変更するには、 選択内容を自動的に AI コンテキストに含める オプションを無効にし、 Figma Connect の設定と動作を構成する で説明されている手順に従ってください。
Figma Connect の設定と動作を構成する
を Figma Connect ツールウィンドウのツールバーでクリックし、リストから 
を選択してください。
必要に応じて設定を構成してください。 設定を有効にするには、ポップアップリストでその設定の横にチェックを入れてください。
- 選択内容を自動的に AI コンテキストに含める
Figma で現在選択している要素を新しい AI チャットに自動で添付します。
- IDE の起動時にサーバーを自動起動
プロジェクトを開いたときに接続を自動開始します。 このオプションはデフォルトで有効になっています。
- ペアリングされたすべてのセッションを解除する
保存されたすべての承認を削除します。 その後、Figma からの次回接続は再び承認が必要です。