Figma Connect

始める前に

Figma で JetBrains Connect プラグインをインストールする

WebStorm は、Figma Desktop 内で動作するコンパニオンプラグインを通じて Figma と通信します。

Figma を WebStorm に接続する

Figma Connect ツールウィンドウ（表示 | ツールウィンドウ | Figma Connect ）を開き、画面の指示に従ってください。

接続が確立されると、ツールウィンドウのツールバー内のステータスが 接続済み に変わります。 WebStorm は承認を記憶するため、今後は接続が自動で許可されます。 再度承認が必要な場合は、ツールウィンドウ 設定 で ペアリングされたすべてのセッションを解除する を使用してください。

現在の選択内容とレイヤーを表示する

Figma Connect は、Figma Desktop と WebStorm の選択内容をリアルタイムで同期し、行き来する手間を減らします。 同期は双方向で動作します：

• Figma でフレーム、コンポーネント、またはレイヤーを選択すると、 現在選択中​​. の下にサムネイル付きで Figma Connect ツールウィンドウに表示されます。

• ツールウィンドウでレイヤーをクリックすると、それが現在の選択となり、Figma のページ上で対応するノードがフォーカスされます。

レイヤー セクションには、現在の Figma ページのレイヤーが一覧表示されます。 レイヤーを展開して、その子レイヤーを閲覧できます。

複数のレイヤーも一度に AI チャットへ追加可能です。各レイヤーに Figma でフォーカスせずに、リスト上で直接 コンテキストに追加 アクションを使ってください。

デザインを AI チャットに追加する

AI Assistant 用のコンテキストとしてデザインを使うには、 現在選択中​​. または レイヤー 配下の項目をポイントし、 コンテキストに追加 をクリックしてください。 デザインは AI Assistant チャットに添付されます。WebStorm で AI Assistant と対話できる同じチャットウィンドウで、プロンプトを入力し、デザインと一緒に送信できます。

WebStorm ウィンドウ右側の をクリックし、AI Assistant チャットを開くことができます。

デザインが添付ファイルとしてチャット入力欄に追加されるため、プロンプトを入力してデザインと一緒に送信できます。

現在の選択内容を新しい AI チャットへ自動で添付するには、ツールウィンドウ 設定 で 選択内容を自動的に AI コンテキストに含める を有効化してください。

設定

Figma Connect の設定を行うには、 Figma Connect ツールウィンドウのツールバーで をクリックします。

次のオプションを使用できます：

選択内容を自動的に AI コンテキストに含める

Figma で現在選択している要素を新しい AI チャットに自動で添付します。

IDE の起動時にサーバーを自動起動

プロジェクトを開いたときに接続を自動開始します。 このオプションはデフォルトで有効になっています。

ペアリングされたすべてのセッションを解除する

保存されたすべての承認を削除します。 その後、Figma からの次回接続は再び承認が必要です。