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

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

• Создавать интерактивные прототипы через Figma Make по текстовому описанию
• Подключать библиотеки компонентов для согласованного дизайна
• Использовать Copy Design для переноса Make-результатов на canvas
• Настроить MCP для двустороннего обмена между Figma и IDE

Figma Make: не макет, а прототип

Figma Make — отдельный инструмент внутри Figma, работающий на Claude Opus 4.6 от Anthropic. Принципиальное отличие от First Draft (урок 1): Make создаёт не статичные макеты, а интерактивные прототипы с рабочими кнопками, переходами между экранами и компонентами из ваших библиотек.

Make доступен на всех планах Figma, включая бесплатный Starter. Кредиты тратятся из общего пула.

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

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

Пошаговое создание прототипа

Шаг 1: Запуск Make

1. Откройте любой файл в Figma
2. В нижней панели нажмите иконку Make (или Ctrl/Cmd+/ > «Make»)
3. Справа появится чат-панель — это интерфейс Make

Шаг 2: Опишите интерфейс

Введите описание на естественном языке. Claude понимает контекст, стиль и структуру.

Простой промпт:
"Экран авторизации: email, пароль, кнопка Войти, ссылка Забыли пароль"

Детальный промпт:
"Дашборд аналитики: график выручки за 12 месяцев (линейный),
3 KPI-карточки (доход, пользователи, конверсия) с иконками,
боковое меню с навигацией, тёмная тема в стиле Linear"

Промпт с библиотекой:
"Лендинг AI-стартапа, используй компоненты Material Design 3:
hero с градиентом, 3 фичи-карточки, секция тарифов, футер"

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

Шаг 3: Итерируйте в чате

После генерации дорабатывайте результат диалогом. Make сохраняет контекст беседы:

• «Увеличь кнопку и добавь иконку стрелки»
• «Замени цвета на фиолетовый акцент (#8B5CF6)»
• «Добавь второй экран — корзина с товарами, и переход от кнопки Купить»

Каждая итерация обновляет прототип. Все элементы остаются редактируемыми.

Copy Design: из Make на canvas

Функция Copy Design решает главную проблему: Make генерирует прототип в отдельном пространстве, а вам нужны элементы на основном canvas для доработки.

1. В Make-панели нажмите Copy Design рядом с готовым прототипом
2. Перейдите на canvas и вставьте (Ctrl/Cmd+V)
3. Все элементы появятся как обычные Figma-слои — полностью редактируемые

Это мост между AI-генерацией и ручной работой. Make создаёт стартовую точку, вы доводите до идеала стандартными инструментами Figma.

Подключение библиотек компонентов

Главное преимущество Make перед конкурентами — он использует ваши библиотеки. Вместо генерации кнопки с нуля, Make возьмёт Button из вашей дизайн-системы.

Как подключить:

1. Убедитесь, что библиотека опубликована как Figma Library
2. В настройках Make укажите библиотеки для использования
3. В промпте можно уточнить: «Используй компоненты из Material Design 3»

Make сохраняет все свойства компонентов: variants, auto-layout, constraints. Сгенерированный прототип сразу соответствует вашей дизайн-системе. Это критически важно для продуктовых команд, где консистентность UI — не роскошь, а требование.

MCP-интеграция: двусторонний мост

MCP (Model Context Protocol) — протокол, через который AI-агенты в IDE читают и пишут в Figma. С февраля 2026 это не просто «чтение макетов», а двусторонний обмен: дизайн > код и код > дизайн.

Направление 1: Figma > код (Design to Code)

Разработчик в IDE получает макет и генерирует по нему код:

1. В Figma скопируйте ссылку на фрейм (правый клик > Copy link)
2. В Cursor, VS Code или Claude Code вставьте ссылку в чат
3. AI прочитает структуру, стили, тексты и сгенерирует React/Tailwind-код

Направление 2: Код > Figma (Code to Canvas)

Разработчик отправляет работающий UI обратно в Figma:

1. В Claude Code установите Figma MCP Server
2. Откройте в браузере страницу (production, staging или localhost)
3. Введите в Claude Code: «Send this to Figma»
4. Работающий UI превратится в редактируемые Figma-слои

Figma Make vs Figma Sites

Два продукта часто путают. Разница принципиальная:

Figma Make создаёт прототипы — макеты с интерактивностью для тестирования и презентации. Результат живёт на canvas Figma.

Figma Sites публикует сайты — превращает готовый макет в живой сайт с URL. AI-генерации нет: вы берёте готовый дизайн и публикуете.

Рабочий процесс: Make для создания прототипа > ручная доработка на canvas > Sites для публикации. Или Make > Copy Design > экспорт через MCP в код.

Практическое задание

Создайте прототип мобильного приложения для заказа еды:

1. Запустите Make и введите: «Главный экран приложения доставки: строка поиска, горизонтальные категории с иконками (Пицца, Суши, Бургеры, Десерты), вертикальный список ресторанов с фото, рейтингом и временем доставки, нижняя навигация»
2. Итерируйте: «Добавь экран ресторана с горизонтальным меню категорий блюд, карточками блюд и кнопкой В корзину»
3. Добавьте переход: «Нажатие на карточку ресторана открывает экран его меню»
4. Copy Design: перенесите результат на canvas и доработайте цвета вручную
5. Если есть MCP: скопируйте ссылку на фрейм и вставьте в любой AI-инструмент

Засеките время. Сколько минут ушло по сравнению с созданием такого прототипа вручную?