Figma MCP Server

A Model Context Protocol (MCP) server that provides comprehensive access to the Figma API. This server exposes Figma's design data and operations as MCP tools, enabling AI assistants and other applications to interact with Figma files, components, styles, and more.

Features

File Operations

• Get Files: Retrieve complete Figma file data including document structure, styles, and components
• Get File Nodes: Fetch specific nodes from files efficiently
• Get File Versions: Access version history and restore previous file states
• Export Images: Generate PNG, JPG, SVG, or PDF exports of design elements
• Get Image Fills: Extract all image assets used in a file

Collaboration

• Comments: Read, create, and delete comments
• Comment Reactions: Add emoji reactions to comments
• Dev Resources: Attach developer documentation links to design elements

Design System

• Components: Browse and retrieve reusable component data
• Component Sets: Access component variants and their properties
• Styles: Retrieve text styles, color styles, effects, and grids
• Variables: Work with design tokens (colors, numbers, strings, booleans)

Organization

• Team Projects: List projects within a team
• Project Files: Browse files within projects
• User Info: Get authenticated user information

Installation

npm install figma-mcp

Or install directly from the repository:

git clone https://github.com/SamueleReply/figma-mcp.git
cd figma-mcp
npm install

Configuration

Get Your Figma Access Token

1. Log in to Figma
2. Go to Settings → Account → Personal Access Tokens
3. Click "Generate new token"
4. Copy the token (you won't be able to see it again!)

Environment Variables

Create a .env file in your project root:

FIGMA_ACCESS_TOKEN=your_figma_access_token_here

MCP Configuration

Add this to your MCP client configuration (e.g., for Cursor or other MCP-compatible tools):

Option 1: Using npx (recommended)

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_access_token_here"
      }
    }
  }
}

Option 2: Using local installation

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/figma-mcp/mcp-server.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_access_token_here"
      }
    }
  }
}

Available Tools

File Operations

figma_get_file

Retrieve a complete Figma file with all its data.

{
  "fileKey": "FILE_KEY",
  "options": {
    "version": "VERSION_ID",  // optional
    "ids": "1:5,1:6",         // optional: specific node IDs
    "depth": 2,               // optional: traversal depth
    "geometry": "paths"       // optional: include vector data
  }
}

figma_get_file_nodes

Get specific nodes from a file (more efficient than getting entire file).

{
  "fileKey": "FILE_KEY",
  "nodeIds": "1:5,1:6,1:7"
}

figma_get_file_versions

List all versions of a file with timestamps and user info.

{
  "fileKey": "FILE_KEY"
}

figma_get_images

Export nodes as images in various formats.

{
  "fileKey": "FILE_KEY",
  "nodeIds": "1:5,1:6",
  "options": {
    "format": "png",    // png, jpg, svg, pdf
    "scale": 2          // 0.01 to 4
  }
}

Comments

figma_get_comments

Retrieve all comments from a file.

{
  "fileKey": "FILE_KEY"
}

figma_post_comment

Create a new comment or reply.

{
  "fileKey": "FILE_KEY",
  "message": "This looks great!",
  "commentOptions": {
    "client_meta": {
      "x": 100,
      "y": 200,
      "node_id": "1:5"
    },
    "comment_id": "PARENT_COMMENT_ID"  // for replies
  }
}

Components & Styles

figma_get_team_components

List all components in a team.

{
  "teamId": "TEAM_ID",
  "options": {
    "page_size": 50
  }
}

figma_get_file_components

Get components from a specific file.

{
  "fileKey": "FILE_KEY"
}

figma_get_team_styles

List all styles in a team.

{
  "teamId": "TEAM_ID"
}

Variables (Design Tokens)

figma_get_local_variables

Get local variables from a file.

{
  "fileKey": "FILE_KEY"
}

figma_get_published_variables

Get published variables that can be shared across files.

{
  "fileKey": "FILE_KEY"
}

Organization

figma_get_team_projects

List projects in a team.

{
  "teamId": "TEAM_ID"
}

figma_get_project_files

Get all files in a project.

{
  "projectId": "PROJECT_ID"
}

figma_get_me

Get authenticated user information.

{}

