Урок 2: Figma Make — прототип из промпта

Чему вы научитесь

• Проектировать интерактивные прототипы в Figma Make по главному правилу 2026 года: сначала маршрут и переходы состояний, затем визуальные ограничения
• Настраивать Make Kits, чтобы повторные генерации строго соблюдали компоненты и правила вашей команды
• Переносить сгенерированные экраны обратно на холст через Copy Design
• Использовать Figma MCP Server (get_variable_defs, search_design_system, ресурсы Make и обратную запись в черновики) для бесшовной работы с Claude Code, Cursor и VS Code

Figma Make: не статичная картинка, а живой сценарий

Figma Make — среда генеративного прототипирования внутри Figma, работающая на базе модели Claude Opus 4.6 от Anthropic. В отличие от First Draft из первого урока, который собирает статичные векторные фреймы на холсте, Make генерирует рабочий интерактивный интерфейс с настоящим кодом под капотом: кликабельными табами, фильтрацией списков, состояниями форм и переходами между экранами.

Инструмент доступен на всех тарифах, включая бесплатный Starter (в черновиках), и расходует кредиты из общего пула аккаунта.

Роль Figma Make в рабочем процессе (осень 2026)
├── First Draft (Figma Design): статичный макет из текста на холсте
├── Figma Make (Claude Opus 4.6): живой интерактивный прототип с кодом
│   ├── Проверка пользовательских маршрутов и состояний (пустой список, ошибка, возврат)
│   ├── Make Kits — привязка к кодовым пакетам, библиотекам и правилам команды
│   ├── Copy Design — конвертация экрана из Make в обычные слои на холсте
│   └── Figma MCP Server — передача ресурсов Make и переменных напрямую в IDE
└── Figma Sites: публикация готового макета в веб (отдельный продукт без AI-генерации)

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Главное правило промптинга в Figma Make: сначала маршрут и стейт, потом визуал

По официальному руководству создания файлов в Figma Make и разбору осенних воркфлоу 2026 года (modao.cc/ad/blog/figma-ai-agent-design-code.html), типичная ошибка дизайнеров — начинать промпт с перечисления шрифтов, скруглений и HEX-кодов. В результате модель рисует красивую декорацию, в которой кнопки не работают, а переходы сбрасывают введённые данные.

В Figma Make порядок инструкций определяет качество кода прототипа:

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

Скетчи вайрфреймов — отправная точка для Figma Make (Nano Banana 2)

Пошаговый цикл проверки сценария в Make

1. Откройте Make и прикрепите структурный фрейм: в нижней панели Figma нажмите иконку Make (или Ctrl/Cmd + / → Make) и приложите существующий фрейм с базовыми компонентами вместо растрового скриншота.
2. Отправьте двухчастный промпт: сначала опишите переходы между экранами и реакцию на пустые состояния, вторым абзацем — привязку к визуальным стилям вложения.
3. Протестируйте ровно одну сквозную ветку: после первой генерации не пытайтесь кликать всё подряд — пройдите целевой маршрут от первого выбора до возврата назад.
4. Исправьте поломки состояния конкретной командой: если при возврате на предыдущий шаг форма очистилась или счётчик избранного обнулился, укажите модели конкретную ошибку стейта, а не просите «улучшить опыт».

Make Kits: как остановить расползание стиля при повторных генерациях

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

Просто написать в промпте «используй нашу библиотеку компонентов» недостаточно. Для жёсткого контроля в 2026 году используются Make Kits — наборы, которые связывают воедино кодовые пакеты (code packages), опубликованные библиотеки стилей Figma и текстовые правила использования компонентов.

Как внедрить Make Kit в команде:

1. Пропишите поведенческие правила, а не только палитру. Одной картинки с брендбуком мало. Зафиксируйте в правилах Make Kit конкретные условия: «Для главного действия на экране всегда используй компонент Button/Primary; переводи кнопку в состояние disabled, пока обязательные поля формы пусты или содержат ошибку валидации; вторичные действия оформляй через Button/Ghost».
2. Проведите стресс-тест на сложном экране. Прежде чем открывать Make Kit всей команде, сгенерируйте на нём тестовую страницу, где одновременно есть форма ввода, состояние ошибки валидации, пустой список и длинные русские заголовки в три строки.
3. Откалибруйте правила по результатам теста. Если модель нарушила отступы в карточке ошибки, уточните правило в ките и перегенерируйте экран. Публикуйте кит на команду только тогда, когда повторные генерации однотипных экранов перестают давать визуальный разнобой (перед запуском сверьте доступность функции для вашего тарифа и типа рабочего места в документации Figma).

