Я протестировала встроенного агента Figma AI на 19 задачах. Среди них были переименование сотни вариантов, перепривязка цветов к токенам и пересборка таблицы из колонок в строки. Со всеми задачами агент в итоге справился, но не всегда с первой итерации. Под катом делюсь типами задач, с которыми у агента всё сработало, а также результатами, затраченным временем и приемами, которые помогают договориться с агентом.
Меня зовут Екатерина Ларионова, я продуктовый дизайнер и развиваю дизайн-систему «Сова» в ИТ-экосистеме «Лукоморье».
Я убеждена, что работа с нейросетями похожа на бесконечную проверку гипотез: нужны время и терпение, чтобы найти подходящую формулу делегирования, при которой агент действительно помогает. У меня не всё получалось с первого промпта: иногда приходилось уточнять формулировку или просить агента исправить результат. Но даже после неудачной первой попытки большинство задач в итоге решалось. В этой статье хочу поделиться с вами сработавшими промптами и советами, которые улучшат запросы для Figma AI.
Под Figma AI в статье я имею в виду встроенного агента в Figma Design, который редактирует существующие слои и компоненты. Figma Make в эксперимент не включали.
Массовое изменение свойств и состояний
Сюда относятся задачи, где нужно одновременно поменять свойства у множества компонентов или вариантов и по возможности сохранить остальные настройки. Особенно это выручает в больших наборах, где одно и то же действие пришлось бы повторять вручную десятки раз.
Например, можно переключить состояния default/hover/selected, переименовать свойства, поменять размер вложенных компонентов, исправить перепутанные значения вариантов или массово включить и выключить определённые элементы.
Промпт
Что нужно было сделать
Результат
Время
«Поменяй местами когда icon off и когда icon on»
В вариантах компонента поменять местами значения icon=off и icon=on
Значения поменялись в 100 вариантах
1 мин 23 сек
«Выдели тут первые 4 звезды selected»
В демо-компоненте рейтинга перевести первые четыре звезды из default в selected
Все звёзды выделены правильно, проверила вручную
1 мин 7 сек
«Назови проперти по примеру .table / cell / elements / tree arrows default / s»
У нескольких компонентов свойства превратились в Property 7, Property 8 и т. п.
Имена level, opened, hover, chevron icon, type восстановлены по эталону
52 сек
«Замени размер компонентов с M на S»
Массово поменять размер вложенных компонентов в двух выбранных таблицах
Вложенные компоненты заменены
5 мин 47 сек
Больше всего меня удивил третий пример. Судя по отчёту агента, он восстановил имена свойств по образцу: level, opened, hover, chevron icon, type. Такой отчёт тем не менее нужно сверять с панелью свойств самого компонента.
Промпты, как видите, звучат как речь неандертальца. Агент всё равно схватывает контекст: он понимает, что выделено на холсте, и работает с выделенным.
Новые варианты по существующей логике
Агент умеет анализировать уже созданные варианты, находить закономерность и продолжать последовательность. Если у уровней, размеров или вариантов есть понятный шаг, можно прямо попросить достроить следующий элемент.
Например, можно добавить новый уровень вложенности дерева или аккордеона с самостоятельным расчётом отступов. Или создать недостающие состояния и продолжить структуру компонента, сохранив его свойства и оформление.
Промпт
Что нужно было сделать
Результат
Время
«Добавь четвёртый уровень в компонент. Вычисли сколько нужно добавить отступ самостоятельно исходя из прошлых вариантов»
Было три уровня вложенности дерева, понадобился четвёртый
Варианты level=4 добавлены для шести наборов
1 мин 11 сек
«Добавь четвёртый уровень аккордеона, высчитай автоматически какое расстояние должно быть»
Тот же приём для аккордеона
Новый уровень добавился корректно, проверила вручную
1 мин
Совет. Пишите не только о том, что поменять, но и о том, что не трогать: текст, порядок, ширины, свойства, состояния. Рискованные изменения сначала пробуйте на одной копии или на небольшой выборке.
Оформление по эталону
Агент может взять один или несколько правильно оформленных компонентов за образец и распространить их настройки на остальные компоненты.
Например, можно повторить настройки Auto Layout, заливки, обводки, отступы и выравнивание, настроить чередование цветов строк или оформить закреплённые колонки таблицы с учётом чекбоксов.
Промпт
Что нужно было сделать
Результат
Время
«Сделай автолейауты и цвет характеристики первой и последней колонки как тут. если есть чекбокс то первые два столбца закрепляются, если чекбокса нет, то первый только. добавь заливку и обводку с нужной стороны. столбцы внутри в автолейаут объедини и выровняй посередине»
Оформить закреплённые колонки в двух эталонных таблицах с учётом чекбоксов. Закрепление при прокрутке здесь не проверяла
Сделано
3 минуты
«в секции всей так сделай, по примеру выделенных двух»
Распространить оформление двух эталонных таблиц на остальные в секции
Агент учёл таблицы с чекбоксами и без, добавил заливку, обводку и выравнивание
1 мин 8 сек
«Сделай в каждом столбце параметр stripped gray через одну ячейку. начало с белой»
Добавить зебру в 10 столбцов таблицы, начиная с белой ячейки
Чередование сделано, заголовки не тронуты
2 мин 7 сек
Совет. Один готовый пример прямо в макете работает лучше, чем полстраницы описания визуальной логики.
Перестройка Auto Layout и структуры
Агент может перестраивать структуру компонентов и порядок вложенных элементов, сохраняя содержимое и оформление. Например, можно пересобрать таблицу из колонок в строки, объединить элементы в Auto Layout, поменять направление и порядок вложенности или добавить элементы скролла по образцу.
Промпт
Что нужно было сделать
Результат
Время
«пересобери лейаут таблицы строками а не столбцами оставив всё на своих местах»
Таблица была собрана колонками, а нужна структура по строкам
Вместо 16 вертикальных колонок получились 23 горизонтальные строки, ширины и содержимое сохранились
5 мин 17 сек
«Добавь в таблицы скролл горизонтальный и вертикальный по аналогии с таблицами в секции размер M рецепты по строкам»
Добавить скролл по образцу уже настроенных таблиц. Поведение в прототипе не проверяла
Скролл добавлен в 16 таблиц
1 мин 9 сек
Пересобирать такие таблицы в Auto Layout вручную — просто мрак. Это десятки однотипных действий, и всё время приходится следить, чтобы ничего не съехало. На этом фоне 5 минут 17 секунд выглядят как хорошая экономия времени и сил.
Совет. Если задача состоит из нескольких этапов, не позволяйте агенту сразу вносить изменения. Сначала попросите описать, как он понял задачу, что собирается сделать и что оставит как есть. Так ошибки в интерпретации будут видны заранее, пока агент ещё ничего не сломал. Например:
«Прежде чем приступать к работе, опиши по шагам, как ты понял задачу, что собираешься изменить и какие элементы не будешь трогать. Дождись моих правок и подтверждения. Только после этого приступай к выполнению».
Массовое заполнение и замена контента
Агент может массово менять текст, переносить данные между компонентами и заполнять элементы по образцу. Например, можно перенести содержимое из одной таблицы в другую, заменить заглушки реалистичным содержимым, заполнить десятки ячеек текстом разной длины или сгенерировать примеры содержимого для проверки поведения компонентов.
Промпт
Что нужно было сделать
Результат
Время
«заполни данные также как слева»
Правая таблица должна повторять содержимое левой
Заполнено 173 текстовых поля
1 мин 56 сек
«сделай везде вместо cell text надписи три строки любого текста»
Заменить заглушки содержательным трёхстрочным текстом, чтобы проверить поведение ячеек
Во всех 36 ячейках появились одинаковые «Текст 1», «Текст 2», «Текст 3». Формально задача выполнена. По смыслу нет
1 мин 39 сек
Это и был тот самый провал: казалось бы, рутинная задача, которую очень хочется автоматизировать, но без должного внимания к промпту агент не справился.
Совет. Если нужен тестовый контент, задайте такие свойства: разная длина, длинные слова, переносы, несколько предложений. Иначе получите «Текст 1» в промышленных масштабах.
Аудит компонентов и поиск ошибок
Агент может разобрать структуру компонентов, сопоставить комбинации свойств и указать на потенциальные ошибки. Перебирать все варианты вручную тогда не придётся. Речь здесь идёт про проверку того, как компонент настроен, плюс демо-прогон. Функциональные тесты это не заменяет.
Например, можно найти дублирующиеся комбинации свойств, оценить согласованность состояний и вложенных компонентов, заметить несогласованные размеры или возможные проблемы с контрастностью.
Промпт
Что нужно было сделать
Результат
Время
«в чём проблема с пропертями тут?»
Варианты аккордеона выдавали ошибки в Figma
Агент нашёл восемь пар дублирующихся комбинаций свойств, предложил гипотезы и показал, что можно поправить
43 сек
«Можешь провести тестирование работы компонента и найти уязвимости»
Провести структурный и визуальный аудит 40 выбранных компонентов
Найдены четыре проблемы и два риска
1 мин 25 сек
«а ты можешь протестировать компонент на правильность отработки всех пропертей и найти узкие горлышки?»
Проверить свойства и зависимости у table / cell
Агент разобрал 196 вариантов и 840 переключений, описал возможные ошибки размера и типа вложенной стрелки
4 мин 24 сек
Совет. Особенно полезен такой подход в больших наборах с сотнями вариантов. Результаты аудита всё равно проверяйте вручную: агент может неверно понять задуманную логику компонента.
Привязка токенов дизайн-системы
Одна из самых трудоёмких задач в дизайн-системе — массовая привязка значений в компонентах к токенам из библиотеки. Вручную перепривязывать цвета во многих компонентах я бы просто не взялась, слишком много монотонных действий.
В эксперименте сначала возникло препятствие: агент попросил подключить библиотеку Sova Style (это наша библиотека с токенами цветов, размеров и шрифтов). После подключения цвета компонентов удалось привязать к токенам.
Важно, чтобы агент не выбирал токены наугад. Один и тот же HEX-код может соответствовать нескольким токенам, поэтому в промпте я отдельно попросила в неоднозначных случаях ничего не менять и сообщать о них.
Промпт
Что нужно было сделать
Результат
Время
«Замени значения цветов по HEX во всех компонентах в файле на числовые значения из Sova Style токенов. Если есть спорные моменты, например один и тот же hex соответствует двум темам, двум разным токенам и ты не знаешь что выбрать, не устанавливай токен и подсвети это в чате. Важно, чтобы все цвета ссылались на Sova Style.»
Привязать цвета компонентов к токенам Sova Style, не подставляя неоднозначные наугад
Цветовые токены привязаны. На скриншоте ниже показано, то что агент не смог привязать. В основном это полупрозрачные значения, используемые с иллюстрациях и градиентах
56 минут
“Замени числовые значения во всех компонентах в файле на числоые значения из Sova Style токенов. Используй токен размер, чтобы устанавливать height компонента, используй spacing для паддингов и расстояний между элементами. Если каких-то токенов нет, то подсвети это. Не менйя значения в компонентах, только привяжи нужный числовой токен”.
Привязать числовые значения к токенам
Массовая операция выполнена, с геометрией одного компонента возникла проблема
58 минут
Совет. Перед массовой привязкой убедитесь, что нужная библиотека подключена. Если одному значению подходят несколько токенов, попросите агента не угадывать и выделить спорные случаи отдельно.
Референс со скриншота в редактируемый дизайн
Ещё один полезный сценарий: в макете есть скриншот или фрагмент интерфейса, и рядом нужно быстро собрать такой же набор элементов, но уже редактируемый. У меня это сработало с простой цветовой палитрой из квадратов.
Промпт
Что нужно было сделать
Результат
Время
«создай такую же палитру из квадратиков как на фото. возьми пипеткой цвет и сделай точно также . добавь недостающее количество квадратиков.»
По скриншоту палитры воссоздать набор цветных квадратов в редактируемом виде: взять цвета с изображения и добавить недостающие элементы
Палитра из 28 квадратов с цветами с изображения, 25 недостающих агент достроил сам
1 мин 39 сек
Совет. Используйте максимально простой и читаемый референс: крупный фрагмент, явная сетка, минимум лишних деталей. Чем проще структура на скриншоте, тем выше вероятность, что агент корректно перенесёт её в макет.
Массовая очистка названий страниц
Иногда хочется просто навести порядок в файле: унифицировать названия, убрать временные пометки и лишние эмодзи. По отдельности это мелочи, но когда страниц десятки, ручная правка превращается в рутину. В этом эксперименте я проверяла именно названия страниц в Figma, а слои не трогала.
Промпт
Что нужно было сделать
Результат
Время
«можешь убрать смайлик (пример смайлика) в названии всех страниц в фигме»
Убрать смайлики из названий страниц, сохранив остальной текст и другие пометки
Оба эмодзи удалены из названий 37 страниц. Символ вопросительного знака на некоторых страницах остался: его в запросе не было, и агент его не тронул
20 сек
Совет. Перечисляйте символы или фрагменты, которые нужно удалить, и просите не менять всё остальное.
ИИ помощник или генератор проблем?
Всего я дала агенту 19 задач: с восемнадцатью он справился полностью или в основном, одна так и не получилась. Часть успешных задач потребовала доработок, например, для привязки цветовых токенов пришлось подключить библиотеку. Сброс вложенного инстанса у меня сработал только со второго промпта, привязка числовых токенов в целом прошла, хотя с геометрией одного компонента возникла проблема. В итоге единственной неудачей осталась замена текста в 36 ячейках.
В таблицах я указывала время выполнения каждого промпта, но считать эти минуты чистой экономией было бы неправильно. Нужно ещё время на формулировку задачи и на проверку результата. А иногда и на исправление того, что агент успел натворить.
Зато мне стало ясно, какую работу я хочу делегировать, а какую могу делегировать. Агент хорошо справляется там, где задача механическая и у неё есть образец: он может переименовать, поменять местами, продолжить закономерность, оформить по эталону, привязать токены и провести первичный аудит. Слабее он там, где нужно додумать смысл, как вышло с тестовым текстом. Неоднозначность, как с токенами, снимается прямой инструкцией агенту не угадывать.
Для меня главный выигрыш от использования ИИ в Figma — параллельная работа. Пока агент выполняет понятную механическую задачу, я могу продумывать концепции, проверять гипотезы и искать продуктовые решения.
На этом мои эксперименты не заканчиваются. Мне интересно, насколько далеко можно зайти с автоматизацией дизайнерской рутины и в какой момент агент начинает требовать больше внимания, чем экономит. А вы отдаёте рутину дизайн-системы агентам? Расскажите в комментариях, что получилось делегировать и где агент всё сломал.
Источник: habr.com