MCP-сервер Figma

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

Функции

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

• Читайте и оставляйте комментарии к файлам Figma

Related MCP server: mcp-figma

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

1. Загрузите и установите приложение Claude для ПК с сайта claude.ai/download

2. Получите API-ключ Figma (figma.com -> щелкните свое имя в левом верхнем углу -> настройки -> Безопасность). Предоставьте области действия File content и Comments .

3. Настройте 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

3. Перезагрузите Claude Desktop.

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

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

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

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

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

1. Клонировать репозиторий

2. Установить зависимости:

npm install

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

npm run build

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

npm run watch

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

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

• add_figma_file : добавьте файл Figma в свой контекст, указав его URL-адрес.

• view_node : Получить миниатюру для определенного узла в файле Figma

• read_comments : Получить все комментарии к файлу Figma

• post_comment : Оставить комментарий к узлу в файле Figma

• reply_to_comment : Ответить на существующий комментарий в файле Figma

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