A
securityF
licenseA
qualityEnables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
160
142
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: Получить миниатюру для определенного узла в файле Figmaread_comments: Получить все комментарии к файлу Figmapost_comment: Оставить комментарий к узлу в файле Figmareply_to_comment: Ответить на существующий комментарий в файле Figma
Каждый инструмент предназначен для предоставления определенных функций для взаимодействия с файлами Figma через интерфейс ModelContextProtocol.
Related MCP Servers
- AsecurityFlicenseAqualityA 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 -184234
- AsecurityFlicenseAqualityA Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.Last updated -5510
- -securityFlicense-qualityA Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.Last updated -1602