mcp-figma v0.1.1

mcp-figma

A Model Context Protocol (MCP) server for Figma API integration, designed to be used with Claude and other MCP-compatible AI assistants.

Features

This MCP server provides access to Figma API functionality:

• File operations (get file, get nodes, get images)
• Comments management
• Team/project management
• Components and styles access
• Persistent API key storage

Installation

Installing via Smithery

To install mcp-figma for Claude Desktop automatically via Smithery:

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

NPM Installation

# Install globally
npm install -g mcp-figma

# Or install locally in a project
npm install mcp-figma

# Update to latest version
npm update -g mcp-figma

Usage with Claude

1. Add mcp-figma to your Claude configuration:

"mcp-figma": {
  "command": "npx",
  "args": [
    "-y",
    "mcp-figma"
  ]
}

2. Get your Figma API key:

   • Log in to your Figma account
   • Go to Account Settings (click your profile picture > Settings)
   • Go to the "Personal access tokens" section
   • Click "Create a new personal access token"
   • Enter a name for your token and click "Create token"
   • Copy your token (starts with "figd_")

3. When using Claude, the first time you'll need to set your Figma API key:

Please use mcp-figma to set my Figma API key: figd_xxxxxxxxxxxxxxxxxxxxxxx

Your API key will be stored in ~/.mcp-figma/config.json and will be automatically loaded in future sessions.

3. You can verify your API key is configured:

Please use mcp-figma to check my API key status

4. Then use any of the available Figma API functions:

Please use mcp-figma to get the file with key abc123

Available Tools

The server provides the following tools:

• set_api_key: Set your Figma API personal access token (saved to config)
• check_api_key: Check if an API key is already configured
• get_file: Get a Figma file by key
• get_file_nodes: Get specific nodes from a Figma file
• get_image: Get images for nodes in a Figma file
• get_image_fills: Get URLs for images used in a Figma file
• get_comments: Get comments on a Figma file
• post_comment: Post a comment on a Figma file
• delete_comment: Delete a comment from a Figma file
• get_team_projects: Get projects for a team
• get_project_files: Get files for a project
• get_team_components: Get components for a team
• get_file_components: Get components from a file
• get_component: Get a component by key
• get_team_component_sets: Get component sets for a team
• get_team_styles: Get styles for a team
• get_file_styles: Get styles from a file
• get_style: Get a style by key

For detailed usage examples, see USAGE.md.

License

MIT