Skip to content

trailofbits/mcp-figma

 
 

Repository files navigation

mcp-figma

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

npm version

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

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"
  ]
}
  1. 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.

  1. You can verify your API key is configured:
Please use mcp-figma to check my API key status
  1. 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

About

No description, website, or topics provided.

Resources

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 82.8%
  • TypeScript 16.4%
  • Shell 0.8%