Figma MCP

How to Install and Use Figma MCP

Figma MCP is a helpful tool that connects your Figma designs with AI to quickly turn your designs into code. It runs either on your computer or connects to a remote server hosted by Figma. Here is a simple guide to get you started with installing and using Figma MCP.

Setting Up the Desktop MCP Server

First, you can run the Figma MCP server locally on your computer using the Figma desktop app. This helps you work faster by keeping everything on your machine.

To do this, follow these steps:

1. Download the Figma Desktop App
   Get the latest version of the Figma desktop app from here and install it.

2. Open or Create a Design File
   Launch the app and either open an existing Figma design or make a new one.

3. Enter Dev Mode
   Look for the toolbar at the bottom and switch to Dev Mode. You can also press Shift + D on your keyboard to toggle it.

4. Enable the MCP Server
   Inside the Inspect panel, find the MCP server section and click on Enable desktop MCP server.

After a few moments, you will see a confirmation message that the server is running. It will be available at this local address for your tools to connect:
http://127.0.0.1:3845/mcp

Connecting Figma MCP to Your Code Editor

Next, you want your code editor to talk to the MCP server so you can use your design information inside your coding workspace.

Here’s what to do:

• Check if your editor supports Figma MCP. Editors like VS Code, Android Studio, and others work well.
• Follow the specific connection guide for your editor. For example, if you use VS Code, follow the instructions at the VS Code MCP server page.
• When setting up, use the MCP server address you got before (http://127.0.0.1:3845/mcp) if you run the desktop server.
• If you want, you can also connect to the Remote MCP server hosted by Figma without installing anything locally.

Example: Connecting to MCP With Simple Code

If you want to try connecting to the MCP server with a simple code example, you can use a curl command like this to check it’s working:

curl http://127.0.0.1:3845/mcp/status

This will return the status of your local MCP server.

How to Use Figma MCP with Your AI Client

Once connected, you can ask your AI tool to help you by pointing it to a design in Figma. There are two main ways:

• Selection-based (Desktop server only)
  Select a frame or a layer in the Figma desktop app. Then ask your AI client to use this current selection to generate code or give you information.

• Link-based
  Copy a link to a frame or layer from Figma and give it to your AI client. The client extracts the design context and uses it to help you.

Summary

1. Download and open the Figma desktop app.
2. Enter Dev Mode and enable the MCP server.
3. Use the local address http://127.0.0.1:3845/mcp to connect your editor or AI tool to Figma MCP.
4. Use selection or links to provide design context to your AI assistant.

Figma MCP makes it easier to turn your designs into real code by connecting your work tools and your Figma files through a simple, standardized server. Start with the desktop server for easy local use or go remote for cloud access.