figma -full
figma mcp
claude mcp add --transport stdio echoxiawan-figma-mcp-full-server npx figma-mcp-full-server \ --env FIGMA_TOKEN="figd_your_figma_token_here"
How to use
This MCP server integrates with the Figma API to export images from Figma designs and extract detailed style data, including CSS generation. It offers a suite of tools for image export, style extraction, batch processing, and design element analysis. Core capabilities include getting node images in various formats (PNG, JPG, SVG, PDF), retrieving style data with optional CSS output, batch exporting multiple nodes, and analyzing design elements such as images, vectors, and components. Use the provided tools to fetch assets, generate CSS, obtain file information, and inspect design elements directly from a Figma URL. The server is designed to retry on transient failures and provides structured error messages for troubleshooting.
In Claude Desktop, configure an MCP server pointing to figma-mcp-full-server (recommended via npx). You can then invoke tools like get_figma_image to export images, get_figma_styles to retrieve styling information, export_multiple_images for batch tasks, get_file_info for basic file metadata, get_node_images to collect all image assets under a node, get_node_svg to obtain SVG data for a node, and extract_node_elements to analyze design elements. Each tool takes a Figma URL (and optional parameters) and returns structured results suitable for downstream usage in your workflow.
How to install
Prerequisites:
- Node.js v18 or later installed on your system
- npm or pnpm
- A Figma Personal Access Token (token starts with figd_)
Installation options:
Option 1: Run via npx (recommended, no install)
npx figma-mcp-full-server figd_your_figma_token_here
Option 2: Global install
# Install globally
npm install -g figma-mcp-full-server
# Run
figma-mcp-full-server figd_your_figma_token_here
Option 3: Local project install
# Install in your project
npm install figma-mcp-full-server
# Run
npx figma-mcp-full-server figd_your_figma_token_here
# or
node_modules/.bin/figma-mcp-full-server figd_your_figma_token_here
Option 4: Run from source (for development)
git clone <repository>
cd figma-mcp
npm install
npm run build
# Run
npm start figd_your_figma_token_here
# or
node build/index.js figd_your_figma_token_here
Notes:
- Replace figd_your_figma_token_here with your actual Figma token.
- Ensure Node.js version is ≥ 18 for compatibility.
Additional notes
Tips and common considerations:
- Environment variable: Set FIGMA_TOKEN in your environment or config; never hardcode tokens in scripts.
- If the MCP server won’t start, ensure absolute paths are used for node entries and that Node.js is up to date.
- For Claude Desktop config, using the npx approach (Setup A) keeps the token fresh and avoids pinning a version.
- When using batch exports, the server will automatically split large node sets into batches to respect URL length and API limits.
- If you encounter 'Cannot find module' errors, verify you are starting from the built output (build/index.js) rather than TypeScript sources.
- Use the provided troubleshooting tips to diagnose common issues such as access permissions or token validity.
Related MCP Servers
iterm
A Model Context Protocol server that executes commands in the current iTerm session - useful for REPL and CLI assistance
mcp
Octopus Deploy Official MCP Server
furi
CLI & API for MCP management
editor
MCP Server for Phaser Editor
DoorDash
MCP server from JordanDalton/DoorDash-MCP-Server
mcp
MCP сервер для автоматического создания и развертывания приложений в Timeweb Cloud