Dev Resources

figma_create_dev_resources

Attach documentation links to design elements.

{
  "fileKey": "FILE_KEY",
  "devResources": [
    {
      "node_id": "1:5",
      "url": "https://storybook.example.com/button",
      "name": "Button Component"
    }
  ]
}

Finding IDs

File Key

From the Figma URL: https://www.figma.com/file/FILE_KEY/file-name

Node ID

Select a node in Figma, the URL will show: https://www.figma.com/file/FILE_KEY?node-id=1-5 Convert 1-5 to 1:5 for the API.

Team ID

From your team URL: https://www.figma.com/files/team/TEAM_ID/team-name

Project ID

Use figma_get_team_projects to list projects and get their IDs.

Usage Examples

Using with Cursor AI

Once configured in Cursor's MCP settings, you can ask questions like:

• "Get the design file at [figma-url] and show me all the components"
• "Export all buttons from this Figma file as PNGs"
• "What comments are on this design?"
• "List all color variables in this file"
• "Show me the component structure of [file]"

Programmatic Usage

const figma = require('figma-mcp');

const client = figma.initialize({
  accessToken: 'your_token_here'
});

// Get a file
const file = await client.getFile('FILE_KEY');

// Get specific nodes
const nodes = await client.getFileNodes('FILE_KEY', '1:5,1:6');

// Export images
const images = await client.getImages('FILE_KEY', '1:5', {
  format: 'png',
  scale: 2
});

// Get comments
const comments = await client.getComments('FILE_KEY');

// Get team components
const components = await client.getTeamComponents('TEAM_ID');

API Reference

All methods return Promises that resolve to the API response data. Errors include the full API response for debugging.

FigmaClient Methods

• getFile(fileKey, options) - Get file data
• getFileNodes(fileKey, nodeIds, options) - Get specific nodes
• getFileVersions(fileKey) - Get version history
• getImages(fileKey, nodeIds, options) - Export images
• getImageFills(fileKey) - Get image fills
• getComments(fileKey) - Get comments
• postComment(fileKey, message, options) - Create comment
• deleteComment(fileKey, commentId) - Delete comment
• getTeamProjects(teamId, options) - List projects
• getProjectFiles(projectId, options) - List files in project
• getTeamComponents(teamId, options) - List team components
• getFileComponents(fileKey) - Get file components
• getComponent(componentKey) - Get component details
• getTeamComponentSets(teamId, options) - List component sets
• getFileComponentSets(fileKey) - Get file component sets
• getComponentSet(componentSetKey) - Get component set details
• getTeamStyles(teamId, options) - List team styles
• getFileStyles(fileKey) - Get file styles
• getStyle(styleKey) - Get style details
• getMe() - Get user info
• getDevResources(fileKey, options) - Get dev resources
• createDevResources(fileKey, resources) - Create dev resources
• updateDevResources(fileKey, resources) - Update dev resources
• deleteDevResources(fileKey, ids) - Delete dev resources
• getLocalVariables(fileKey) - Get local variables
• getPublishedVariables(fileKey) - Get published variables
• postVariables(fileKey, data) - Create/update variables

Permissions

Different operations require different Figma permissions:

• Read operations: Require file access (view or edit)
• Comments: Require comment permissions
• Dev Resources: Require edit permissions
• Variables: Require edit permissions
• Team/Project data: Require team membership

Troubleshooting

"Invalid token" error

• Verify your token is correct in the .env file or MCP config
• Check that the token hasn't expired
• Ensure the token has the necessary permissions

"File not found" error

• Verify the file key is correct
• Check that the authenticated user has access to the file
• Make sure the file hasn't been deleted

"Node not found" error

• Verify node IDs are in the correct format (1:5 not 1-5)
• Check that the nodes exist in the file

Development

Running Tests

npm test

Starting the MCP Server

npm start
# or
node mcp-server.js

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues, questions, or contributions, please visit: https://github.com/SamueleReply/figma-mcp/issues

Related Projects

• Contentstack MCP - MCP server for Contentstack CMS
• Model Context Protocol - Learn more about MCP

Credits

Created by SamueleReply

Built with the Model Context Protocol SDK