|
Professor Seleznov
|
Всем привет! Я Никита Сошин, арт-директор и дизайнер в evilUNION. Вместе с Александрой Дёминой, дизайнером в evilUNION, мы в начале 2026 года взялись за проект, который казался решаемым через автоматизацию.
Проект жёстко ограничен по срокам и бюджету — всем знакомо?
Нам нужно было собрать базу для дизайн-системы мобильного приложения с нуля. Токены, типографика, компоненты, шаблоны, документация — всё сразу и в сжатые сроки. Делать это полностью руками было слишком долго, поэтому я задался вопросом — а как можно это автоматизировать?
План был безупречно амбициозный: делегировать и построить настоящий конвейер, который поможет нам не тормозить бизнес. И, не застревая на кропотливой работе с компонентами, экспериментировать с экранами и пользовательскими путями.
Спойлер: не вышло 😣. Но случился один сюжетный поворот…
Как выглядел план и как мы его придерживались
За нами:
- Lo-fi вайрфреймы (экраны без дизайна для понимания структуры приложения) ✅
- Указания по структуре токенов (+ все необходимые ссылки, например, на сайт Design Token Community Group и Tokens Studio) ✅
- Создание репозитория ✅
- Настройка MCP-сервера в Figma ✅
Мы кормили GPT макетами с описанием приложения и следили, чтобы список компонентов со всеми состояниями был точен и без галлюцинаций. Параллельно писали доку под структуру токенов и комбинировали разные LLM-ки, чтобы результат был быстрее, все по канонам API Figma и DTCG
Александра Дёмина, дизайнер в evilUNION
У нас были разные результаты в разных чатах, Claude лучше справлялся с подготовкой и генерации идей и супер-промпта. ChatGPT лучше справлялся с финальными документами.
Генерировали JSON с токенами, пушили в репозиторий и через Tokens Studio привязывали его и импортировали токены в Figma.
С помощью Codex от ChatGPT я смог сгенерировать веб-страницы со всеми компонентами и их состояниями по полученному списку. А затем через настроенный MCP-сервер импортировать все это в Figma.
Так у нас было на руках все — токены, компоненты, и можно было переходить к документации, но…
Где мы вставили палки себе же в колёса
Когда есть токены и компоненты — это прекрасно. Но еще прекраснее, когда токены подключены к компонентам! И именно этого такая схема не подразумевает.
Компоненты существуют в пространстве Codex, токены — в пространстве Tokens Studio. Никакой связи изначально не было заложено, потому что автоматизация каждого шага не предполагала, что шаги как-то знают друг о друге. На выходе: в Figma оказались две параллельные вселенные — компоненты без токенов и токены без компонентов.
Дальше начался аудит того, что нагенерировали. Структура токенов далеко не всегда совпадала с тем, как компоненты жили. Дубли, несоответствия, галлюцинации в именовании — всё это нужно было проверять и исправлять руками. Эта работа может оцениваться в бесконечное количество часов, потому что никто не знает, не нужно ли будет все переделывать, когда мы проверим всё до конца.
Александра Дёмина, дизайнер в evilUNION
ИИ мог сгенерировать компонент с вложенными компонентами, но все вложенные элементы создавались заново — без привязки к уже существующим родительским компонентам.
Когда пришло время соединить одно с другим — выяснилось, что это примерно та же работа, что сделать всё с нуля. Только теперь ещё нужно разбираться в чужой структуре — пусть и сгенерированной по нашим лекалам, но все же сгенерированной ИИ.
Проделанная работа даёт буст в качестве, но не буст во времени — это зависит только от специалистов и контекста.
Времени у нас к тому моменту почти не осталось.
Что это говорит про ИИ в 2026 году
ИИ — это настоящий подарок для дизайнера для оптимизации самой неинтересной и примитивной работы: генерация подходящего под макеты рыба-текста, структурировать план по ТЗ, формулировать задачи, помогать с discovery и погружением в проект и многое другое, в том числе строить прототипы и вайрфреймы.
ИИ хорошо делает изолированные задачи. Вытащить список компонентов из макетов — ✅. Сгенерировать JSON токенов по спецификации — ✅. Но связь между результатами этих задач — ❌ это отдельная работа, которую никто пока что не сделает за тебя просто по нажатию кнопки. И именно на неё у нас не было ни времени, ни бюджета.
Мы думали, что строим конвейер. На деле построили базу, с которой быстрее можно начать работать, чтобы сделать работу качественней, сконцентрировавшись на аудите самой дизайн-системы.
Никита Сошин, арт-директор и дизайнер в evilUNION
К моменту выхода статьи Figma добавила возможность агентам работать на канвасе через MCP, это может означать, что частично проблема может быть уже решена, или же нет — это предстоит еще выяснить.
Как мы выбирались из этой ж…ивотрепещущей головоломки
Было страшно, но, кажется, мы справились.
Самые заковыристые идеи как всегда приходят из самых сложных (мягко выражаясь) ситуаций. Так нам стало очевидно наше узкое место — как нам интегрировать токены в компоненты, как заставить то, что, казалось бы, невозможно, подключить в процесс дизайна в Figma. Но что если… можно?
Действия по подключению токенов вполне себе описываются в четкий алгоритм с конкретным ожидаемым результатом. Есть спецификация, есть гайдлайны, как строить токены. Есть в конце концов множество практических лекций от самых разных дизайнеров, с помощью которых можно сформулировать конкретный промпт, который позволит все это соединить. Но нет возможности разрешить ИИ это делать. Зато в Figma есть множество плагинов, которые закрывают самые разные потребности.
Что если… Создать плагин, который по четкому алгоритму будет анализировать компоненты и структуру токенов подключать токены или создавать необходимые по нажатию одной кнопки?
Результат не заставил себя долго ждать! Я написал плагин для Figma под эту конкретную задачу с помощью Codex. Он работает по очень простому алгоритму:
- Анализирует компонент: смотрит на все его параметры, анализирует внутренности, определяет, какой это компонент
- Анализирует существующие токены: смотрит структуру, находит подходящие или делает вывод о том, что подходящих нет
- Создает новые токены, если таковых нет в проекте
- Привязывает компонент к этим токенам
Конечно, это не заклинание “Исполнение желаний”, это в первую очередь рабочий инструмент на алгоритме, поэтому у него есть свои проблемы: не всегда отлавливает структуру компонента; сложно понимает, что нужно оборачивать в токены, а что не нужно; может не соотносить структуру токенов с неймингом компонента и создавать новые токены; создание новых токенов может быть с очень сложной вложенной структурой из-за нейминга компонента; и многое другое.
Каждый недостаток приходилось закрывать либо в ручную, либо с помощью доработки плагина. Но это спасло нас и проект. Решение получилось нетривиальным, а опыт запомнится на всю жизнь 🥷-Задачу мы выполнили в срок, а результат — это прежде всего не сама дизайн-система. А понимание того, что ИИ — это не то, что не волшебная палочка, это даже пока что не рабочий станок. Это скорее шуруповерт, рабочий инструмент, который ускоряет отдельные части работы, но никак не может по велению одного промпта закрыть сразу все задачи. Конечно, мы это понимали, но ограничения бюджета и времени предрасполагали попробовать решить задачу новым способом. И кажется, у нас это все же вышло!-Источник
|
