Тестирую Figma AI на 19 задачах по дизайн-системе

Я протестировала встроенного агента Figma AI на 19-ти задачах. Среди них были переименование сотни вариантов, перепривязка цветов к токенам и пересборка таблицы из колонок в строки. Со всеми задачами агент в итоге справился, но не всегда с первой итерации. Под катом делюсь типами задач, с которыми у агента всё сработало, а также результатами, затраченным временем и приемами, которые помогают договориться с агентом.

Меня зовут Екатерина Ларионова, я продуктовый дизайнер и развиваю дизайн-систему «Сова» в ИТ-экосистеме «Лукоморье».

Я убеждена, что работа с нейросетями похожа на бесконечную проверку гипотез: нужны время и терпение, чтобы найти подходящую формулу делегирования, при которой агент действительно помогает. У меня не всё получалось с первого промпта: иногда приходилось уточнять формулировку или просить агента исправить результат. Но даже после неудачной первой попытки большинство задач в итоге решалось. В этой статье хочу поделиться с вами сработавшими промптами и советами, которые улучшат запросы для Figma AI.

Под Figma AI в статье я имею в виду встроенного агента в Figma Design, который редактирует существующие слои и компоненты. Figma Make в эксперимент не включали.

Массовое изменение свойств и состояний

Сюда относятся задачи, где нужно одновременно поменять свойства у множества компонентов или вариантов и по возможности сохранить остальные настройки. Особенно это выручает в больших наборах, где одно и то же действие пришлось бы повторять вручную десятки раз.

Например, можно переключить состояния default/hover/selected, переименовать свойства, поменять размер вложенных компонентов, исправить перепутанные значения вариантов или массово включить и выключить определённые элементы.

Больше всего меня удивил третий пример. Судя по отчёту агента, он восстановил имена свойств по образцу: level, opened, hover, chevron icon, type. Такой отчёт тем не менее нужно сверять с панелью свойств самого компонента.

Промпты, как видите, звучат как речь неандертальца. Агент всё равно схватывает контекст: он понимает, что выделено на холсте, и работает с выделенным.

Новые варианты по существующей логике

Агент умеет анализировать уже созданные варианты, находить закономерность и продолжать последовательность. Если у уровней, размеров или вариантов есть понятный шаг, можно прямо попросить достроить следующий элемент.

Например, можно добавить новый уровень вложенности дерева или аккордеона с самостоятельным расчётом отступов. Или создать недостающие состояния и продолжить структуру компонента, сохранив его свойства и оформление.

Совет. Пишите не только о том, что поменять, но и о том, что не трогать: текст, порядок, ширины, свойства, состояния. Рискованные изменения сначала пробуйте на одной копии или на небольшой выборке.

Оформление по эталону

Агент может взять один или несколько правильно оформленных компонентов за образец и распространить их настройки на остальные компоненты.

Например, можно повторить настройки Auto Layout, заливки, обводки, отступы и выравнивание, настроить чередование цветов строк или оформить закреплённые колонки таблицы с учётом чекбоксов.

Совет. Один готовый пример прямо в макете работает лучше, чем полстраницы описания визуальной логики.

Перестройка Auto Layout и структуры

Агент может перестраивать структуру компонентов и порядок вложенных элементов, сохраняя содержимое и оформление. Например, можно пересобрать таблицу из колонок в строки, объединить элементы в Auto Layout, поменять направление и порядок вложенности или добавить элементы скролла по образцу.

Пересобирать такие таблицы в Auto Layout вручную — просто мрак. Это десятки однотипных действий, и всё время приходится следить, чтобы ничего не съехало. На этом фоне 5 минут 17 секунд выглядят как хорошая экономия времени и сил.

Совет. Если задача состоит из нескольких этапов, не позволяйте агенту сразу вносить изменения. Сначала попросите описать, как он понял задачу, что собирается сделать и что оставит как есть. Так ошибки в интерпретации будут видны заранее, пока агент ещё ничего не сломал. Например:

«Прежде чем приступать к работе, опиши по шагам, как ты понял задачу, что собираешься изменить и какие элементы не будешь трогать. Дождись моих правок и подтверждения. Только после этого приступай к выполнению».

Массовое заполнение и замена контента

Агент может массово менять текст, переносить данные между компонентами и заполнять элементы по образцу. Например, можно перенести содержимое из одной таблицы в другую, заменить заглушки реалистичным содержимым, заполнить десятки ячеек текстом разной длины или сгенерировать примеры содержимого для проверки поведения компонентов.

