WebStorm Figma Connect、AIにスクリーンショットではなくノード参照を渡す

画面は似ているのに、チームのコードらしく見えない

Figmaのデザイン案をAIに見せて画面の作成を頼むと、余白や色はおおむね合っていても、見慣れないコンポーネントが大量に作られます。開発者は再びFigmaタブで数値を確認し、既存コードベースから適切なコンポーネントを探して、生成コードを修正することになります。

この問題は、プロンプトを長く書くだけでは解決しません。AIには、どのフレームを実装すべきか、その中でどのコンポーネント・スタイル・変数が使われているかを読み取る経路が必要です。WebStorm 2026.2.1のFigma Connectは、選択したFigmaノードの参照をAI Chatに添付して、この経路を作ります。 blog.jetbrains +1

ただし、インストールするだけでチームの本番コンポーネントまで自動で選んでくれるわけではありません。期待する結果に近づくには、Figma Connect、MCP、Code Connectの役割を区別する必要があります。

68%と32%は同じ開発者集団の回答ではない

まず、広く引用されている数字を正しておきます。Figmaの2025年調査で、開発者の68%がプロンプトでコードを生成していると答えたのは事実です。しかし、AIの出力に依存できると答えた32%は、開発者だけでなく全回答者を対象とした数字です。同じ調査で、開発者のAIツールに対する満足度は82%でした。 figma

したがって、「AIでコーディングする開発者の68%のうち、結果を信頼するのは32%だけ」というように、二つの数字を引き算したり比較したりしてはいけません。公開されている調査だけでは、デザインコンテキストの不足が32%という回答の原因だったとも言えません。

Figma Connectが渡すのは画像ではなく位置情報です

Figma Connectの要点は、選択したレイヤーのスクリーンショットやファイル全体をチャットにコピーしないことです。Figma Desktopで選んだフレーム・コンポーネント・レイヤーとWebStormの選択状態を接続し、Add to Contextを押すと、そのノードの識別子参照がAI Chatに入ります。 blog.jetbrains +1

エージェントはこの参照を出発点として、Figma MCPが提供するコンポーネント、スタイル、変数の情報を読み取れます。どの画面を指すのかを長文で説明したり、キャプチャ画像だけを見て構造を推測させたりするより、具体的な入力になるわけです。 figma

デザインと実際のコンポーネントを直接マッピングするにはCode Connectが必要です

Figma MCPがデザイン情報を読み取るからといって、社内のボタンやshadcn/uiコンポーネントが自動的に選ばれるわけではありません。エージェントがコードベースにアクセスできれば、Code Connectなしでも既存コンポーネントを見つけて再利用できますが、どのデザインコンポーネントがどのコードリソースに対応するかを自動で正確に判断する保証はありません。

Code Connectは、この対応関係を直接定義します。Figmaは、デザイン要素とコードがマッピングされていればエージェントが実際のコードリソースを参照でき、マッピングがなければ受け取ったスタイルコンテキストに基づいて新しいコードを書く、と区別しています。 figma +1

Code Connectを利用するには、Figma OrganizationまたはEnterpriseプランのFullまたはDevシートが必要です。結局、結果はFigma Connectのインストール有無だけでなく、エージェントのコードベースへのアクセス範囲、既存コンポーネントの構造、Code Connectマッピングの範囲にも左右されます。 help.figma

Dev Mode導入企業で報告された週あたり98分の節約も、Figma Connectの成果として扱うべきではありません。これはある企業の開発者200人がDev Mode使用後に報告した平均であり、20〜30%の生産性向上は、Figmaの依頼を受けたForresterがインタビューを基に作成した合成組織の推定値です。 figma

既存プロジェクトを開いたあと、最初のノードを接続する

この手順では、すでにホームページ実装があるプロジェクトとFigmaのデザイン案を比較します。WebStorm 2026.2.1、Dev ModeまたはFull Designアクセス権を持つ有料Figmaシート、作業ファイルを開けるFigma Desktopを用意してください。AI Chatでプロジェクトファイルを修正するには、JetBrains AIサブスクリプション、または互換プロバイダーの独自APIキーで構成したAI Assistantも必要です。 jetbrains

1. WebStormで修正するホームページプロジェクトを開きます。 Projectツールウィンドウで、比較するページのエントリファイルと既存コンポーネントが見えていることを確認してください。空のプロジェクトなら、まず使用するフレームワークとページエントリファイルを用意してから、以下の比較リクエストを実行します。
2. Figma Connectの公式設定ドキュメントを開き、View → Tool Windows → Figma Connectへ移動します。 ツールウィンドウでSet Upを選択してください。 jetbrains
3. AI Assistantをインストールし、チャット認証を完了します。 設定ウィザードからインストールを求められた場合は、案内に従ってプラグインをインストールし、Restart IDEが表示された場合はWebStormを再起動してください。JetBrains AIを使う場合はログインし、独自APIキーを使う場合はTools → AI Assistant → Providers & API Keysで互換プロバイダーとキーを構成して、AI Chatに入力できることを確認します。BYOKのみを使う場合は、公式案内に従い、既存のJetBrains AI認証を解除するか、ProviderをNoneに設定する必要がある場合があります。 jetbrains
4. Figma Desktopで実装するデザインファイルを開きます。 インストールされていなければ、設定ウィザードの案内に従って先にインストールしてください。
5. Figma DesktopでDev Modeに切り替えます。 InspectパネルでEnable desktop MCP serverを選択します。WebStormのウィザードに戻り、It’s Enabledを押してから、適用範囲をPer ProjectまたはGloballyに設定します。 jetbrains
6. ウィザードでOpen JetBrains Connectを選択します。 FigmaのPluginsパネルからプラグインを実行し、Connectを押したあと、WebStormに表示される接続リクエストをAllowします。 jetbrains
7. Figma ConnectツールウィンドウがConnectedになっていることを確認します。 Currently selectedまたはLayersで、実装するフレームまたはコンポーネントのAdd to Contextを押します。 jetbrains
8. 添付したデザインと開いているプロジェクトの既存実装を一緒に比較するよう依頼します。 最初の入力としては、「添付したFigmaデザインと現在のプロジェクトのホームページ実装を比較し、視覚的な差異とレイアウトの差異を修正して。既存プロジェクトのコンポーネントとデザイントークンを優先して使い、新しいコンポーネントを作る場合は理由を説明して。」のように書いてみてください。

最初の成功基準は三つです。ツールウィンドウがConnectedと表示され、選択したノードがAI Chatに添付され、エージェントが実際に開いているプロジェクトファイルを対象に実装案または変更案を返すことです。比較する既存ページがない場合は、「添付したFigmaデザインを現在のプロジェクトの指定したページエントリに実装して」と依頼し、対象ファイルを明記してください。

ブラウザ検査は別の接続で続きます

生成された画面をChromeで開き、コンソール・ネットワーク・スクリーンショットまで検査する機能は、Figma Connectではなく別のChrome DevTools Connectによるものです。関連するCLIスキルはWebStorm 2026.2.1にバンドルされていますが、初回利用時にパッケージのインストールを求められることがあります。 blog.jetbrains

そのため、初日は範囲を絞るのがよいでしょう。ノードを一つ接続し、既存コンポーネントの再利用状況とレイアウトの差異を確認してください。その後、必要なコンポーネントにCode Connectマッピングを追加し、ブラウザ検査を加えると、どの接続が結果を改善したのかも区別しやすくなります。