Figma MCP Server

Developmenthttp-streamingstdiov1.0.0
Repository

Official Figma MCP server that brings design context directly into AI coding workflows. Provides tools for extracting design information, generating code from Figma selections, taking screenshots, creating and editing Figma files, generating diagrams from Mermaid syntax, searching design systems, managing Code Connect mappings, and uploading assets. Supports both remote (OAuth) and local (desktop app) server modes.

figmadesignuidesign-to-codecomponentsdesign-systemprototypingcollaborationfigjam

Connect

Add this configuration to .claude/mcp.json

Transport:
{
  "mcpServers": {
    "figma": {
      "url": "https://github.com/figma/figma-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "<YOUR_FIGMA_ACCESS_TOKEN>"
      }
    }
  }
}

Tools (10)

get_design_context

Get the design context for a layer or selection in Figma. Returns code output (React + Tailwind by default) that can be customized through prompts. 

{
  "type": "object",
  "required": [
    "nodeId"
  ],
  "properties": {
    "nodeId": {
      "type": "string",
      "description": "Figma node ID to get design context for"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    },
    "clientFrameworks": {
      "type": "string",
      "description": "Target framework (e.g. React, Vue, SwiftUI)"
    }
  }
}

get_metadata

Returns a sparse XML representation of a selection containing basic properties such as layer IDs, names, types, position and sizes. 

{
  "type": "object",
  "properties": {
    "nodeId": {
      "type": "string",
      "description": "Figma node ID (omit to get top-level pages list)"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

get_screenshot

Take a screenshot of a selection in Figma to help preserve layout fidelity in generated code. 

{
  "type": "object",
  "required": [
    "nodeId"
  ],
  "properties": {
    "nodeId": {
      "type": "string",
      "description": "Figma node ID to screenshot"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

get_variable_defs

Returns the variables and styles used in a Figma selection including colors, spacing, and typography tokens. 

{
  "type": "object",
  "required": [
    "nodeId"
  ],
  "properties": {
    "nodeId": {
      "type": "string",
      "description": "Figma node ID"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

use_figma

General-purpose tool for creating, editing, deleting, or inspecting any object in a Figma Design file, FigJam board, or Figma Slides deck. 

{
  "type": "object",
  "required": [
    "fileKey",
    "action"
  ],
  "properties": {
    "action": {
      "type": "string",
      "description": "Action to perform on the Figma file"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

create_new_file

Creates a new blank Figma Design, FigJam, or Figma Slides file in the authenticated user's drafts. 

{
  "type": "object",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "Name for the new file"
    },
    "fileType": {
      "type": "string",
      "description": "Type of file (design, figjam, slides)"
    }
  }
}

generate_diagram

Generates a FigJam diagram from Mermaid syntax or natural language descriptions. Supports flowcharts, Gantt charts, state diagrams, sequence diagrams, architecture diagrams, and ERDs. 

{
  "type": "object",
  "required": [
    "mermaidSyntax"
  ],
  "properties": {
    "fileKey": {
      "type": "string",
      "description": "Optional file key to add diagram to existing file"
    },
    "mermaidSyntax": {
      "type": "string",
      "description": "Mermaid diagram syntax"
    }
  }
}

search_design_system

Searches across connected design libraries to find components, variables, and styles matching a text query. 

{
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "query": {
      "type": "string",
      "description": "Search query for design system assets"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

upload_assets

Uploads assets (PNG, JPG, GIF, WebP) into a Figma file. Max 10MB per asset. 

{
  "type": "object",
  "required": [
    "fileKey",
    "assets"
  ],
  "properties": {
    "assets": {
      "type": "array",
      "description": "Array of asset URLs or paths to upload"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

get_code_connect_suggestions

Detect and suggest mappings of Figma components to code components in your codebase using Code Connect. 

{
  "type": "object",
  "required": [
    "nodeId"
  ],
  "properties": {
    "nodeId": {
      "type": "string",
      "description": "Figma node ID to get suggestions for"
    },
    "fileKey": {
      "type": "string",
      "description": "Figma file key"
    }
  }
}

Resources

This server does not expose any resources.

Prompts

This server does not expose any prompts.

Server Information

Author
Figma (@figma)
Repository
https://github.com/figma/figma-mcp
License
MIT
Version
1.0.0
Stars
5,200
Last Updated
May 27, 2026