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:
Press Ctrl+Shift+A or choose from the main menu. In the popup that opens, start typing
Registry, select the corresponding item and press Enter.Find the figma.integration.enabled key and select the checkbox next to it to enable the feature.
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.
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 () and follow the on-screen instructions.
In Figma Desktop, run the JetBrains Connect plugin on the file you are working with.
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
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, component, or layer in Figma, it appears under Currently selected in the Figma Connect tool window, together with a thumbnail.
When you click a layer in the tool window, it 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.
You can also add several layers to an AI chat at once: use the Add to Context action on each layer directly in the list, without focusing them in Figma first.
Add a design to an AI chat
To use a design as context for AI Assistant, point to an item under Currently selected or Layers and click Add to Context. The design is attached to the AI Assistant chat – the same chat window in WebStorm that you use to talk to AI Assistant – where you can type your prompt and send it together with the design.
You can open the AI Assistant chat by clicking 
on the right side of the WebStorm window.
The design is added to the chat input as an attachment, so you can type your prompt and send it together with the design.
To attach the current selection to every new AI chat automatically, enable Auto Include Selection in AI Context in the tool window settings.
Settings
To configure Figma Connect, click 
on the toolbar of the Figma Connect tool window.
The following options are available:
- 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.