Команда Cursor AI презентувала свій новий проєкт — інтеграцію Cursor Talk to Figma MCP, яка дозволяє штучному інтелекту програмно взаємодіяти з Figma. Завдяки протоколу MCP (Model Context Protocol) дизайнери тепер можуть не лише читати й редагувати файли в Figma за допомогою AI, а й створювати нові елементи дизайну прямо з командного рядка. Звучить як фантастика, але це реальність, яка обіцяє прискорити робочі процеси й автоматизувати рутину. Розберімося, що це за інструмент, як він працює і чому може стати справжнім проривом для UX/UI-дизайнерів.
Що таке Cursor Talk to Figma MCP?
Cursor Talk to Figma MCP — це інтеграція, яка поєднує можливості AI-платформи Cursor із Figma, одним із найпопулярніших інструментів для дизайну інтерфейсів. Уявіть собі: ви пишете кілька команд, а штучний інтелект сам створює прямокутник, додає текст чи змінює колір кнопки у вашому файлі Figma. Інструмент базується на трьох ключових компонентах: MCP-сервері, написаному на TypeScript, плагіні для Figma та WebSocket-сервері, який забезпечує миттєвий зв’язок між ними.
Разом вони створюють екосистему, де AI стає вашим помічником у дизайні — від простих операцій до складних маніпуляцій із компонентами. Уявіть, як швидко можна генерувати повторювані елементи, тестувати різні стилі чи навіть переносити готові макети в код. А ще проєкт відкритий і поширюється за ліцензією MIT, тож кожен охочий може долучитися до його розвитку чи адаптувати під свої потреби.
Як це працює?
Після встановлення плагіну й запуску MCP-сервера ви отримуєте доступ до цілого набору команд, які можна виконувати через 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 чи SVG
- execute_figma_code – запускати власний JavaScript у Figma
Як почати працювати?
Щоб запустити плагін, вам знадобиться трохи часу та попередньої підготовки. Спершу встановіть Bun — це швидкий менеджер пакетів для JavaScript, який потрібен для роботи MCP-сервера. Потім під'єднайте сервер у Cursor: у налаштуваннях додайте його через вкладку MCP, вказавши адресу (наприклад, http://localhost:3333). Далі активуйте плагін у Figma — просто завантажте його з офіційного репозиторію й увімкніть у меню "Plugins".
Детальна інструкція є на GitHub, і вона доволі проста навіть для тих, хто не дуже дружить із кодом. Кілька порад для старту: завжди починайте з join_channel, щоб установити зв’язок між Cursor і Figma. Перед редагуванням перевірте стан документа через get_document_info і переконайтеся, що виділили правильні елементи з get_selection. І якщо у вас уже є готові компоненти в бібліотеці, використовуйте їх через create_component_instance — це заощадить час і збереже консистентність дизайну.
Переваги та недоліки
Уявіть типовий день дизайнера: ви малюєте макет, потім пів години витрачаєте на те, щоб додати однакові кнопки на 10 екранів. Або клієнт просить змінити колір усіх заголовків у проєкті — і ви вручну клацаєте кожен елемент. З Cursor Talk to Figma MCP це можна зробити кількома командами: AI сам пройдеться по файлу, знайде потрібні об’єкти й застосує зміни. Рутина зникає, а у вас залишається більше часу на творчість.
Ба більше, інтеграція працює в обидва боки. Наприклад, ви можете попросити Cursor згенерувати код для макета, а потім одразу внести правки в Figma, якщо щось не так. Або навпаки: створити базовий дизайн через AI, а потім доопрацювати його вручну.
Інструмент поки що на ранній стадії, і хоча він відкритий для доопрацювання, можуть траплятися баги. Наприклад, складні макети з купою шарів можуть збивати AI з пантелику, тож краще починати з простих задач. Але потенціал величезний: у майбутньому ми можемо побачити, як Cursor AI не просто додає прямокутники, а пропонує дизайн-рішення на основі трендів чи аналізу конкурентів.
