Figma MCP

🚀 Figma Image and Text Content Extraction Service

This service is designed to efficiently extract text and image content from Figma files, meeting the needs of various development scenarios.

🚀 Quick Start

📦 Installation

Install via Smithery

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

Local Development and Packaging

1. Clone the repository: git clone <repository-url>
2. Install dependencies: pnpm install
3. Copy .env.example and rename it to .env, then fill in the Figma API access token.
4. Start in development mode: pnpm run dev
5. Build the project: pnpm run build
6. Package the service: pnpm run publish:local

After packaging, a .tgz file will be generated in the root directory, for example, figma-mcp-server-1.0.0.tgz.

Local Installation and Usage

Method 1: Install from NPM (Recommended)

npm install -g @yhy2001/figma-mcp-server
figma-mcp --figma-api-key=<your-figma-api-key>

Method 2: Install using the local package

npm install -g ./figma-mcp-server-1.0.0.tgz
figma-mcp --figma-api-key=<your-figma-api-key>

Method 3: Use in a project

npm install @yhy2001/figma-mcp-server --save
# Add the startup script to package.json:
"start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"

⚙️ Command-line Parameters

• --version: Display the version number.
• --figma-api-key: Required Figma API access token.
• --port: Service running port (default: 3333).
• --stdio: Run in command mode instead of the default HTTP/SSE mode.
• --help: Display help information.

🔗 Connect with AI Tools

📄 Configuration File Usage Example

// MCP client configuration:
{
  "mcpServers": {
    "Figma MCP": {
      "command": "npx",
      "args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

// Reference for local runtime:
{
  "mcpServers": {
    "Figma MCP": {
      "url": "http://localhost:3333/sse",
      "env": {
        "API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

🔌 Steps to Connect with Cursor

1. Start the service: figma-mcp --figma-api-key=<your-figma-api-key>
2. In Cursor settings → Features tab, add the MCP server address http://localhost:3333.
3. After verifying the successful connection, use Composer in Agent mode.
4. Paste the Figma file link and ask Cursor to implement the design.

💻 Usage Examples

🛠️ Provided Tools

get_figma_data

Get Figma image and text content:

• Input: Figma file URL or ID
• Output: Extracted text and image list
• Example response:

{
  "text": ["Welcome to use the Figma text extraction service", ...],
  "images": ["https://storage.googleapis.com/...", ...]
}

extract_figma_images

Extract images:

figma-mcp extract-images --url <figma-file-url> --output ./images/

figma-to-markdown

Convert to Markdown format:

figma-mcp convert-to-md --url <figma-file-url> --output README.md

📄 Example Output

Assuming the processed file is Figma Example Link, the extraction result may be as follows:

# Figma Example Document

Welcome to use our service!

## Important Information
- **Supported formats**: Text, images, tables, etc.
- **Usage restrictions**: Please comply with relevant laws and regulations.

![Example Image](images/example.png)

These tools can help users efficiently extract and process text and image content from Figma files, meeting the needs of various development scenarios.