MCP-сервис для чтения и модификации проектов Figma с помощью Cursor.

Общее введение

Курсор Поговорите с Фигмой MCP это проект с открытым исходным кодом, который был разработан в рамках Модель Контекстный протокол (Протокол MCP соединяет инструмент программирования искусственного интеллекта Cursor с программным обеспечением для проектирования Figma. Он создан разработчиком Сонни Лазуарди, размещен на GitHub, дата выхода - 17 марта 2025 года. Основная функция инструмента - позволить Cursor читать файлы дизайна Figma и генерировать код или изменять содержимое дизайна напрямую. Он написан на TypeScript и использует технологию WebSocket для обмена данными в режиме реального времени. Будь то быстрое превращение дизайна в код или манипулирование файлом дизайна с помощью искусственного интеллекта, этот бесплатный инструмент помогает разработчикам быть более эффективными. Любой желающий может загрузить код и принять участие в разработке.

болт.новый Новая функция, появившаяся несколько дней назад:Преобразование проектов Figma в полнофункциональные приложения одним щелчком мыши

Список функций

• Соединение курсора и FigmaДвунаправленная связь обеспечивается с помощью протокола MCP и WebSocket.
• Прочитать информацию о дизайне: Получите обзор документа Figma-файла, выбранного содержимого или специфических деталей узла.
• Создание элементов дизайна: Добавьте прямоугольники, рамки или текстовые узлы в Figma.
• Изменение стилей и макетовНастраивайте цвета, границы, скругленные углы, перемещайте, изменяйте размер и удаляйте узлы.
• Сгенерировать код: Сократите время написания текста вручную, превращая проекты Figma в пригодный для использования код.
• Поддержка управления компонентами: Считывание локальных или командных компонентов для создания экземпляров компонентов.
• функция экспорта: Экспорт узлов дизайна в формат PNG, JPG, SVG или PDF.
• С открытым исходным кодом и бесплатно: Код находится в открытом доступе, и разработчики могут свободно изменять или оптимизировать его.

Использование помощи

Процесс установки

Чтобы использовать Cursor Talk to Figma MCP, необходимо установить и настроить несколько частей. Ниже приведены подробные шаги:

1. Подготовка среды

• Булочка для установки: Bun - это инструмент для быстрого выполнения JavaScript. Если он у вас не установлен, откройте терминал и введите его:

curl -fsSL https://bun.sh/install | bash

• Установка курсора: Скачайте и установите инструмент для программирования Cursor AI с официального сайта (cursor.ai).
• Получите жетон Фигмы: Войдите в Figma, создайте персональный токен доступа в настройках вашей учетной записи и сохраните его.

2. Загрузка проекта

• Выполните следующую команду в терминале, чтобы загрузить код проекта:

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

• Перейдите в каталог проектов:

cd cursor-talk-to-figma-mcp

3. Установка зависимостей и настройка

• Запустите в каталоге проекта:

bun setup

• При этом устанавливаются все зависимости (включая библиотеки TypeScript и WebSocket) и автоматически настраивается MCP-сервер в Cursor.

4. Запустите сервер WebSocket

• Введите его в терминал:

bun start

• Или запустите его вручную:

bun run src/socket.ts

• Это запустит сервер WebSocket для подключения плагина Figma к MCP.

5. установите плагин Figma

• Откройте приложение Figma для рабочего стола.
• Нажмите в верхнем меню "Плагины" > "Разработка" > "Новый плагин".
• Выберите "Связать существующие плагины" и найдите src/cursor_mcp_plugin/manifest.json Документация.
• После подтверждения плагин появится в списке плагинов разработки Figma.

6. Конфигурация сервера Cursor MCP (ручной режим)

• в случае, если bun setup Не автоматизировано, может быть настроено вручную.
• показать (билет) ~/.cursor/mcp.json добавьте следующее:

{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

• взаимозаменяемость /path/to/ Фактический путь к вашему проекту.

Как использовать основные функции

После завершения установки выполните следующие действия:

стартовый набор

1. Запуск сервера WebSocket::
   • В терминале введите bun startУбедитесь, что сервер запущен.
2. Запуск плагина Figma::
   • В Figma щелкните правой кнопкой мыши на холсте и выберите "Plugins" > "Develop" > Запустите плагин, который вы только что установили.
   • После запуска плагина введите join_channel Присоединяйтесь к каналу связи.
3. Подключение курсора::
   • Откройте Cursor и убедитесь, что сервер MCP настроен и работает.

Прочитать информацию о дизайне

• Откройте файл проекта в Figma и выберите участок, с которым нужно работать.
• Введите команды в режиме "Композитор" курсора, например:
  • "Получить информацию о текущем документе": вызов get_document_info.
  • "Просмотр выбранного содержимого": вызов get_selection.
• Курсор возвращает данные дизайна, такие как макет, стиль и т.д., через MCP.

Создание и изменение дизайна

• Введите конкретные указания в курсор:
  • Создает прямоугольник:create_rectangleУкажите местоположение и размер.
  • Добавить текст:create_textУстановите содержание и шрифт.
  • Измените цвет:set_fill_colorВводится значение RGBA.
• Изменения отражаются в файлах Figma в режиме реального времени.

Сгенерировать код

• Вставьте ссылку на файл Figma в курсор (например. https://www.figma.com/file/xxx/yyy).
• Введите команду "Сгенерировать этот дизайн React Кодекс".
• Курсор будет считывать дизайн и выводить соответствующий код.

Экспорт дизайна

• Введите курсор:export_node_as_imageВ следующей таблице описано, как выбрать формат (PNG, JPG и т. д.).
• Экспортированный файл сохраняется локально.

Меры предосторожности при обращении

• последовательность подключения: Сначала запустите WebSocket, затем запустите плагин и, наконец, используйте Cursor для отправки команд.
• обработка ошибок: Если команда не выполняется, проверьте журналы терминала, чтобы убедиться, что с сетью и разрешениями все в порядке.
• Советы по производительности: При работе с большими файлами сначала используйте get_document_info Просматривайте обзор, а затем управляйте конкретными узлами.

Сила этого инструмента в том, что он делает проектирование и кодирование бесшовным. Вы можете работать с Figma напрямую с помощью искусственного интеллекта или быстро генерировать код, избавляясь от множества повторяющихся действий.

сценарий применения

1. Быстрое прототипирование
   Описание сценария: Менеджерам по продуктам необходимо проверить идею дизайна. Они могут использовать Cursor для создания элементов в Figma, а затем экспортировать код, чтобы быстро сгенерировать взаимодействующий прототип.
2. Синхронизация проектирования и разработки
   Описание сценария: После того как дизайнер корректирует файл Figma, разработчик считывает последний дизайн через Cursor и обновляет код в режиме реального времени, чтобы сократить затраты на связь.
3. Автоматизированная настройка стиля
   Описание сценария: Командам необходимо массово изменять цвета или макеты дизайна. Разработчики могут использовать Cursor для ввода команд и автоматизации корректировок.

QA

1. Нужно ли мне платить за этот инструмент?
   Ответ: нет необходимости. Это проект с открытым исходным кодом, его можно использовать бесплатно, а код находится в открытом доступе на GitHub.
2. Какие языки программирования поддерживаются для вывода?
   Ответ: Зависит от возможностей Cursor, в настоящее время поддерживаются React, HTML, CSS и другой распространенный front-end код, специфичный для логики генерации Cursor.
3. Могу ли я работать с несколькими файлами Figma одновременно?
   Ответ: Да, но для каждого файла нужно добавить свой канал (с помощью join_channel), убедитесь, что команда указывает на правильный файл.