Get started with the Figma MCP server

The Figma MCP server brings Figma into your development workflow. AI agents can read your Figma files to get components, variables, layout data, and other design details, so the code they generate reflects how your UI is actually built, not just how it looks.

Agents can also write to Figma. They can create and update components, variables, and full screens with real Figma primitives, reusing what already exists in your libraries. This creates a continuous workflow between code and canvas, with your design system as the source of truth.

To get started:

1. Set up the Figma MCP server
2. Start using the Figma MCP server
3. Check out the Figma Community
4. Create your own skills
5. What’s next?

Set up the Figma MCP server

Figma offers two versions of the MCP server:

• Remote server (recommended): Connects to Figma’s hosted endpoint. It has the broadest set of features and is the best choice for most users.
• Desktop server: Runs locally through the Figma desktop app. It's intended for specific organization and enterprise needs, including Figma for Government.

Set up the remote server (recommended)

The remote server connects directly to Figma at https://mcp.figma.com/mcp. You don't need the Figma desktop app. You sign in with your Figma account the first time you connect.

Follow the steps for your client:

• Claude Code
• Codex
• Cursor
• Gemini CLI
• VS Code
• Xcode (requires Xcode 27 beta)

For other clients, add a new MCP server in your client using the HTTP transport and the URL https://mcp.figma.com/mcp, then sign in to Figma when prompted. If you're not sure how, ask your client or check its documentation. See the list of supported clients.

Set up the desktop server

Step 1: Enable the desktop server in Figma

1. Open the Figma desktop app and make sure it’s up to date.
2. Create or open a Figma Design file.
3. With nothing selected, switch to Dev Mode using the toggle in the toolbar, or press Shift D.
4. In the MCP server section of the right sidebar, click Enable desktop MCP server.

A confirmation message appears at the bottom of the screen when the server is running. The desktop server runs locally at http://127.0.0.1:3845/mcp. You’ll need this address in the next step.

Step 2: Connect your client

The client setup articles include desktop server instructions for each client. For other clients, add the server using this configuration:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Then refresh or restart the server in your client. You should see a successful connection and a list of available tools. If the connection fails or no tools appear, check that the server is still enabled in the Figma desktop app.

Step 3 (optional): Adjust desktop server settings

In the MCP server section of the right sidebar in Dev Mode, click Open settings modal. You can change:

• Image settings: Choose how image assets are handled.
  • Local server: Returns localhost links to images, so you can use the actual image assets wherever your file is rendered.
  • Download assets: Lets the MCP server download image assets, such as icons and images, from Figma into your project.
• Enable Code Connect: Includes Code Connect mappings in responses, so generated code can reuse components from your codebase where possible.

Figma for Government

Figma for Government supports the desktop server only. To set it up, follow the desktop server steps using the Figma for Government desktop app instead of the standard Figma desktop app.

These tools are available:

• get_screenshot
• get_design_context
• get_metadata
• get_figjam
• get_variable_defs
• get_code_connect_map
• add_code_connect_map
• create_design_system_rules

These features aren't currently available on Figma for Government:

• The remote MCP server
• Writing to the canvas, including use_figma
• Sending UI to Figma, including generate_figma_design
• The Code Connect UI (the Code Connect CLI is supported)
• Agent skills

Start using the Figma MCP server

Here are some example prompts to get you started:

• "/figma-use can you help me create a new Figma design using my design system components? Place it in a new Figma file."
• "Capture the UI of my app homepage as frames in <Figma file URL>."
• "Create a flowchart for the user authentication flow using the Figma MCP generate_diagram tool."

To point your agent at a specific design, include a link in your prompt. In Figma, right-click a frame or layer and select Copy link to selection, then paste the link into your prompt. Your client won’t open the link, but it extracts the node ID the MCP server needs to find the right object.

With the desktop server, you can also select a frame or layer in the Figma desktop app and prompt your client to work with your current selection.

Two concepts are important to understand when working with the Figma MCP server:

• Tools let your MCP client take actions with Figma files. See Tools and prompts for the available tools and example prompts.
• Skills tell your MCP client how to use tools effectively. Skills get you higher quality, more reliable results from the Figma MCP server.

Once your server is set up, skills are the best way to start prompting. See Use skills with the Figma MCP server and Figma skills for MCP.

Check out the Figma Community

The Figma Community has a growing library of skills for the Figma MCP server. Browse skills in the Figma Community to find ones that fit your use cases.

Create your own skills

You can create your own skills to teach your agent how your team works in Figma. Custom skills package repeatable workflows so you get more consistent results. See Create skills for the Figma MCP server.

What’s next?

• Explore the Figma MCP collection for a deep dive into using the Figma MCP server.
• Read about the MCP server’s latest features on the Shortcut blog:
  • Agents, meet the Figma canvas
  • The future of design is code and canvas
• See the Guide to the Figma MCP server for an overview of features and the full list of supported clients.