Copy Design: возврат из Make на основной холст

Когда интерактивный сценарий проверен и утверждён, его часто нужно вернуть в обычный дизайн-файл для детальной полировки сетки или сборки общей карты экранов. Для этого служит кнопка Copy Design на верхней панели превью в Make:

1. Нажмите Copy Design рядом с нужным состоянием экрана в интерфейсе Make.
2. Переключитесь на стандартный холст Figma Design и нажмите Ctrl/Cmd + V.
3. Экран вставится как дерево редактируемых слоёв с настроенным Auto Layout и привязанными компонентами из вашей библиотеки.

Figma MCP Server: двусторонний мост между холстом, Make и кодом

По материалам Figma Workflow Lab: Moving Between Design and Code With Agents (figma.com/blog/workflow-lab-moving-between-design-and-code-with-agents/) и официальной документации Make resources and MCP (help.figma.com/hc/en-us/articles/42495172049303-Make-resources-and-MCP), передача макета в разработку больше не улица с односторонним движением.

Через Figma MCP Server ИИ-агенты в Claude Code, Cursor, VS Code и Codex напрямую обращаются к вашим файлам Figma Design и Figma Make.

Два варианта подключения сервера (2026)

• Удалённый сервер (Hosted by Figma — рекомендуется): размещён на стороне Figma, не требует установки десктопного приложения и подключается по URL в настройках MCP вашего клиента.
• Локальный десктопный сервер (Desktop server): работает через запущенное приложение Figma Desktop и требует платного места (Dev или Full seat).

Какие инструменты и ресурсы отдаёт Figma MCP

Когда разработчик или дизайнер подключает Figma MCP в Claude Code или Cursor, агенту становятся доступны специализированные инструменты и MCP-ресурсы:

• get_variable_defs и search_design_system: агент считывает точные определения переменных (цвета, отступы, шрифтовые токены) и ищет существующие компоненты в вашей дизайн-системе, вместо того чтобы угадывать значения по скриншоту.
• Ресурсы Figma Make (Make MCP resources): сервер передаёт файлы вашего Make-проекта как стандартные MCP-ресурсы. В интерфейсе Figma Make вы копируете ссылку на ресурс (отдельный файл или весь проект) и передаёте её агенту в IDE. Агент забирает готовый каркас прототипа, заменяет временные элементы на боевые кодовые компоненты вашего репозитория (Code Connect) и подключает реальные данные из API, сохраняя задуманную в Make логику переходов.
• use_figma, generate_figma_design, generate_diagram: инструменты для обратной синхронизации. Если инженер или дизайнер поменял интерфейс прямо в коде (или провёл рефакторинг в Make, подключив кодовую базу), агент отправляет обновлённый UI обратно в Figma в виде редактируемых слоёв или строит схему пользовательского пути в FigJam, чтобы вся команда провела ревью до слияния Pull Request.

Пошаговый сценарий сборки экрана через Claude Code + Figma MCP

1. Подключите удалённый Figma MCP Server в настройках Claude Code или Cursor по инструкции из документации разработчика Figma.
2. Скопируйте ссылку на целевой фрейм в Figma Design или ссылку на ресурс прототипа в Figma Make.
3. Дайте агенту команду с опорой на токены: «Собери этот фрейм как страницу в моём проекте. Используй мои переменные Figma (через get_variable_defs) для цветов, отступов и типографики и подключи существующие кодовые компоненты вместо создания дублей».
4. Проведите парную проверку на узких экранах: откройте собранную страницу в браузере на мобильной ширине и отдельно на 320 px, поставив рядом исходный фрейм Figma.
5. Дожмите три частые точки поломки: попросите агента исправить перенос длинных строк (wrapping), минимальный размер области нажатия кнопок (tap size ≥ 44px) и видимую обводку клавиатурного фокуса (focus states).

Главное из урока