Figma Connect

Install the Figma Connect plugin

This functionality relies on the Figma Connect plugin, which you need to install and enable.

1. Press Ctrl+Alt+S to open settings and then select Plugins.

2. Find the Figma Connect plugin, and click Install. Restart the IDE if prompted.

• 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

1. Install the Figma Desktop application and open the design file you want to work with.

2. Make sure the Air bundled plugin is enabled in the Settings | Plugins page as described in Plugins.

3. To use the Bring Your Own API Key (BYOK) approach, press Ctrl+Alt+S to open the Settings dialog, go to AI | Air | Accounts, and then specify the provider's API billing account. Refer to Connect AI providers for details.

You can also install the Figma desktop application and enable the Air plugin during the setup process, as described in Set up Figma Connect in GoLand and in Configure code generation with Air from Figma designs respectively.

1. Open the Figma Layers tool window (View | Tool Windows | Figma Layers) and click Set Up.

   

   Follow the on-screen instructions to set up Figma Connect.

2. On the Get Figma Desktop app page of the wizard, click I have the App if you already have a Figma Desktop application, then click Next. Otherwise, click Download.

   

   GoLand opens the Figma Downloads page. Download and install the Figma Desktop application. Click Next when ready.

   

3. On the Run JetBrains Connect plugin in Figma Desktop page, click Open JetBrains Connect.

   

4. On the JetBrains Connect page, click Open in and select the design file to open the plugin in.

   

5. In the right-hand, Plugins, pane, click Run.

   

6. In the Plugins pane, click Connect.

   

   After that the plugin stays waiting for your approval from GoLand to establish connection.

   

7. On the Run JetBrains Connect plugin in Figma Desktop page, click Next.

   

8. On the Allow the incoming connection page of the wizard, click Allow and then click Next.

   

9. After the setup is complete, the state of the tool window changes to Connected.

   

   GoLand 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).

   

1. In the Figma Layers tool window, click Set Up in the notification tooltip to start the wizard

   

2. If the Air plugin is disabled, click Enable Air on the Generate code from your Figma designs with Air page.

   

   GoLand installs the JetBrains Air plugin, restarts, and returns you to the Generate code from your Figma designs with Air page. Click Set Up.

   

3. Follow the instructions on the Enable MCP server in Figma Desktop page.

   

   1. In the Figma Desktop application, switch to the Development mode.

      

   2. Enable the MCP server.

      

   On the Enable MCP server in Figma Desktop page, click Verify Connections.

   GoLand checks that the MCP server is running and that the Figma Desktop application is connected to it. The wizard is closed and you return to the Figma Layers tool window.

   

1. The layers on the current Figma Desktop page are listed in the Figma Layers tool window.

   • Expand a layer to browse its child layers.

   • Use the preview in the Currently selected area to locate the required layer.

2. Synchronize Figma Desktop with GoLand.

   Figma Connect keeps your selection in sync between Figma Desktop and GoLand 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 Figma Layers tool window.

   • When you click a node in the Figma Layers tool window, it captures the focus on the page in Figma.

1. To use a design as context for Air, point to the required item and click next to it.

   

   You can also select and add several layers at once.

   

2. If you already have an open Air session tab in the editor, the selected layer is automatically added to the prompt area. Otherwise, GoLand opens a New Session popup where the selected design is already attached.

   

3. 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."

   

4. By default, GoLand attaches the current selection to every new AI Context automatically. To change this behavior, disable the Auto Include Selection in AI Context option as described in Configure Figma Connect settings and behavior.

1. To inspect a node, select it in the Figma Layers tool window and click next to it.

   

2. The Figma Inspect tool window shows the styles, layouts, and colors of the selected node.

   • Switch the color notation between Hex, RGB, and HSL.

     

   • Switch the language from CSS to Android: Compose or to Android: XML, compare the XML with Figma's own Dev Mode output for the same node.

     

   • To copy the code of a layout, a style, or a color, click next to it.

     

   • To copy the code of the style, the layout, and the colors of a node at once as text, click in the Currently inspecting area.

     

1. To enable the embedded canvas editor, go to Help | Find Action on the main menu, find Registry in the Search Everywhere popup, and then select the checkbox next to figma.embedded.editor.enabled.

2. To open a layer in the canvas, click it in the Currently selected area.

3. Click or on the toolbar to zoom the selection in or out.

4. To restore the original size of the selection, click .

5. To have the zoom level set automatically to ensure that the selection content fits within the embedded editor, click .

6. To show the chessboard background, press .

1. Click on the toolbar of the Figma Layers tool window and then select Plugin Settings from the list.

   

2. 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 Context 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, you need to approve the next connection from Figma again.