implement-design

• Generate code from selected frames

Select a Figma frame and turn it into code. Great for product teams building new flows or iterating on app features.

• Extract design context

Pull in variables, components, and layout data directly into your IDE. This is especially useful for design systems and component-based workflows.

• Code smarter with Code Connect

Boost output quality by reusing your actual components. Code Connect keeps your generated code consistent with your codebase.

[Learn more about Code Connect →](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect)

Step 1: Enabling the MCP server

Figma provides two ways to use the MCP server. Remotely using our hosted server, and locally using Figma's desktop app.

If you want to use our remote server, there's nothing to enable, it's already available! To get the local desktop server set up, you'll need to follow the steps below.

#### Enabling the desktop server

1. Open the [Figma desktop app](https://www.figma.com/downloads/) and make sure you've [updated to the latest version](https://help.figma.com/hc/en-us/articles/5601429983767-Guide-to-the-Figma-desktop-app#h_01HE5QD60DG6FEEDTZVJYM82QW).
2. Create or open a Figma Design file.
3. In the toolbar at the bottom, toggle to [Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode) or use the keyboard shortcut ShiftD.
4. In the MCP server section of the inspect panel, click Enable desktop MCP server.

You should see a confirmation message at the bottom of the screen letting you know the server is enabled and running.

> [!TIP]

> The server runs locally at this location:

>

> ```bash

> http://127.0.0.1:3845/mcp

> ```

>

> Keep this address handy for your configuration file in the next step.

Step 2: Set up your MCP client

Different MCP clients require slightly different setups to get connected to your MCP server. Follow the instructions below for your specific client to add the Figma MCP server.

#### VS Code

1. Use the shortcut ⌘ Shift P to search for MCP:Add Server.
2. Select HTTP.
3. Copy the correct server url from below, and paste the server url in the search bar. Then hit Enter.

Remote server url - https://mcp.figma.com/mcp

Local server url - http://127.0.0.1:3845/mcp

1. When you're prompted for a server ID, enter one of the following:

- figma for the remote MCP server

- figma-desktop for the desktop MCP server

1. Select whether you want to add this server globally or only for the current workspace. Once confirmed, you'll see a configuration like this in your mcp.json file: