Модуль d.7: Figma AI и прототипирование

Ведущая: Привет-привет! С вами AIStudy — бесплатный курс про искусственный интеллект. Сегодня говорим о том, как дизайнеру за вечер собрать кликабельный прототип и не получить красивую картинку, в которой ничего не работает.

Ведущий: Привет! Три вопроса. Что искусственный интеллект умеет прямо внутри Figma и как это считается в кредитах. Чем Figma Make отличается от обычного холста и почему в нём ломается состояние. И как с тем же заданием справляются Google Stitch и v0, чтобы собрать из них один конвейер.

Ведущая: Часть первая. Начнём с Figma. Я думала, что там одна кнопка с искрами, которая делает всё. Это не так?

Ведущий: Это и есть главная ошибка команд: пытаться решить любую задачу одной кнопкой генерации. На деле у Figma четыре разные точки входа, и выбирать нужно по тому, где должен жить результат. Первая: обычный холст Figma Design. Там получаются редактируемые слои, и там же работает автоматическая проверка макета. Вторая: Figma Make, живое интерактивное превью с настоящим кодом внутри. Третья: наборы Make Kits, которые заставляют генерацию следовать правилам вашей команды. И четвёртая: сервер MCP, через который агент в Cursor или Claude Code читает ваши макеты.

Ведущая: То есть один и тот же экран может пройти через все четыре, но каждый раз это будет другой объект?

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

Ведущая: Хорошо. А что на холсте реально экономит время, а не просто красиво выглядит в рекламе?

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

Ведущая: А остальные три? И чем они пригодятся в обычный рабочий день?

Ведущий: Удаление фона у фотографии без внешних редакторов. Превращение растрового наброска или логотипа в векторные контуры, которые потом дорабатываешь пером. И автоматическое переименование слоёв. Вместо сотни безымянных прямоугольников слои получают имена вроде «главный баннер» и «кнопка основного действия». Казалось бы, мелочь, но на макете в двести слоёв это полчаса уборки. А главное: когда агент разработчика читает ваш фрейм, осмысленные имена превращаются в нормальные названия компонентов в коде.

Ведущая: А как заранее понять, во сколько обойдётся проект? Не хочется остаться без кредитов посередине работы.

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

Ведущая: Теперь про запрос. У меня привычка писать «сделай красивый экран карточки товара».

Ведущий: Знаю такую привычку. Беда в том, что модель не знает вашего продукта, и «красивый» для неё пустое слово. Она выдаст шаблонную витрину, потом ещё три платные перегенерации, и бюджет улетел. Работает структура: тип экрана, платформа, блоки сверху вниз и характер. Например: карточка товара мобильного магазина одежды, сверху карусель фотографий, ниже название, цена и бейдж скидки, выбор размера, внизу фиксированная кнопка, светлый минимализм. С таким описанием каркас получается с первой попытки. Технически всё просто: создаёте фрейм под нужное устройство, вызываете меню действий, выбираете генерацию черновика и вставляете структурное описание. Дальше разбираете результат по слоям: заменяете текст-рыбу на реальные данные и привязываете стили.

Ведущая: А дальше? Попросить «кнопку чуть крупнее» или «замени синий на индиго»?

Ведущий: Вот тут главная ловушка. Каждая такая просьба стоит как новая генерация. Три фразы про цвет и размер съедят половину дневного лимита на бесплатном плане. Тактика другая: получили грубый каркас, а размеры, цвета и шрифты довели руками. Перетаскивание мышкой и привязка переменных ничего не стоят. Выходит гибрид: одна генерация, одна уточняющая итерация, всё остальное руками.

Ведущая: И сложные иллюстрации, наверное, тоже не из Figma брать?

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

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

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

Ведущий: Тогда в чём подвох? Если всё работает, зачем отдельные правила для запроса?

Ведущая: Подвох в порядке инструкций. Типичная ошибка дизайнеров: они начинают запрос со шрифтов, скруглений и кодов цвета. Модель рисует красивую декорацию, где кнопки не работают, а переход на следующий экран стирает всё, что человек ввёл. Поэтому запрос для Figma Make пишется в два абзаца. Первый про маршрут: откуда человек пришёл, какое действие совершает, что показать, если поиск ничего не нашёл, и почему кнопка «Назад» должна сохранять выбранные фильтры, а не обнулять их. Здесь же стоит запретить выдумывать лишнее: не подключай оплату, не сочиняй чужие списки. Второй абзац про вид: приложите готовый фрейм из Figma и попросите унаследовать из него шрифты, цвета и кнопки.

