ИИ уже научился писать код интерфейсов — от простых лендингов до сложных дашбордов. Но до недавнего времени между «кодом от ИИ» и привычным рабочим процессом в Figma зияла пропасть: дизайнеру приходилось либо вручную повторно собирать макеты по коду, либо работать с сырыми прототипами, никак не связанными с дизайн‑системой.
Запуск Figma Make и функция копирования предпросмотра как дизайн‑слоёв постепенно закрывают этот разрыв: код, сгенерированный ИИ, можно использовать как топливо для быстрых прототипов, а затем превращать эти прототипы в полноценные макеты в Figma Design, пригодные для дальнейшей доработки и интеграции в дизайн‑систему.
От AI‑кода к живому интерфейсу: где тут Figma
Сначала казалось, что главная задача — научить ИИ генерировать «чистый» фронтенд‑код. Но по мере развития инструментов стало ясно: дизайнеру важнее не сам код, а скорость перехода от абстрактной идеи к редактируемому макету. Код в этом процессе — лишь промежуточный артефакт.
Новые возможности Figma строятся именно вокруг этой мысли. Вместо прямой магии «код → пиксели» Figma предлагает промежуточный слой — Figma Make. Это AI‑ориентированный инструмент внутри экосистемы Figma, в котором можно:
- собрать рабочий прототип из промптов и/или AI‑кода;
- быстро итеративно менять структуру и контент интерфейса;
- а затем копировать текущее состояние предпросмотра в Figma Design как обычные слои.
Так код, созданный ИИ, превращается не в конечный продукт, а в отправную точку для дизайнерской работы.
Что такое Figma Make и чем он отличается от Figma Design
Если Figma Design — это привычный «холст для макетов», то Figma Make — это «песочница для быстрых прототипов с ИИ»:
- вы можете описывать интерфейсы текстом (prompt‑to‑app);
- использовать сгенерированный код и преобразовывать его в работающие экраны;
- на лету изменять контент и структуру, экспериментируя с разными вариантами UX.
Ключевая особенность: в Make всё завязано на динамическом предпросмотре. Вы видите работающее приложение/прототип, кликаете по нему, редактируете текст, компоненты, навигацию — и ИИ помогает достраивать недостающие части.
Однако для команды, которая живёт в компонентах, токенах и дизайн‑системе, одного прототипа мало. Нужен редактируемый дизайн‑файл с кадрами, слоями, сетками и стилями. Эту роль по‑прежнему выполняет Figma Design. Именно сюда в итоге и должен попасть результат работы с AI‑кодом и Make.
Copy preview as design layers: мост между прототипом и макетом
Ключевая функция, которая превращает связку «AI‑код → Make → Design» в реальный рабочий поток, называется Copy a Figma Make preview as design layers. Она делает следующее:
- вы открываете нужный прототип/экран в Figma Make;
- настраиваете его состояние (состояние страницы, открытые панели, контент);
- затем запускаете команду Copy design / Copy preview as design layers;
- вставляете результат в файл Figma Design — и получаете набор обычных векторных слоёв.
То есть вместо скриншотов и ручной пересборки у вас появляется точный «снимок» текущего состояния интерфейса, который:
- можно редактировать как любой макет;
- разметить по автолэйауту;
- разложить на компоненты;
- подключить к существующей дизайн‑системе.
Плюсы подхода «код → Make → Design» для дизайнеров
Для практикующего UX/UI‑дизайнера и продуктовой команды у этого подхода есть несколько очевидных выгод:
- Ускоренный старт проекта. Вместо пустого холста вы сразу работаете с наброском интерфейса, который уже «собран» из реальных экранов и состояний.
- Быстрая проверка идей. ИИ‑код и Make позволяют недорого и быстро нагенерировать разные варианты структуры и контента, а затем выбрать лучшие и перенести в дизайн.
- Мост между dev‑и design‑миром. Если разработчики уже экспериментируют с AI‑кодом, у дизайнеров появляется способ «подхватить» эти наработки в Figma, а не смотреть на них только в виде репозиториев.
- Меньше рутины при редизайнах. Для проектов, где много типовых экранов (каталоги, профили, списки, формы), связка Make + AI‑код даёт массу «черновиков», которые проще довести до ума, чем собрать с нуля.
Ограничения и подводные камни
Важно понимать, что текущая реализация — не волшебная кнопка, а рабочий компромисс:
- Нет живой связи между Make и Design. Скопированные слои — это статичный «снимок». Если вы что‑то меняете в Make, макет в Design сам собой не обновится.
- Не всё автоматически превращается в «идеальный» автолэйаут. Слои копируются в том виде, в каком Figma может их интерпретировать, но логика компонентов и constraints не всегда будет совпадать с вашими стандартами.
- Далеко не любой AI‑код подходит. Для адекватного результата код должен соответствовать хотя бы базовым практикам верстки (структура, семантика, удобные классы). Слишком хаотичный код усложнит и Make, и финальную доработку.
- Риск засорить дизайн‑систему. Если бездумно тянуть всё, что сгенерировал ИИ, в библиотеку компонентов, получится «свалка», а не система. Нужно чётко разделять «черновик» и «продуктовый компонент».
Как встроить это в реальный workflow дизайнера
Подход «AI‑код → Figma Make → Figma Design» особенно хорошо работает в таких сценариях:
- Discovery и быстрые эксперименты.
- На этапе поиска UX‑решений можно:
- описать гипотезу промптом;
- сгенерировать несколько вариаций интерфейса в Make;
- выбрать 1–2 и перенести их в Design для глубокого UX‑разбора и юзабилити‑тестов.
- Черновой каркас для лендингов и маркетинговых страниц.
- Когда важны скорость и количество опций, AI‑код помогает выкинуть множество версий структуры страницы, а Make — превратить их в визуальные прототипы. Дальше вы вычищаете выбранный вариант в Design.
- Быстрый импорт паттернов из мира кода.
- Если разработчики уже экспериментируют с новыми UI‑паттернами (например, сложные таблицы, фильтры, конфигураторы), дизайнер может запросить AI‑код/сниппеты, собрать на них прототип в Make и потом дотюнить макет в Design.
- Обучение и внутренние гайды.
- Команды могут использовать Make и AI‑код как «песочницу» для новых дизайнеров: новичок собирает прототип по промптам, затем старший дизайнер показывает, как грамотно разложить этот хаос на компоненты и стили в Figma Design.
Практические советы по работе с AI‑кодом и Figma
Чтобы извлечь максимум пользы из современного стека «ИИ + Figma», полезно придерживаться нескольких практик:
- Сначала структура, потом визуал.
- В промптах для ИИ и в Make акцентируйтесь на информационной архитектуре и UX‑потоке, а не на цветовом градиенте и тенях. Красоту проще довести в Design.
- Описывайте ограничения дизайн‑системы.
- Если у вас есть своя сетка, отступы, базовые компоненты — упоминайте это в промптах и документации команды, чтобы AI‑код был ближе к реальности.
- Организуйте импорт.
- После копирования слоёв в Design:
- разложите элементы по слоям и страницам;
- замените «одноразовые» элементы на компоненты библиотеки;
- проверьте типографику, цвета и авто‑лэйауты.
- Фиксируйте best practices.
- Каждый удачный пример «код → Make → Design» оформляйте в виде маленького кейса внутри команды: что сработало, какие настройки помогли, какие промпты дали хороший результат.
Что это значит для будущего профессии дизайнера
Появление таких мостов, как Figma Make и копирование предпросмотра в дизайн‑слои, говорит о важном сдвиге: от противопоставления кода и дизайна к их тесной интеграции, ускоренной ИИ. Дизайнер всё меньше выступает «рисовальщиком пикселей», и всё больше — архитектором решений, который умеет:
- ставить задачи ИИ;
- отбирать годные результаты;
- превращать AI‑черновики в аккуратные, поддерживаемые дизайн‑системы.
Figma здесь играет роль не просто редактора, а центра тяжести всего интерфейсного процесса — от промпта и сгенерированного кода до финального макета, компонента и продакшен‑интерфейса.
Для практиков это означает одно: чем раньше вы начнёте экспериментировать с такими связками, тем легче будет адаптироваться к следующей волне инструментов — где границы между кодом, дизайном и продуктовой логикой окончательно размоются.
Больше об инструментах Figma и AI — в разделе Инструменты на dizko.ru. Все статьи журнала — в разделе Журнал.
