Figma запустила власного AI-агента для дизайнерів
Починаючи з сьогоднішнього дня, користувачі можуть працювати з агентом, створеним спеціально для Figma, прямо на canvas.
Дизайнерам потрібні спеціалізовані інструменти, які підтримують ключові процеси: дослідження, експерименти, співпрацю та точність. Figma була створена як мультиплеєрний canvas саме для цього. Але в міру того як команди впроваджують агентні інструменти для швидшої розробки продуктів, з’являються хибні дилеми: швидкість чи точність? AI-генерація чи пряме ручне редагування? У Figma вважають, що користувачам не потрібно обирати щось одне.
Раніше цього року Figma відкрила canvas для сторонніх агентів, щоб команди могли використовувати знання дизайн-систем у своїх агентних workflow. Тепер компанія йде далі — запускає Figma Agent, доступний безпосередньо на canvas та в лівій панелі.
Саме для цього Figma створила власного агента. Мета компанії — зробити агента, який добре розуміє Figma та природно вписується у спосіб роботи команд. Це означає, що сама Figma стає зрозумілою для моделі на рівні, недоступному стороннім інструментам: із глибоким контекстом компонентів, токенів, стандартів і best practices.
Як Figma Agent і MCP Server працюють разом
Figma Agent варто використовувати під час роботи на canvas: він вбудований у продукт і має додатковий контекст про дизайн-систему.
MCP Server та use_figma варто використовувати для перенесення коду на canvas або повернення дизайнів назад у код.
У результаті користувач отримує спеціалізованого дизайн-агента, який працює поруч на canvas, у тому самому файлі, що й команда, фактично як повноцінний учасник процесу.
Агент спеціально налаштований для редагування Figma-файлів, тому результати адаптовані до дизайн-контексту користувача й створені для прямого редагування — щоб дизайнер зберігав контроль.
На відміну від MCP Server, агент працює безпосередньо на canvas — без окремого налаштування чи перемикання контексту. Це дозволяє:
- запускати prompt із будь-якого design layer;
- паралельно запускати кілька prompt’ів, щоб перевірити різні ідеї;
- редагувати дизайн ітеровано, поки агент також продовжує ітерації.
Від пошуку нових напрямків до масових правок і впровадження feedback — Figma Agent має стати частиною дизайн-workflow вже сьогодні.
Дослідження більшої кількості напрямків
Найкращі дизайни рідко з’являються з першої ідеї або першого prompt’у. Дослідження напрямків, порівняння підходів та ітерації вже є базовою частиною роботи дизайнерів. Figma Agent має допомогти командам проходити більше варіантів за менший час.
Як Figma Make і Figma Agent вписуються у workflow
Користувач може почати у Figma Design і за допомогою агента згенерувати design layers, щоб уточнити intent у flows, states, copy та структурі. Потім результат можна передати у Make для генерації code layers і уточнення поведінки. Після цього його можна знову вбудувати назад у Figma Design.
Або навпаки: почати у Figma Make, скопіювати frames у Figma Design, доопрацювати їх через агента й повернути назад у Make.
Користувач може “йти вшир”: швидко генерувати різні стилістичні підходи до однієї задачі та досліджувати багато напрямків одночасно. Наприклад, порівняти кілька checkout flows, оптимізованих під різні бізнес-цілі, або попросити агента створити три різні information architectures.
Або можна “йти вглиб”: обрати один напрямок і попросити агента ітерувати його, порівнювати реалізації та переосмислювати наявні дизайни, залишаючись у межах дизайн-системи. Агент використовує найчастіше й нещодавно використані компоненти як стартову точку. Водночас користувач може керувати результатом, обираючи конкретну library або згадуючи через @ конкретні tokens, variables і components.
У Figma зазначають, що головний ризик AI-генерації — створення “посереднього” дизайну. Саме тому Figma Agent створений для того, щоб допомогти досліджувати більше напрямків і обрати правильний.
Приклад prompt для design exploration
Дай 3 стилістичні варіанти цього дизайну: один органічний, один modern і один retro.
Приклад prompt для design generation
Створи горизонтальний image carousel для mobile app. Заповни зображення placeholder-картинками outdoor/sports тематики. Дай кілька варіантів із різними title treatments: текст поверх зображення та під ним, щоб зрозуміти, що працює краще.
Автоматизація рутинної роботи
З Figma MCP Server робота може переходити між кодом і Figma без втрати точності. Команда може почати в коді, перенести результат у Figma через code-to-canvas, доопрацювати його або застосувати дизайн-систему, а потім повернути назад через Figma MCP Server — і все залишатиметься синхронізованим.
Коли Figma Agent працює поруч на canvas, користувач не просто працює швидше — він може легко перемикатися між AI-допомогою та ручним редагуванням. Це спрощує виконання рутинних задач, які все одно потребують контексту й точності.
Figma Agent може:
- перейменовувати variables;
- масово змінювати компоненти;
- оновлювати typography;
- замінювати lorem ipsum на реальний контент;
- переводити інтерфейси у dark mode;
- оновлювати documentation дизайн-системи;
- стандартизувати naming conventions;
- створювати документацію для components, states та variants.
Приклади prompt для consistency
Переведи всі @ Tile / Callout components у highlight states.
Знайди весь текст більший за size 10 і зміни font на Inter.
Використай чистіший typeface.
Приклад prompt для documentation
Створи документацію для моїх компонентів, включно з усіма states і variants. Додай contextual examples, які показують, як ці компоненти слід використовувати.
Робота з feedback
У дизайн-процесі накопичується багато feedback, який часто розкиданий між comments і файлами: від crit notes та реакцій stakeholders до відкритих питань. Figma Agent допомагає перетворювати цей feedback на дію.
Оскільки вся команда працює в одному файлі, агент уже має потрібний контекст. Тому прохання опрацювати feedback більше схоже не на брифінг нового учасника, а на роздум уголос із колегою, який уже присутній у кімнаті.
Figma Agent може:
- узагальнювати feedback;
- знаходити повторювані теми;
- перетворювати comments у actionable next steps;
- симулювати реакцію різних stakeholders;
- допомагати готуватися до critique sessions.
Приклад prompt для feedback
Відсортуй ці comments за темами. Створи нову revision мого дизайну, яка враховує feedback для цього профілю.
Figma Agent вбудований туди, де вже відбувається робота. Немає потреби перемикатися між інструментами або втрачати контекст. У Figma кажуть, що головна мета продукту — допомогти командам працювати швидше без компромісів у якості та craft.
Що далі
У найближчі місяці Figma планує:
- покращити підтримку дизайн-систем;
- удосконалити user experience;
- розширити можливості агента для пошуку у файлах;
- додати більше способів кастомізації.
Доступність
Figma Agent поступово запускається в beta протягом найближчих тижнів.
Під час beta:
- AI credits не витрачатимуться;
- після general availability функція стане usage-based.
Figma Agent буде доступний для користувачів:
- Professional;
- Organization;
- Enterprise plans.
Collab і Dev seats зможуть використовувати агента в drafts.
Starter, Education і Government plans наразі не підтримуються.
Джерело: figma.com
Топ коментарі (0)