Ведущий: Структурный фрейм, как я понимаю, лучше скриншота.

Ведущая: Намного лучше. Из скриншота модель угадывает пиксели, а из фрейма читает настоящие значения. Дальше работает правило одного маршрута. После первой генерации не кликайте всё подряд. Пройдите одну сквозную ветку: от первого выбора до возврата назад. Скажем, выбрали жанры, открыли список книг, добавили одну в избранное, нажали «Назад». Если выбор жанров сбросился, не пишите «сделай удобнее». Пишите точно: при возврате сохраняй массив выбранных жанров и не обнуляй его. Одна конкретная команда про состояние чинит больше, чем десять просьб про современный вид.

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

Ведущая: Бронирование переговорной комнаты, два экрана. Подготовьте на холсте карточку комнаты и два стиля кнопки, активный и неактивный, и приложите этот фрейм. Первый абзац запроса: пользователь выбирает дату, минимальную вместимость и фильтр «есть экран», видит подходящие комнаты и нажимает «Забронировать»; если свободных комнат нет, покажи пустое состояние с кнопкой сброса фильтров; при возврате с экрана подтверждения фильтры и дата сохраняются; оплату не добавляй. Второй абзац: шрифты, отступы и кнопки возьми из фрейма. Потом выставьте вместимость на пятнадцать человек, дойдите до подтверждения и нажмите «Назад». Если пятнадцать сбросилось, одна точная команда это исправляет.

Ведущий: Понял. А если над прототипами работает вся команда, а не один человек? Там же сразу начнётся разнобой.

Ведущая: Начнётся, и это вторая проблема, командная. Когда несколько дизайнеров генерируют прототипы в разных файлах, в каждом появляются свои оттенки синего, свои отступы и свои кнопки. Причина не в коротком запросе, а в том, что правил дизайн-системы нет в контексте генерации. Фраза «используй нашу библиотеку» не помогает. Для жёсткого контроля есть наборы Make Kits: они связывают кодовые пакеты, опубликованные библиотеки стилей Figma и текстовые правила использования компонентов.

Ведущий: И что писать в этих правилах? Одной палитры, надо думать, мало.

Ведущая: Мало. Пишите поведение. Для главного действия на экране всегда используй основную кнопку. Пока обязательные поля пусты или в них ошибка, переводи её в неактивное состояние. Второстепенные действия оформляй прозрачной кнопкой. Потом стресс-тест: сгенерируйте страницу, где одновременно есть форма, ошибка проверки, пустой список и длинные русские заголовки в три строки. Нарушила модель отступы в карточке ошибки, уточняете правило и перегенерируете. Команде набор открывайте, когда повторные генерации перестали давать разнобой.

Ведущий: А если прототип утверждён и его нужно вернуть на обычный холст, чтобы выровнять сетку?

Ведущая: Для этого есть кнопка Copy Design. Переходите в нужное состояние экрана в Make, нажимаете её на верхней панели, возвращаетесь на холст Figma Design и вставляете. Экран приходит деревом редактируемых слоёв: можно править текст, менять размеры, включать авто-лейаут. Одна оговорка по делу: это снимок. Связи с прототипом нет, правки на холсте обратно в Make не вернутся, и за один раз копируется одно состояние.

Ведущий: Остался последний вход, сервер MCP. Что он даёт человеку, который код не пишет?

Ведущая: Передача макета в разработку перестала быть улицей с односторонним движением. Агент в Claude Code, Cursor или VS Code подключается к серверу Figma и читает ваши файлы. Не угадывает по скриншоту, а берёт точные определения переменных: цвета, отступы, шрифтовые токены. Ищет готовые компоненты в вашей дизайн-системе. А ресурсы Figma Make отдаёт как обычные материалы: вы копируете ссылку на проект, передаёте агенту, и он забирает каркас прототипа, меняет временные элементы на боевые компоненты репозитория и подключает настоящие данные, сохраняя задуманную логику переходов.

Ведущий: И обратно информация тоже ходит?

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

Ведущий: Как выглядит рабочий сценарий?

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

Ведущий: Запомнил так: Make собирает сценарий, наборы держат стиль, а сервер переводит всё это в код.

Ведущая: Часть третья. Есть ещё Google Stitch, про который говорят, что он убил серые вайрфреймы. Это правда?

