Figma Connect

Figma Connect lets you bring designs from Figma into WebStorm and use them as context for AI Assistant. Select a frame, component, or layer in Figma Desktop, add it to an AI chat, and ask AI Assistant to help you implement the corresponding code – 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

As an experimental feature, Figma Connect is disabled by default. It is controlled by the figma.integration.enabled key in the Registry. To enable it:
1. Press Ctrl+Shift+A or choose Help | Find Action from the main menu. In the popup that opens, start typing Registry, select the corresponding item and press Enter.
2. Find the figma.integration.enabled key and select the checkbox next to it to enable the feature.
3. Restart WebStorm to apply the change.
Make sure AI Assistant is installed, and you are logged in to your JetBrains Account with an active AI Assistant subscription.
Install the Figma Desktop app and open the design file you want to work with.
Figma Connect relies on the Figma MCP server, which requires a paid Figma seat with Dev Mode or Full Design access. It is not available on free seats.

Install the JetBrains Connect plugin in Figma

WebStorm communicates with Figma through a companion plugin that runs inside Figma Desktop.

Open the JetBrains Connect plugin page on Figma Community.
Click Open in… and choose the file you want to work with.
The plugin installs and opens directly on that file in Figma Desktop, so you don't have to find it through the Figma menus manually.

Connect Figma to WebStorm

Open the Figma Connect tool window (View | Tool Windows | Figma Connect) and follow the on-screen instructions.
In Figma Desktop, run the JetBrains Connect plugin on the design file you are currently working with. To do that, open the file, click and then select Plugins | From JetBrains | JetBrains Connect.
By default, you have to run the JetBrains Connect plugin manually for every file you open. To start it automatically, open the plugin's context menu in Figma and select Run automatically for all files.
Select Pin to top in the plugin's context menu so its icon stays at the top of the Figma plugins list. The plugin can disconnect when you navigate away from its page, and a pinned icon lets you reconnect with a quick double-click.
In the plugin, click Connect and return to WebStorm.
In WebStorm, click Allow in the banner that asks you to approve the connection.

When the connection is established, the status in the tool window toolbar 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.

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 AI Chat

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.

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.

17 July 2026