Figma и Canva обучили собственные модели для правки макетов: что это значит для дизайнеров
29–30 октября обе платформы рассказали о моделях, которые натренированы не «на всё», а на одну работу: точечно править готовый дизайн. Figma опубликовала разбор того, как обучала модель внутри своего агента, Canva представила Brush. Общий вывод у компаний один: узкая модель на своих данных правит макеты быстрее и дешевле универсальной.
29 октября вице-президент Figma по разработке Джош Клемм опубликовал в блоге компании подробный рассказ о модели, которая правит макеты на холсте внутри Figma-агента. Почти одновременно Canva представила Brush, первую собственную визуально-языковую модель для дизайна. Запуск Brush независимо описал австралийский деловой издатель Capital Brief.
Обе компании пришли к одному решению. Универсальная модель хорошо придумывает, но плохо правит: она не знает внутреннего формата файла, путает слои и тратит много токенов на длинные инструкции. Поэтому платформы взяли открытые модели и дообучили их на собственных задачах редактирования.
Этот подход касается не только редакторов дизайна. Любой продукт со своим форматом данных и повторяющимися правками может сделать то же самое: узкий агент, обученный на своих примерах, вместо одного большого промпта к общей модели. Если такой агент нужен внутри вашего сервиса, задачу можно обсудить с командой, которая занимается созданием ИИ-агентов под процессы бизнеса, например с YuSMP Group.
Что показала Figma?
Figma начала с дообучения на примерах. Каждый пример состоял из исходного макета, синтетического запроса на правку и удачного результата, причём дизайн был записан в родном формате Figma. На первом этапе команда обучила Llama 3.3 70B на 250 тысячах таких примеров и, по словам компании, вышла на уровень лучших моделей того времени. Затем подключили обучение с подкреплением: простое подражание примерам плохо обобщалось на новые задачи.
Качество правки Figma не считает одной цифрой. Его разложили на измеримые свойства: выравнивание, контраст, использование компонентов и выполнение запроса. Оценку дают автоматические визуальные судьи, а их калибруют дизайнеры-эксперты. Результаты против предыдущей версии агента такие:
- в 62% сравнений новая версия выигрывает;
- пользователи оценивают её на 33% выше;
- отмен действий стало на 60% меньше;
- от бета-версии до общего релиза агент ускорился примерно на 20%.
Своя модель не заменила сторонние. Генерацию изображений, векторы и поиск новых идей Figma по-прежнему отдаёт внешним моделям, а свою использует для точных правок и итераций.
Что показала Canva?
Brush сделала Canva Research, внутренняя ИИ-лаборатория компании. Capital Brief пишет, что в ней 160 человек. В основе лежит открытая модель, которую дообучили на реальных задачах дизайна и редактирования, а затем провели масштабное обучение с подкреплением. Награду модель получает за визуальное качество, соблюдение принципов вёрстки и выполнение запроса. Brush работает как агент: пишет и запускает код, который меняет элементы, смотрит на результат и поправляет. По данным Canva, по сравнению с прежним дизайн-агентом Brush до 69% быстрее на типовых правках и на 46% дешевле в пересчёте на одну задачу. Сейчас модель доступна подписчикам Canva Pro, расширение обещают позже.
Почему это важно дизайнерам?
Первое: агенты в редакторах переходят от генерации с нуля к правке существующих файлов. Значит, итог зависит от того, насколько аккуратно устроен файл: названы ли слои, собраны ли экраны из компонентов, есть ли токены. О том, как Figma предлагает описывать правила для агента, мы писали в материале про Guidelines в дизайн-системе.
Второе: 60% меньше отмен — хороший сигнал, но не повод отключать проверку. Nielsen Norman Group называет ИИ новой парадигмой интерфейса, где человек задаёт результат, а не шаги. Ответственность за этот результат при этом остаётся на дизайнере. Где нейросети реально экономят время, а где добавляют работы, мы разбирали в статье об ИИ в работе дизайнера.
Что делать команде?
- Наведите порядок в файлах: компоненты вместо отвязанных копий, понятные имена слоёв, токены цвета и отступов. Агент правит то, что видит.
- Опишите критерии хорошей правки так же явно, как Figma: выравнивание, контраст, использование компонентов, выполнение запроса. Это пригодится и для ревью работы людей.
- Проверяйте состояния компонентов после правок агентом: ошибки чаще всего прячутся в hover, focus и error. Поможет наш чек-лист состояний.
- Если в вашем продукте есть свой формат данных и много однотипных правок, оцените, не выгоднее ли узкая дообученная модель, чем длинные промпты к общей.
Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.
