Інструменти · 2026-11-09

Шість простих способів використати ШІ-агента Figma вже зараз

Figma запустила ШІ-агента, який працює просто на полотні дизайну й допомагає з відгуками, стилями, варіантами макетів і анімацією.

💡 Що це таке

Figma, популярний сервіс для створення дизайну сайтів і застосунків, отримав ШІ-агента, який працює прямо на полотні. Агент може підключитися на будь-якому етапі роботи: від перших ідей із командою до доопрацювання деталей перед передачею розробникам. Керує всім при цьому людина, а агент лише пропонує й виконує те, що ви підтвердили.

Агент доступний на тарифах Starter, Professional, Organization і Enterprise, а також на освітніх планах для вишів. Місця типів Collab, Dev і View можуть використовувати його в чернетках.

⚙️ Як використати агента на практиці

Перший спосіб: перетворити нотатки з зустрічі на коментарі. Натисніть + у вікні чату агента, відкрийте Connectors і підключіть застосунок, де лежать нотатки, наприклад Granola, Notion або Google Drive. Потім попросіть агента: «Annotate this design based on the crit feedback in this transcript».

Другий спосіб: зібрати коментарі в конкретні дії. Виділіть кадри з коментарями й напишіть: «Summarize the feedback on these designs and suggest updates». Агент складе підсумок і запропонує зміни, які можна застосувати одним підтвердженням. Для готових сценаріїв є навички (skills), які запускаються командою /. Наприклад, /comments-do-try-consider розкладає відгуки на «зробити», «спробувати» і «врахувати».

Третій спосіб: створити власний стиль зображень. Агент може зробити шейдер, тобто ефект, побудований на коді, наприклад зернистий вінтажний вигляд, рідкий метал, скло чи голограму. Новачкам допоможе навичка /shader-starter. Щоб застосувати ефект до багатьох фото, підключіть Google Drive через + → Connectors і попросіть знайти фото в папці та застосувати той самий шейдер.

🔹 Варіанти, інтерактив і анімація

Четвертий спосіб: одразу намалювати кілька варіантів. Щоб перенести застосунок або сайт на полотно, можна використати розширення Figma для Chrome в один клік. Далі попросіть агента створити три варіанти макета з різними розмірами головного зображення й різним місцем заголовка, зберігаючи текст, кольори і стиль. Якщо вибрати бібліотеку команди в меню Libraries, агент використає наявні компоненти й стилі.

П'ятий спосіб: зробити статичний дизайн інтерактивним. Виділіть кадр і оберіть Build this with code, а потім попросіть зробити картки, які можна гортати пальцем або перетягувати. Так можна відчути, як працює перехід, ще до розробки.

Шостий спосіб: додати рух. Наприклад, іконці руки, яка показує, куди натиснути на екрані, можна задати повільне натискання або весело крутитися. Агент створить обидва варіанти, а ви переключіться на Motion у панелі інструментів, виберіть кадри й натисніть play, щоб порівняти.

Джерела: 🔗 Figma Blog