Ведущий: Отчасти. Вслед за вайб-кодингом в разработке весной этого года в дизайне закрепился подход «вайб-дизайн», и Google Stitch стал его флагманом. В марте его перестроили: вместо чата «запрос и картинка» это бесконечный холст на основе искусственного интеллекта, где проект растёт от первого референса до кликабельного прототипа без переходов между программами.

Ведущая: А что такое вайб-дизайн на деле? «Сделай красиво» на новый лад?

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

Ведущая: А когда направление выбрано, вводить длинные уточнения с клавиатуры, наверное, неудобно?

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

Ведущая: И что я забираю из Stitch, кроме красивых картинок?

Ведущий: Самое практичное нововведение: файл DESIGN.md. Когда на холсте найден удачный стиль, а можно загрузить и существующий сайт, инструмент собирает из него обычный текстовый документ: цветовые токены с ролями, шкалу типографики, правила отступов и паттерны компонентов. Его кладут в корень проекта, и агент в Claude Code, Cursor или Gemini CLI читает его как единственный источник правды по стилю.

Ведущая: Приведи пример запроса для Stitch, чтобы я услышала, как это звучит.

Ведущий: Веб-сервис для звукорежиссёров и подкастеров по очистке голоса. Ощущение: студийная точность, тактильность аналоговых приборов, но без перегруза. Вдохновение: минимализм Teenage Engineering и тёмные панели Linear. И приложите скриншот любого аудио-интерфейса, который нравится. Получаете несколько направлений, выбираете два сильных, ставите рядом и просите достроить для лучшего связанные экраны: загрузку дорожки и сравнение «до и после».

Ведущая: Звучит как волшебство. Где здесь потолок?

Ведущий: Stitch отлично ищет направление, но точную привязку к библиотеке компонентов и командную дизайн-систему лучше вести в Figma. Поэтому конвейер такой: быстрый поиск концепции в Stitch, потом системная доводка в Figma, потом сборка боевого приложения в среде разработки с переданным DESIGN.md. И заметьте, что меняется роль дизайнера. Когда искусственный интеллект берёт на себя ранний каркас, ценность смещается из скорости рисования прямоугольников в суждение и вкус: точно сказать, какое ощущение нужно, отличить сильную композицию от пустой мишуры и увидеть, что сломается при росте продукта.

Ведущая: Хорошо, Stitch нашёл настроение. А как получить работающий код?

Ведущий: Тут выходит v0 от компании Vercel, создателей фреймворка Next.js. Он не рисует векторные слои, а сразу пишет рабочий код на React и Tailwind с готовыми компонентами shadcn, и результат можно опубликовать по ссылке в один клик. Но у v0 своя беда: у половины новичков получаются интерфейсы-клоны. Если не дать модели точных токенов, она откатывается к среднему по интернету: фиолетовый градиент, стандартные серые рамки, одинаковые скругления.

Ведущая: Как с этим бороться, если интерфейс нужен брендовый?

Ведущий: Четыре шага. Шаг первый: до описания логики передайте токены или DESIGN.md из Stitch и зафиксируйте правило: используй этот список как единственный источник правды, собственных цветов, шрифтов и скруглений не придумывай. Шаг второй: закажите только каркас, сетку и иерархию данных. Не просите в первом запросе анимации, модальные окна и проверку форм. Шаг третий: когда сетка встала, добавьте поведение: рабочую сортировку таблицы, фильтр, выезжающую панель при клике на строку. Шаг четвёртый: держите модель в границах правил. Если она подставила стандартный синий, не пишите «поправь стиль», а ссылайтесь на токен: замени этот цвет на токен основного действия и приведи отступы к шкале.

Ведущая: Ссылаешься на правило, а не на ощущение. Это то же самое, что мы делали с состоянием в Make. А дай живой пример каркаса и добавки: что просить первым запросом, а что вторым?

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

Ведущий: Часть четвёртая. Осталось два инструмента. Начнём с того, который отвечает за дизайн-систему.

Ведущая: Magic Patterns. Его берут, когда экраны должны целиком состоять из деталей вашей существующей дизайн-системы. Загружаете токены, палитру, шрифты и радиусы, и каждый новый экран собирается в вашей системе. И есть приём для исследования чужих стилей: расширение для браузера Chrome захватывает интерфейс любого живого сайта, а вы дальше строите на этой основе свои экраны, не копируя чужое содержание.

