Figma Connect

Figma Connect lets you bring designs from Figma into WebStorm and use them as context for AI Assistant. Select any layer in Figma Desktop — a frame, a component, or a group, reference it from AI Assistant's AI Chat, or copy the reference into an agent running in the Terminal – without switching back and forth between the design and the IDE.

WebStorm connects to Figma Desktop through the JetBrains Connect plugin for Figma, which streams your current selection to the Figma Connect tool window in real time.

Before you start

Make sure you have a paid Figma seat with Dev Mode or Full Design access. Figma Connect relies on the Figma Desktop MCP server, which cannot be enabled on View, Collab, or Starter seats.
Optionally:
- Make sure AI Assistant is installed. You can use it either with an active JetBrains AI subscription or with your own model provider connected — a paid subscription is not required.
- Install the Figma Desktop application and open the design file you want to work with.
You can also install the AI Assistant plugin and the Figma desktop application during the setup process, as described in Set up Figma Connect in WebStorm.

Set up Figma Connect in WebStorm

WebStorm provides you with a Figma Connect wizard that guides you through the setup process, including installation of the AI Assistant plugin and the Figma Desktop application, installing the JetBrains Connect plugin in Figma, and connecting the Figma Desktop application to WebStorm.

Open the Figma Connect tool window (View | Tool Windows | Figma Connect) and click Set Up.
Follow the on-screen instructions to set up Figma Connect.
If you have not installed the AI Assistant plugin yet, click Install on the Install AI Assistant page.
Alternatively, click Skip to install the plugin on the Marketplace tab of the Settings | Plugins page, as described in Install and manage plugins.
When the installation is completed, click Restart IDE or Skip to do that later.
This step is not available if you already have the AI Assistant plugin installed.
On the Get Figma Desktop page of the wizard, click Download to install the Figma Desktop application.
Follow the instructions on the Enable MCP server in Figma Desktop page.
First, go to the Figma Desktop application and switch to the Dev Mode. Then click Enable desktop MCP server on the Inspect pane.
When ready, click It's Enabled on the Enable MCP server in Figma Desktop page of the wizard.
On the Configure Figma Desktop MCP and skill in AI Assistant page, specify the scope to apply the skill in - Per Project or Globally.
On the Run JetBrains Connect plugin in Figma page, click Open JetBrains Connect.
On the JetBrains Connect page, click Open in and select the design file to open the plugin in.
In the right-hand, Plugins, pane, click Run.
In the Plugins pane, click Connect to send a request to WebStorm.
After that the plugin stays waiting for your approval from WebStorm to establish connection.
On the Allow the connection page of the wizard, click Allow.
After the setup is complete, the state of the tool window changes to Connected.
WebStorm remembers the approval, so in the future connection is accepted automatically. To require approval again, use Revoke All Paired Sessions in the tool window settings (click on the toolbar, select Plugin Settings, and then select Revoke All Paired Sessions).

Set up Figma skills

The jb-figma-implement-design skill is bundled with WebStorm and enabled automatically.

The skill is suggested in the completion popup when you start typing a command in the AI Chat tool window.

View the current selection and layers

Synchronize Figma Desktop with WebStorm.
Figma Connect keeps your selection in sync between Figma Desktop and WebStorm in real time, so you switch back and forth less. The synchronization works both ways:
- When you select a frame, a component, or a layer in Figma, the selection appears in the Currently selected in the Figma Connect tool window, together with a thumbnail.
- When you click a layer in the Figma Connect tool window, the layer becomes the current selection, and the corresponding node is focused on the page in Figma.
The Layers section lists the layers on the current Figma page. Expand a layer to browse its child layers.

Add a design to the AI Chat

You can use AI Chat to generate, review, and modify the code that implements a design

To use a design as context for the AI Chat, point to the required item in the Currently selected or Layers list and click .
WebStorm opens the AI Chat tool window where the selected design is already attached.
You can always open the AI Assistant chat by clicking on the right-hand tool windows bar or pressing Alt+Shift+1.
In the AI Chat tool window, type your prompt and send it together with the attached design.
Be specific in your prompt. For example, "Compare my current home page implementation with the attached Figma design and fix any visual or layout differences."
By default, WebStorm attaches the current selection to every new AI chat automatically. To change this behavior, disable the Auto Include Selection in AI Context option as described in Configure Figma Connect settings and behavior.

Reference designs and layers by their id

You can reference a design or a layer by its id in the AI Chat tool window or in the Terminal.

Before you start

If you connected with a Figma Remote MCP server, make sure you have a file key.
It is recommended that you set up agent-specific skills.

Reference a design or a layer by id in AI Chat

To insert a reference to a design or a layer in a prompt, select the corresponding node in the Figma Connect tool window and then drag the selection to the AI Chat. This may be helpful if you only need to target one layer instead of regenerating an entire screen.
Alternatively click next to the required node in the Figma Connect tool window and then paste the id in the AI Chat.

Reference nodes by id in the Terminal

You can also reference designs and layers by their id when running agents from the command line.

Make sure the agent running in the Terminal has its own Figma MCP server configured. That is necessary because WebStorm configures the MCP server only for AI Assistant.
Make sure the agent in the Terminal is connected to the file that is currently open in Figma Desktop.
Drag-and-drop the required node from the Figma Connect tool window to the built-in Terminal.
Alternatively click next to the required node in the Figma Connect tool window and then paste the id in the Terminal.

Configure Figma Connect settings and behavior

Click on the toolbar of the Figma Connect tool window and then select Plugin Settings from the list.
Configure the settings as needed. To enable a setting, set a tick next to it in the popup list, the opens.
Auto Include Selection in AI Context
Attach the current Figma selection to every new AI chat automatically.
Auto-Start Server on IDE Startup
Start the connection automatically when you open a project. This option is enabled by default.
Revoke All Paired Sessions
Remove all saved approvals. After that, the next connection from Figma must be approved again.

05 August 2026