Новий плагін Cursor AI дозволяє робити дизайн у Figma за допомогою штучного інтелекту

Cursor тепер може програмно взаємодіяти з Figma завдяки новому MCP-плагіну

Команда Cursor AI презентувала новий проєкт інтеграції з Figma — Cursor Talk to Figma MCP. Він базується на протоколі MCP (Model Context Protocol) і дозволяє Cursor AI читати, редагувати та створювати дизайн у Figma програмним шляхом.

Цей інструмент відкриває нові можливості для дизайнерів, надаючи змогу керувати файлами Figma за допомогою AI, автоматизувати рутинні операції та значно прискорити процес створення дизайну.

Що нового?

Інтеграція складається з трьох основних компонентів:

• MCP сервер — написаний на TypeScript сервер, що відповідає за взаємодію Cursor AI з Figma.
• Figma плагін — дає змогу Cursor AI надсилати команди безпосередньо у відкритий дизайн у Figma.
• WebSocket сервер — забезпечує миттєвий зв'язок між MCP сервером і плагіном Figma.

Як це працює?

Після встановлення плагіну та запуску сервера дизайнер отримує низку інструментів для роботи з елементами дизайну через Cursor AI. Серед них:

Робота з документом та вибором:

• get_document_info – інформація про відкритий файл.
• get_selection – інформація про обрані елементи.
• get_node_info – деталізовані дані про конкретний елемент.

Створення нових елементів:

• create_rectangle – прямокутники із заданими параметрами.
• create_frame – створення контейнерів-фреймів.
• create_text – додавання текстових елементів.

Стилізація елементів:

• set_fill_color – налаштування кольору заливки.
• set_stroke_color – колір та товщина обводки.
• set_corner_radius – закруглення кутів з можливістю налаштування окремих кутів.

Макетування і управління елементами:

• move_node – переміщення елементів.
• resize_node – зміна розміру елементів.
• delete_node – видалення елементів з документа.

Компоненти та стилі:

• get_styles, get_local_components, get_team_components – перегляд інформації про компоненти та стилі.
• create_component_instance – створення екземплярів компонентів.

Експорт та розширені можливості:

• export_node_as_image – експорт елементів у PNG, JPG, SVG чи PDF.
• execute_figma_code – виконання JavaScript у Figma (рекомендується використовувати з обережністю).

Початок роботи

Для швидкого запуску потрібно встановити Bun (менеджер пакетів та інструментів JavaScript), підключити MCP сервер у Cursor та активувати плагін у Figma.

Інструкція зі встановлення доступна в офіційному репозиторії.

Рекомендації для роботи:

• Завжди використовуйте команду join_channel для встановлення зв’язку.
• Перед змінами перевіряйте поточний стан документа (get_document_info) та виділених елементів (get_selection).
• Використовуйте готові компоненти там, де можливо, для забезпечення консистентності.

Проєкт відкритий та поширюється за ліцензією MIT.

Таким чином, нова інтеграція Cursor та Figma — це потужний інструмент автоматизації дизайну, який значно спростить життя дизайнерів.