ИИ уже научился писать код интерфейсов — от простых лендингов до сложных дашбордов. Но до недавнего времени между «кодом от ИИ» и привычным рабочим процессом в 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. Все статьи журнала — в разделе Журнал.