Guide to the Figma MCP server

The Figma MCP server helps developers explore and implement designs quickly and accurately:

• Get design context and code from your Figma designs, FigJam, and Make files
• Capture your live UI as design layers, bringing the interfaces rendered by your code to Figma Design files
• Enhance the way you work with design components and Code Connect

The tools within Figma’s MCP server bring additional context from Figma into your workflow, so your code doesn't just match your existing systems, but your design, too.

MCP servers are part of a standardized interface for AI agents to interact with data sources using the Model Context Protocol.

See our Figma MCP Collection to learn more about the MCP server and bringing Figma into your workflow →

With the server enabled, you can:

• Generate designs from the live UI of your web apps and sites

  Turn live UI from your browser (production, staging, or localhost) into editable design layers in Figma. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement.

  Note: This feature requires the remote Figma MCP server and is currently supported only for Claude Code and Codex by OpenAI.

  This feature is continuously being improved. If you encounter issues, you can report the issues using Fig, our support chatbot, or by emailing support (paid plans).

  Learn more about generating designs from your interfaces

• 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.

• Retrieve FigJam resources

  Access content from your FigJam diagrams and use it in your code generation workflow. Incorporate early-stage ideas, flows, or architecture maps directly into development.

• Retrieve Make resources

  Gather code resources from Make files and provide them to the LLM as context. This can help as you move from prototype to production application.

• Keep your design system components consistent 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

Set up the MCP server

You can connect the Figma MCP server in two ways:

• Remote MCP server: Connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp.
• Desktop MCP server: Runs locally through the Figma desktop app.

Connect the MCP server to your editor

Follow instructions for your specific editor to connect to the Figma MCP server, either locally or remotely. Some clients also support Skills, which add agent-level instructions that help AI tools work more effectively with Figma designs:

About Skills

Skills provide guidance for how an agent should complete specific tasks, using a combination of MCP tool calls and detailed instructions.

While the Figma MCP server exposes individual tools, Skills help agents understand which tools to use, how to sequence them, and how to apply the results when working with Figma designs.

Skills can guide agents through workflows like:

• Connect Figma design components to code components using Code Connect
• Generate design system rules aligned to your codebase 
• Translate designs into production-ready code 

Skills don’t replace MCP connections or add new MCP capabilities. They reduce setup and guesswork by packaging recommended workflows into reusable instructions.

Prompt your MCP client

The Figma MCP server introduces a set of tools that help LLMs translate designs in Figma. Once connected, you can prompt your MCP client to access a specific design node.

For a complete list of tools and examples, see Tools and Prompts.

First, follow the instructions to install the Figma MCP server for your preferred MCP client. We provide instructions for:

• Claude Code
• Codex by OpenAI
• Cursor
• VS Code

For other MCP clients, follow the instructions in your client's documentation for adding MCP servers. See the table under Connect the MCP server to your editor for links.

Example: Get design context

Getting design context and code from files is link-based. To get design context:

1. In Figma Design, select the layer you want to get design context for.
2. In the address bar of your browser, copy the link to a frame or layer in Figma.

3. In your MCP client, paste the URL and prompt your client to help you implement the design.

   

Example: Send UI to Figma

Sending the live UI of your web app or site to Figma is done through conversation with your MCP client:

1. Prompt your MCP client: "Start a local server for my app and capture the UI in a new Figma file."
2. Follow the steps your client provides. Your client will open a browser window for you, or give you a link to follow.
3. Use the capture toolbar to capture pages, elements, and states of your web app or site.
4. Let your client know when you're finished. Your client will give you a link to open the Figma file that was created.

Improving the MCP server output

For the best output, we recommend setting up rules to guide the agent. To get you started, we have some helpful example rules.