- Home
- MCP servers
- MCP Figma Server
MCP Figma Server
- typescript
4
GitHub Stars
typescript
Language
6 months ago
First Indexed
2 months ago
Catalog Refreshed
Documentation & install
Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.
Installation
Add the following to your MCP client configuration file.
Configuration
View docs{
"mcpServers": {
"smithery-ai-mcp-figma": {
"command": "npx",
"args": [
"-y",
"mcp-figma"
]
}
}
}You can integrate Figma data and actions into your AI workflows with this MCP server. It exposes Figma file access, images, comments, teams, components, and styles through simple MCP endpoints, so you can build powerful assistants that read and manipulate your Figma assets.
How to use
To use this MCP server with your MCP client, run the stdio server locally and point your client at the provided command. You will authenticate with a Figma API key once, and then you can perform actions such as getting files, fetching images, managing comments, and retrieving components and styles. Use the available tool endpoints to fetch data or post updates directly into Figma projects. Start by configuring the MCP client to invoke the mcp-figma tool, then set your API key when prompted. After that, call any supported function by name to perform the corresponding Figma operation.
How to install
Prerequisites you need on your machine before installing are Node.js and npm (Node.js 14+ is recommended). Ensure you have permission to install global npm packages if you choose the global installation path.
npm install -g mcp-figma
# Or install locally in a project
npm install mcp-figma
# Update to latest version (global)
npm update -g mcp-figma
Configuration and usage notes
Configure the MCP client to run the mcp-figma tool. You will provide your Figma API key during the first use and it will be stored for future sessions.
Stored API key location: your home directory under ~/.mcp-figma/config.json. The key is loaded automatically on subsequent runs.
Verify that your API key is configured before making requests.
Once configured, you can perform Figma operations such as getting a file, retrieving nodes, getting images, and managing comments and styles through the MCP client commands.
Security and best practices
Treat your Figma API key like a password. Do not expose it in public logs or shared configurations. Rotate your API key if you suspect it was exposed.
Limit the scope of what the API key can access if your key supports scoped permissions. Prefer a dedicated key for tooling rather than using a personal master key.
Troubleshooting
If you encounter authentication issues, re-check that the API key is correct and that it is stored in the expected path. Use the status check command to confirm the key is configured.
If a request fails due to a network error, verify your network connectivity and ensure the Figma API is reachable from your environment. Check any required firewall rules or proxies.
Available 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 in the MCP setup
get_file
Retrieve a Figma file by its key or ID
get_file_nodes
Fetch specific nodes from a Figma file by node IDs
get_image
Obtain images for specified nodes within a Figma file
get_image_fills
Get URLs for images used as fills in a Figma file
get_comments
Retrieve comments attached to a Figma file
post_comment
Post a new comment on a Figma file
delete_comment
Delete a comment from a Figma file
get_team_projects
List projects for a Figma team
get_project_files
List files within a Figma project
get_team_components
Retrieve components available to a team
get_file_components
Fetch components from a specific file
get_component
Get a component by its key
get_team_component_sets
Retrieve component sets for a team
get_team_styles
List styles for a team
get_file_styles
List styles defined in a file
get_style
Get a style by key