Это и был тот самый провал: казалось бы, рутинная задача, которую очень хочется автоматизировать, но без должного внимания к промпту агент не справился.

Совет. Если нужен тестовый контент, задайте такие свойства: разная длина, длинные слова, переносы, несколько предложений. Иначе получите «Текст 1» в промышленных масштабах.

Аудит компонентов и поиск ошибок

Агент может разобрать структуру компонентов, сопоставить комбинации свойств и указать на потенциальные ошибки. Перебирать все варианты вручную тогда не придётся. Речь здесь идёт про проверку того, как компонент настроен, плюс демо-прогон. Функциональные тесты это не заменяет.

Например, можно найти дублирующиеся комбинации свойств, оценить согласованность состояний и вложенных компонентов, заметить несогласованные размеры или возможные проблемы с контрастностью.

Совет. Особенно полезен такой подход в больших наборах с сотнями вариантов. Результаты аудита всё равно проверяйте вручную: агент может неверно понять задуманную логику компонента.

Привязка токенов дизайн-системы

Одна из самых трудоёмких задач в дизайн-системе — массовая привязка значений в компонентах к токенам из библиотеки. Вручную перепривязывать цвета во многих компонентах я бы просто не взялась, слишком много монотонных действий.

В эксперименте сначала возникло препятствие: агент попросил подключить библиотеку Sova Style (это наша библиотека с токенами цветов, размеров и шрифтов). После подключения цвета компонентов удалось привязать к токенам.

Важно, чтобы агент не выбирал токены наугад. Один и тот же HEX-код может соответствовать нескольким токенам, поэтому в промпте я отдельно попросила в неоднозначных случаях ничего не менять и сообщать о них.

Совет. Перед массовой привязкой убедитесь, что нужная библиотека подключена. Если одному значению подходят несколько токенов, попросите агента не угадывать и выделить спорные случаи отдельно.

Референс со скриншота в редактируемый дизайн

Ещё один полезный сценарий: в макете есть скриншот или фрагмент интерфейса, и рядом нужно быстро собрать такой же набор элементов, но уже редактируемый. У меня это сработало с простой цветовой палитрой из квадратов.

Совет. Используйте максимально простой и читаемый референс: крупный фрагмент, явная сетка, минимум лишних деталей. Чем проще структура на скриншоте, тем выше вероятность, что агент корректно перенесёт её в макет.

Массовая очистка названий страниц

Иногда хочется просто навести порядок в файле: унифицировать названия, убрать временные пометки и лишние эмодзи. По отдельности это мелочи, но когда страниц десятки, ручная правка превращается в рутину. В этом эксперименте я проверяла именно названия страниц в Figma, а слои не трогала.

Совет. Перечисляйте символы или фрагменты, которые нужно удалить, и просите не менять всё остальное.

ИИ помощник или генератор проблем?

Всего я дала агенту 19 задач: с восемнадцатью он справился полностью или в основном, одна так и не получилась. Часть успешных задач потребовала доработок, например, для привязки цветовых токенов пришлось подключить библиотеку. Сброс вложенного инстанса у меня сработал только со второго промпта, привязка числовых токенов в целом прошла, хотя с геометрией одного компонента возникла проблема. В итоге единственной неудачей осталась замена текста в 36 ячейках.

В таблицах я указывала время выполнения каждого промпта, но считать эти минуты чистой экономией было бы неправильно. Нужно ещё время на формулировку задачи и на проверку результата. А иногда и на исправление того, что агент успел натворить.

Зато мне стало ясно, какую работу я хочу делегировать, а какую могу делегировать. Агент хорошо справляется там, где задача механическая и у неё есть образец: он может переименовать, поменять местами, продолжить закономерность, оформить по эталону, привязать токены и провести первичный аудит. Слабее он там, где нужно додумать смысл, как вышло с тестовым текстом. Неоднозначность, как с токенами, снимается прямой инструкцией агенту не угадывать.

Для меня главный выигрыш от использования ИИ в Figma — параллельная работа. Пока агент выполняет понятную механическую задачу, я могу продумывать концепции, проверять гипотезы и искать продуктовые решения.

На этом мои эксперименты не заканчиваются. Мне интересно, насколько далеко можно зайти с автоматизацией дизайнерской рутины и в какой момент агент начинает требовать больше внимания, чем экономит. А вы отдаёте рутину дизайн-системы агентам? Расскажите в комментариях, что получилось делегировать и где агент всё сломал.