Ведущий: А если код мне вообще не нужен? Мне надо набросать структуру сложного экрана и показать менеджеру.

Ведущая: Тогда плагин UX Pilot для Figma. Он работает прямо на холсте: в режиме черновика рисует чистые серые схемы для согласования логики, в режиме готового дизайна собирает детальные фреймы из обычных слоёв Figma. Пять минут, и есть редактируемый каркас для созвона.

Ведущий: Получается, инструментов много, и каждый про своё. Как не запутаться?

Ведущая: Выбирайте по задаче. Нужен рабочий код и живая ссылка для заказчика: v0. Нужно десять экранов строго в цветах существующего продукта: Magic Patterns. Нужен серый каркас за пять минут: UX Pilot. Нужно проверить ветвящийся сценарий с состояниями и подключить код: Figma Make. Нужно нащупать настроение и поправить голосом: Stitch, у него есть бесплатный уровень.

Ведущий: Давай проверим всё это на одном задании. Что берём?

Ведущая: Бриф TaskFlow: трекер задач и спринтов для продуктовых команд, сдержанный инженерный минимализм, тёмная тема, индиго как главный акцент. Четыре обязательных блока. Первый экран с заголовком, формой быстрого старта по почте и превью доски. Три карточки возможностей. Интерактивный блок тарифов: ползунок размера команды, переключатель «месяц или год» и три карточки, где сумма пересчитывается на лету. И второй экран подтверждения, куда переезжают выбранное число участников и тип оплаты. Одно задание, три инструмента, и сразу видно, кто рисует ширму, а кто держит логику.

Ведущий: Начинаем с Figma Make. Где он споткнётся?

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

Ведущий: А как покажет себя Stitch?

Ведущая: У него другая беда: визуальный перегруз в плотных блоках. В секции тарифов он увлекается декоративными свечениями и крупными заголовками, и три карточки не помещаются в экран. А достроенный второй экран может получить чуть другой оттенок тёмного. Исправление: выделить секцию и сказать голосом «убери цветные свечения за карточками, сделай отступы компактнее, а карточку Pro выдели тонкой обводкой». Потом выровнять стиль на всех экранах одной командой и забрать DESIGN.md.

Ведущий: И последний этап, v0, куда как раз пойдёт этот DESIGN.md.

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

Ведущий: А как понять, какой из трёх подошёл именно мне?

Ведущая: Поставьте каждому оценку от одного до пяти по пяти критериям: скорость первого концепта, попадание в стиль, глубина интерактива, удобство точечной доводки и польза результата, то есть слои, DESIGN.md или готовый код. Таблица покажет, что лучше закрывает ваши задачи. А у сильных дизайнеров на реальных проектах не выбор «или», а цепочка минут на сорок пять. Десять минут в Stitch: найти настроение, поправить голосом, выгрузить DESIGN.md. Двадцать в Figma: проверить макет, подключить набор, отладить переходы и пустые состояния в Make. Пятнадцать: передать утверждённый фрейм и переменные через сервер в v0 или среду разработки и опубликовать живой прототип.

Ведущий: Два вопроса себе на дорожку. Какая ваша ближайшая задача: каркас, сценарий с состоянием или готовый код?

Ведущая: И что вы запишете в правила набора или в DESIGN.md первым?

Ведущий: Подведём итог. Первое: у Figma четыре входа, и выбирать нужно по тому, где должен жить результат: холст, живой прототип, правила команды или код. Второе: на холсте кредиты тратим на структурный каркас, а доводку делаем руками. Третье: в Figma Make запрос начинается с маршрута и состояний, а вид идёт вторым абзацем, и поломки лечим точной командой про состояние. Четвёртое: Stitch ищет настроение и отдаёт DESIGN.md, а v0 собирает код на токенах. Пятое: ни один генератор не даёт идеал с первого запроса, а профессионал узнаёт типичную ошибку инструмента и чинит её вторым точным шагом.

Ведущая: Картинки и задания ждут в уроках на сайте.

Ведущий: Дальше в курсе модуль про сайты без кода: Framer, Webflow, Bolt.new и Lovable, и как запустить настоящий сайт с базой данных. А если хочется попробовать разные нейросети в одном месте, без VPN и с оплатой рублями, это наш сервис arckep.ru.

Ведущая: Спасибо, что слушали!

Ведущий: До встречи!