Provides tools for fetching Figma design specifications, file metadata, and frame dimensions, while allowing for the export of frames and sections as high-resolution images.
Integrates with Jira workflows to automatically detect Figma links within tickets and provide visual design context directly alongside ticket information.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Figma MCP ServerGet the design and export the sections from https://www.figma.com/design/ABC123/MyProject"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Figma MCP Server
A Model Context Protocol (MCP) server that brings Figma designs directly into Claude Code. View design specifications, export frames as images, and reference visual context without leaving your development environment.
Overview
Implementing designs accurately requires constant reference to Figma. This MCP server eliminates context switching by:
Fetching design information - Get file names, frame details, and dimensions
Exporting images - Download frames as high-resolution PNGs
Smart section splitting - Large frames are automatically split into readable sections
Seamless integration - Works standalone or integrated with jira-mcp
Features
Feature | Description |
Design Info | File name, last modified, frame dimensions |
Image Export | Export frames as PNG, SVG, JPG, or PDF |
Auto-Scaling | 2x scale by default for retina clarity |
Section Detection | Large frames split into individual sections |
Batch Export | Export multiple frames efficiently |
URL Parsing | Supports file, design, and prototype URLs |
Installation
Prerequisites
Node.js 18+
Claude Code CLI
Figma account with API access
Step 1: Add to Claude Code
Step 2: Get Your Figma Token
Go to Figma Account Settings
Scroll down to "Personal access tokens"
Click "Generate new token"
Enter a description (e.g., "Claude Code MCP")
Click "Generate token"
Copy the token (you won't be able to see it again)
Step 3: Configure Credentials
Run the setup with your token:
Or run interactively (will prompt for the token):
Step 4: Verify
Restart Claude Code and run /mcp to verify the server is connected.
Alternative: Manual Installation
If you prefer to install manually:
Then add to Claude Code:
Usage
Fetch a Design
Example Output
Smart Section Export
For large frames (>1500px wide or >2000px tall), the server automatically:
Detects child frames, components, and groups
Exports each section separately at 2x scale
Provides better detail than a single compressed image
Limits to 10 sections by default (configurable)
This is especially useful for:
Full-page designs with multiple sections
Component libraries
Design system documentation
API Reference
Tools
Tool | Description | Parameters |
| Fetch design from URL |
|
| Export specific frame |
|
Parameters
Parameter | Default | Description |
|
| Export images |
|
| Split large frames into sections |
|
| Maximum sections to export |
|
| Export scale (1-4) |
|
| Export format (png, svg, jpg, pdf) |
Configuration
Config stored at ~/.config/figma-mcp/config.json:
Error Handling
The server provides clear error messages:
Error | Meaning | Solution |
| Too many API requests | Wait a few minutes |
| Invalid token or no file access | Check token permissions |
| Invalid URL or deleted file | Verify the Figma URL |
Integration with Jira MCP
When used alongside jira-mcp:
Figma links in Jira tickets are automatically detected
Designs are fetched without manual intervention
Images appear inline with ticket context
This creates a seamless workflow:
Security
Tokens stored locally in
~/.config/figma-mcp/config.jsonConfig excluded from git via
.gitignoreTokens only transmitted to Figma API
Exports saved to
~/.config/figma-mcp/exports/
License
MIT
Related
jira-mcp - Jira MCP server with Figma integration
Model Context Protocol - MCP specification
Figma API - Figma REST API documentation