MCP-сервер Figma

Сервер ModelContextProtocol , который позволяет помощникам ИИ взаимодействовать с файлами Figma. Этот сервер предоставляет инструменты для просмотра, комментирования и анализа проектов Figma напрямую через ModelContextProtocol.

Функции

Добавьте файл Figma в чат с Клодом, указав URL-адрес
Читайте и оставляйте комментарии к файлам Figma

Настройка с Клодом

Загрузите и установите приложение Claude для ПК с сайта claude.ai/download
Получите API-ключ Figma (figma.com -> щелкните свое имя в левом верхнем углу -> настройки -> Безопасность). Предоставьте области действия File content и Comments .
Настройте Claude для использования сервера Figma MCP. Если это ваш первый сервер MCP, запустите следующее в терминале.

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

Если это не так, скопируйте блок figma-mcp в ваш claude_desktop_config.json

Перезагрузите Claude Desktop.
Найдите значок молотка с количеством доступных инструментов в интерфейсе Клода, чтобы убедиться, что сервер работает.

Пример использования

Начните новый чат с Клодом на рабочем столе и вставьте следующее

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Демонстрация более реалистичного использования

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

Настройка разработки

Бег с инспектором

Для разработки и отладки можно использовать инструмент MCP Inspector. Inspector предоставляет визуальный интерфейс для тестирования и мониторинга взаимодействия сервера MCP.

Подробные инструкции по настройке и использованию см. в документации Inspector .

Команда для локального тестирования с помощью Inspector:

npx @modelcontextprotocol/inspector npx figma-mcp

Местное развитие

Клонировать репозиторий
Установить зависимости:

npm install

Создайте проект:

npm run build

Для разработки с автоматической перестройкой:

npm run watch

Доступные инструменты

Сервер предоставляет следующие инструменты:

add_figma_file : добавьте файл Figma в свой контекст, указав его URL-адрес.
view_node : Получить миниатюру для определенного узла в файле Figma
read_comments : Получить все комментарии к файлу Figma
post_comment : Оставить комментарий к узлу в файле Figma
reply_to_comment : Ответить на существующий комментарий в файле Figma

Каждый инструмент предназначен для предоставления определенных функций для взаимодействия с файлами Figma через интерфейс ModelContextProtocol.

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

Позволяет помощникам на основе искусственного интеллекта взаимодействовать с файлами Figma через ModelContextProtocol, что позволяет просматривать, комментировать и анализировать проекты Figma непосредственно в интерфейсах чата.

Related Resources

Reddit Discussion about this server

Related MCP Servers

figma-mcp
JayZeeDesign
A
security
A
license
A
quality
Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993 1. Access all figma pages 2. Access all figma components 3. Access figma prototype flows
Last updated -
3
49
Python
MIT License
mcp-figma
smithery-ai
A
security
F
license
A
quality
A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
Last updated -
18
34
1
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License
Figma MCP Server
xxflux
A
security
F
license
A
quality
A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
Last updated -
5
997
2
JavaScript

View all related MCP servers

Figma MCP Server