Talk To Figma via Claude MCP сервер
MCP сервер, который позволяет Claude Desktop управлять Figma через WebSocket соединение, обеспечивая создание дизайна, модификацию и совместную работу в реальном времени с помощью команд на естественном языке.
автор: gaganmanku96
curl -fsSL https://vibebaza.com/i/talk-to-figma-via-claude | bash
MCP сервер, который позволяет Claude Desktop управлять Figma через WebSocket соединение, обеспечивая создание дизайна, модификацию и совместную работу в реальном времени с помощью команд на естественном языке.
Установка
Из исходников
git clone https://github.com/gaganmanku96/talk-with-figma-claude.git
cd talk-with-figma-claude
npm install
chmod +x run-figma-claude.sh
Конфигурация
Claude Desktop
{
"mcpServers": {
"TalkToFigma": {
"command": "node",
"args": [
"~/talk_to_figma_claude/src/mcp-server/mcp-server.js"
],
"env": {}
}
}
}
Доступные инструменты
| Инструмент | Описание |
|---|---|
join_channel |
Устанавливает соединение с Figma |
get_document_info |
Получает информацию о текущем документе Figma |
get_selection |
Получает текущие выбранные элементы в Figma |
create_rectangle |
Создает прямоугольную фигуру в Figma |
create_frame |
Создает фрейм в Figma |
create_text |
Создает текстовые элементы в Figma |
set_fill_color |
Устанавливает цвет заливки элементов |
set_corner_radius |
Устанавливает радиус скругления углов элементов |
create_component |
Создает компоненты в Figma |
update_instance_properties |
Обновляет свойства экземпляров компонентов |
enhanced_create_component_instance |
Улучшенное создание экземпляров компонентов с расширенными возможностями |
enhanced_set_fill_color |
Улучшенная обработка цветов для операций заливки |
create_multiple_instances |
Пакетное создание нескольких экземпляров компонентов |
health_check |
Проверяет статус работоспособности соединения |
connection_status |
Проверяет текущий статус соединения |
Возможности
- WebSocket коммуникация с настольным приложением Figma
- Создание и модификация дизайна в реальном времени через естественный язык
- Создание компонентов и управление экземплярами
- Улучшенная обработка цветов и инструменты стилизации
- Пакетные операции для нескольких элементов
- Мониторинг соединения и проверки работоспособности
- Логирование с файлами по времени для отладки
- Панель мониторинга сервера на localhost:3650
Примеры использования
Сначала используйте join_channel для установления соединения
Создавайте прямоугольники, фреймы и текстовые элементы
Устанавливайте цвета заливки и радиус скругления углов для элементов
Создавайте компоненты и управляйте экземплярами
Проверяйте статус соединения и выполняйте проверки работоспособности
Ресурсы
Примечания
Требует Node.js 14+ и настольное приложение Figma. Использует скрипты быстрого запуска для Linux/macOS (./bin/claude-figma-connect.sh) и Windows (bin\claude-figma-connect.bat). Плагин Figma должен быть импортирован из файла manifest.json. Расширяет оригинальный проект cursor-talk-to-figma-mcp.