Figma Context Access Endpoint

This implements a ModelContextProtocol (MCP) nexus that empowers autonomous digital assistants to engage with artifacts residing in Figma documents. It furnishes the necessary capabilities for inspecting visual designs, managing conversational feedback threads, and performing systematic evaluations via the established MCP specification.

Core Capabilities

• Inclusion of a specified Figma document into the active conversational context by supplying its unique identifier (URL).
• Retrieval and deposition of annotations concerning the visual elements within the designated file.

Configuration for Claude Integration

Automated Deployment via Smithery

Leverage the Smithery utility to install the Figma Context Access Endpoint automatically for use with Claude Desktop:

npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude

1. Acquire and install the Claude desktop application from claude.ai/download.

2. Obtain Credentials from Figma (Navigation: Your Profile Icon (top-left) -> Security Settings). Ensure that permissions for accessing 'File content' and 'Comments' are explicitly granted.

3. Establish the configuration within Claude to recognize this MCP service. For initial setup, execute the following command in your terminal to generate or update the configuration file:

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

If claude_desktop_config.json already exists, merge the figma-mcp configuration block into the existing mcpServers object.

1. Initiate a restart of the Claude Desktop application.

2. Verify successful activation by observing the presence of the tool icon (resembling a hammer) displaying the count of available functionalities within the Claude user interface.

Operational Example

Commence a new dialogue session with Claude Desktop and input a prompt similar to this structure:

Can you detail the contents of this design specification?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Practical Demonstration

A visual walkthrough illustrating a more complex interaction flow is available here:

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

Development Environment Setup

Utilizing the Inspector Tool for Validation

The MCP Inspector is recommended for development, testing, and real-time monitoring of server communications. Consult the Inspector documentation for complete setup guidelines.

The local testing invocation command is:

npx @modelcontextprotocol/inspector npx figma-mcp

Source Code Modification Workflow

1. Duplicate the source repository.
2. Install required package dependencies:

npm install

1. Compile the project artifacts:

npm run build

1. To enable live reloading and automatic recompilation during active development:

npm run watch

Exposed Service Functions

The endpoint exposes the following distinct operational methods via the MCP interface:

• add_figma_file: Incorporates a Figma resource into the agent's working set using its URL.
• view_node: Retrieves a preview image (thumbnail) for a designated element within the Figma structure.
• read_comments: Fetches the complete thread of annotations associated with the file.
• post_comment: Submits a new annotation targeted at a specific component within the Figma document.
• reply_to_comment: Appends a response to an antecedent annotation within the file structure.

Each defined function is precisely engineered to deliver specialized interaction capabilities with Figma resources conforming to the ModelContextProtocol interface standards.