MCP cover image
See in Github
2025-03-12

Claude MCP服务器与Figma一起使用

2

Github Watches

12

Github Forks

18

Github Stars

Figma MCP Server

A Model Context Protocol (MCP) server for interacting with Figma designs. This server allows Claude AI to extract design information from Figma files and create or update designs using the Figma plugin.

Features

  • Readonly Mode: Extract design information from Figma files using a URL link
  • Write Mode: Create or update designs by establishing a connection with the Figma plugin
  • Comprehensive API: Access to a wide range of Figma features through a unified API
  • Unit Testing: Includes tests to verify server functionality
  • Integration Testing: Tests the flow from creating designs to reading them

Modes

Readonly Mode

In readonly mode, the server can extract design information from a Figma file using a URL link. This includes:

  • File information
  • Node details
  • Styles (colors, text, effects)
  • Assets (images)
  • Variables
  • Component identification
  • Variant detection
  • Responsive design detection

Write Mode

In write mode, the server can create or update designs by establishing a connection with the Figma plugin. This includes:

  • Creating frames, shapes, text, and components
  • Creating component instances
  • Updating node properties
  • Setting fills, strokes, and effects
  • Deleting nodes
  • Smart element creation

Prerequisites

  • Node.js 18 or higher
  • A Figma account and access token
  • The Figma MCP plugin installed in the Figma desktop app (for write mode)

Installation

  1. Clone the repository:
git clone https://github.com/your-username/figma-server.git
cd figma-server
  1. Install dependencies:
npm install
  1. Build the server:
npm run build

Configuration

The server requires a Figma access token to be set in the environment:

export FIGMA_ACCESS_TOKEN=your_figma_access_token

Usage

Starting the Server

npm start

Development Mode

npm run dev

Running Tests

# Run unit tests
npm test

# Run integration tests (TypeScript)
npm run test:integration

# Run integration tests (JavaScript)
npm run test:integration-js

# Run all tests
npm run test:all

# Test plugin connection
npm run test:plugin-connection-js

The plugin connection test is a simple WebSocket server that listens for connections from the Figma plugin. It's useful for verifying that the plugin is running and can connect to the server.

The JavaScript versions of the tests are provided as alternatives that don't require TypeScript compilation, which can be more reliable in some environments.

Project Structure

figma-server/
├── src/                      # Source code
│   ├── core/                 # Core functionality
│   │   ├── config.ts         # Configuration management
│   │   ├── logger.ts         # Logging utilities
│   │   ├── types.ts          # Common type definitions
│   │   └── utils.ts          # Utility functions
│   ├── readonly/             # Readonly mode implementation
│   │   ├── api-client.ts     # Figma REST API client
│   │   ├── design-manager.ts # Design information extraction
│   │   └── style-extractor.ts # Style extraction utilities
│   ├── write/                # Write mode implementation
│   │   ├── plugin-bridge.ts  # WebSocket server for plugin communication
│   │   ├── design-creator.ts # Design creation utilities
│   │   └── component-utils.ts # Component utilities
│   ├── mcp/                  # MCP server implementation
│   │   ├── server.ts         # Main MCP server
│   │   ├── tools.ts          # Tool definitions
│   │   └── handlers.ts       # Tool handlers
│   ├── index.ts              # Entry point
│   └── mode-manager.ts       # Mode management (readonly/write)
├── tests/                    # Test files
│   ├── unit/                 # Unit tests
│   │   └── server.test.ts    # Server tests
│   └── integration/          # Integration tests
│       └── design-flow.test.ts # Design flow tests
├── plugin/                   # Figma plugin
│   ├── code.js               # Plugin code
│   ├── manifest.json         # Plugin manifest
│   └── ui.html               # Plugin UI
└── docs/                     # Documentation
    └── usage.md              # Usage instructions for Claude AI

Documentation

For detailed usage instructions, see the usage documentation.

License

ISC

相关推荐

  • https://suefel.com
  • Latest advice and best practices for custom GPT development.

  • Yusuf Emre Yeşilyurt
  • I find academic articles and books for research and literature reviews.

  • https://maiplestudio.com
  • Find Exhibitors, Speakers and more

  • Carlos Ferrin
  • Encuentra películas y series en plataformas de streaming.

  • Joshua Armstrong
  • Confidential guide on numerology and astrology, based of GG33 Public information

  • Emmet Halm
  • Converts Figma frames into front-end code for various mobile frameworks.

  • Alexandru Strujac
  • Efficient thumbnail creator for YouTube videos

  • Elijah Ng Shi Yi
  • Advanced software engineer GPT that excels through nailing the basics.

  • lumpenspace
  • Take an adjectivised noun, and create images making it progressively more adjective!

  • Lists Tailwind CSS classes in monospaced font

  • https://zenepic.net
  • Embark on a thrilling diplomatic quest across a galaxy on the brink of war. Navigate complex politics and alien cultures to forge peace and avert catastrophe in this immersive interstellar adventure.

  • apappascs
  • 发现市场上最全面,最新的MCP服务器集合。该存储库充当集中式枢纽,提供了广泛的开源和专有MCP服务器目录,并提供功能,文档链接和贡献者。

  • ShrimpingIt
  • MCP系列GPIO Expander的基于Micropython I2C的操作,源自ADAFRUIT_MCP230XX

  • Mintplex-Labs
  • 带有内置抹布,AI代理,无代理构建器,MCP兼容性等的多合一桌面和Docker AI应用程序。

  • ravitemer
  • 一个功能强大的Neovim插件,用于管理MCP(模型上下文协议)服务器

  • jae-jae
  • MCP服务器使用剧作《无头浏览器》获取网页内容。

  • patruff
  • Ollama和MCP服务器之间的桥梁,使本地LLMS可以使用模型上下文协议工具

  • pontusab
  • 光标与风浪冲浪社区,查找规则和MCP

  • WangRongsheng
  • 🧑‍🚀 llm 资料总结(数据处理、模型训练、模型部署、 o1 模型、mcp 、小语言模型、视觉语言模型)|摘要世界上最好的LLM资源。

  • n8n-io
  • 具有本机AI功能的公平代码工作流程自动化平台。将视觉构建与自定义代码,自宿主或云相结合,400+集成。

  • open-webui
  • 用户友好的AI接口(支持Ollama,OpenAi API,...)

    Reviews

    4 (1)
    Avatar
    user_CqTxZa1h
    2025-04-18

    As a dedicated user of the figma-mcp-server, I highly recommend this tool for seamless collaboration and efficient workflow management. Developed by karthiks3000, this server provides excellent support for Figma projects. Its straightforward implementation and robust features significantly enhance productivity. Check it out at https://github.com/karthiks3000/figma-mcp-server.