mcp -guide

A guide on how to use the Figma MCP server

Installation

Run this command in your terminal to add the MCP server to Claude Code.

Run in terminal:

Command

claude mcp add --transport stdio figma-mcp-server-guide node path/to/server.js \
  --env FIGMA_MCP_API_KEY="API key for Figma MCP access (if applicable)" \
  --env FIGMA_MCP_API_URL="URL of the MCP server (if applicable)"

How to use

The Figma MCP Server Guide describes a server that exposes CAD-like design context and code-generation capabilities directly from Figma into your AI-assisted workflow. Once connected through an MCP client (such as VS Code, Cursor, Claude Code, or any editor supporting Streamable HTTP MCP endpoints), you can invoke tools like get_design_context to fetch design context for a selected Figma node, generate_figma_design to capture or convert web pages into Figma designs, and get_variable_defs to extract design tokens such as colors, typography, and spacing. Code Connect integration lets you reuse real components from your codebase to improve generated output consistency. To use these tools, connect to the MCP endpoint and prompt the agent with a target Figma URL or node, for example requesting design context for a particular frame or asking to generate code in a specified framework. The server’s tools are designed to work with common editors that support MCP and provide guidance for Code Connect or design-system-aware workflows.

How to install

Prerequisites:

A supported runtime environment (Node.js for the Node-based server or a compatible runtime if using a different deployment path).
Access to the Figma MCP server URL (as documented by Figma).

Install and run steps (adjust for your environment):

Ensure you have Node.js installed (nvm use or node -v).
Obtain or clone the MCP server package for Figma (this guide uses a placeholder server entry at path/to/server.js).
Install necessary dependencies (if a package.json is provided):

npm install
Start the MCP server:

node path/to/server.js
Verify the server is reachable (e.g., via http GET to the MCP endpoint or by using your MCP client to connect to the URL).

Note: If you host this as a Docker container or via another runtime, adapt the command accordingly (for example, docker run -i image-name or uvx/python-based launch).

Additional notes

Tips and considerations:

Rate limits: Figma MCP tools that read data from Figma are subject to rate limits; tools that write to Figma files may be exempt. Review plan-specific limits in the README, especially for Starter, Dev, and higher-tier seats.
Server URL: The MCP endpoint used by clients is typically the URL provided by the Figma MCP server (e.g., https://mcp.figma.com/mcp). Ensure your client is configured to point to this URL.
Code Connect: Enable and configure Code Connect to reuse existing components from your codebase for more consistent generated output.
Client support: VS Code with MCP, Cursor, Claude Code, and other editors that support Streamable HTTP MCP can connect to this server. If your editor cannot natively navigate URLs, you may still paste the Figma frame URL and let the MCP server identify the node via node-id extraction.
Environment variables: Depending on deployment, you may need to set FIGMA_MCP_API_URL and FIGMA_MCP_API_KEY or equivalent credentials. Keep secrets secure and avoid committing them to source control.