Figma AI работает только настолько хорошо, насколько хороши инструкции, которые вы ей даете. Расплывчатые промпты создают общие макеты, которые приходится переделывать с нуля. Конкретные промпты — с типом экрана, секциями, компонентами, размером фрейма и отступами — регулярно производят 70–85% готового к продакшену результата за один проход. Эти 15 шаблонов структурированы для стека Figma AI 2026: Design Agent, Figma Make, Skills и бесплатные функции (auto layout, переименование слоев, замена контента), которые не тратят кредиты.
Скопируйте любой шаблон, замените заключенные в скобки заполнители на ваш продукт и пропустите через бесплатный Prompt Optimizer, если хотите более строгие ограничения. Для оптимизации в один клик внутри ChatGPT, Claude и Gemini во время создания инструкций для агента, TresPrompt добавляет структуру в стиле ICCSSE в вашу боковую панель.
Ключевой вывод
Каждый сильный промпт для Figma AI называет четыре вещи: какой экран вы создаете, какие опубликованные компоненты использовать, размер фрейма и правила отступов. Добавьте негативные ограничения («не используй неименованные фреймы», «никакого lorem ipsum») и агент перестанет угадывать. Skills кодируют эти паттерны, чтобы вам не приходилось перепечатывать их каждую сессию.
Шаблоны Design Agent (экраны на холсте)
1
Мобильная страница настроек
Создай мобильную страницу настроек (390×844) с:
1. Аккаунт — аватар, имя, email, кнопки редактирования
2. Уведомления — переключатели для email, push, SMS
3. Внешний вид — переключатель темного режима, выбор размера шрифта
4. Безопасность — смена пароля, переключатель 2FA
5. Подвал — деструктивная кнопка выхода, текст версии приложения
Используй только опубликованные компоненты. Auto layout: 16px между элементами, 32px между секциями. Компонент Section Header для заголовков групп.
2
Обзор дашборда (десктоп)
Создай десктопный дашборд аналитики (1440×900) с:
- Верхняя навигация: логотип, поиск, меню пользователя
- Левая боковая панель: 5 элементов навигации, активное состояние на "Обзор"
- Основная область: 4 KPI карточки в ряд, линейный график ниже, таблица последней активности (5 строк)
Используй переменные дизайн-системы для цвета и отступов. Компонент Card для KPI. Компонент Table для активности. Не используй заполнители данных графика типа "Серия 1."
3
Поток онбординга (3 фрейма)
Создай 3 мобильных экрана онбординга (390×844), слева направо:
1. Добро пожаловать — заголовок, подзаголовок, основная CTA "Начать"
2. Разрешения — список уведомлений + геолокация с переключателями
3. Успех — область иллюстрации с галочкой, CTA "Всё готово"
Используй компоненты Primary Button и Secondary Button. Индикатор прогресса показывающий шаг 1/3, 2/3, 3/3. Одинаковые 24px горизонтальные отступы на всех фреймах.
4
Пустое состояние + состояние ошибки
Создай два мобильных фрейма (390×844):
Фрейм A — Пустые результаты поиска: область иконки, заголовок "Ничего не найдено", основной текст, вторичная кнопка "Очистить фильтры"
Фрейм B — Ошибка: иконка предупреждения, "Что-то пошло не так", основная кнопка "Попробовать снова", третичная "Связаться с поддержкой"
Используй опубликованные компоненты Empty State и Alert если доступны. Контент по центру, максимальная ширина 280px для текстового блока.
5
Доступные настройки (агент + a11y)
Создай мобильную страницу настроек (390×844) с требованиями доступности:
- Интерактивные элементы минимум 44×44px области касания
- Контрастность текста минимум 4.5:1 (используй цвета текста дизайн-системы)
- Иерархия заголовков H1 → H2, без пропущенных уровней
- Переключатели включают видимые текстовые метки (не только иконки)
- Состояния ошибки используют цвет И текст (не только цвет)
Используй опубликованные компоненты. Auto layout 16px / 32px отступы.
📬 Получаете пользу от этого?
Один практический инсайт по ИИ в неделю. Плюс бесплатный пакет промптов при подписке.
Подписаться бесплатно →
Шаблоны Figma Make (прототип / код)
6
Маркетинговый лендинг (Make)
Создай одностраничный маркетинговый сайт из этого Figma фрейма:
- Герой: заголовок, подзаголовок, захват email + CTA
- 3 колонки функций с иконками
- Ряд логотипов социального доказательства
- Подвал со ссылками
Соответствуй отступам и цветам из выбранного фрейма. Адаптивный под мобильные. Никаких внешних библиотек если не указано в заметках фрейма.
7
Интерактивный прототип (Make)
Создай кликабельный прототип из фреймов [список имен фреймов]:
- Клик по "Регистрация" переходит к фрейму формы регистрации
- Отправка показывает состояние уведомления об успехе
- "Назад" возвращает к предыдущему экрану
Используй компоненты из файла. Сохрани состояния наведения на основных кнопках. Не добавляй новые экраны, которых нет в файле дизайна.
Шаблоны Skills (переиспользуемые инструкции агента)
Сохрани их как markdown файлы Skills, чтобы агент каждый раз следовал командным соглашениям.
8
Skill: /settings-page
При создании экранов настроек:
- Всегда используй паттерн Section Header + сгруппированный список
- Включай подвал с версией приложения (стиль caption) и деструктивным выходом
- Мобильный по умолчанию 390×844 если пользователь не указывает десктоп
- Используй компонент Toggle для булевых настроек, никогда не кастомные чекбоксы
- Отступы: 16px внутри групп, 32px между группами, 24px отступы экрана
9
Skill: /data-table
При создании таблиц:
- Используй компоненты Table/Header и Table/Row
- Включай иконку сортировки в колонку только если пользователь просит
- Высота строки минимум 48px для касания
- Обрезай длинный текст многоточием, никогда не переноси больше 2 строк в ячейках
- Пустое состояние под таблицей если ноль строк
Бесплатные функции (ноль кредитов)
10
Замена контента (пакетная)
Замени весь lorem ipsum в выбранном фрейме на реалистичный [B2B SaaS / электронная коммерция / здравоохранение] текст. Имена: разнообразные, правдоподобные. Адреса: формат США. Названия продуктов: вымышленные но профессиональные. Сохрани количество символов похожим на заполнители чтобы макет не сломался.
11
Переименование слоев (подготовка к передаче)
Переименуй все слои на этой странице используя паттерн: [Секция]/[Компонент]/[Состояние]
Пример: Settings/NotificationRow/Default
Не переименовывай заблокированные фоновые фреймы. Пропускай скрытые слои.
Промпты MCP + передачи кода (Claude Code / Cursor)
12
React из Figma фрейма
Прочитай выбранный Figma фрейм через MCP. Сгенерируй React компонент используя [Tailwind / нашу Shadcn библиотеку]:
- Соответствуй отступам и цветам из дизайн-токенов в файле
- Используй семантический HTML (nav, main, section)
- Включай адаптивные точки останова на 768px и 1024px
- Экспортируй как SettingsPage.tsx с типизированными props для пользовательских данных
Не хардкодь hex значения — используй имена токенов из Figma переменных.
Шаблоны исследования и сравнения
13
Три направления макета
Сгенерируй 3 разных подхода к макету для [тип экрана] на десктопе 1440×900:
A — боковая навигация
B — верхняя табовая навигация
C — хаб на основе карточек
Одинаковый контент во всех трех. Используй опубликованные компоненты. Размести фреймы рядом с промежутком 80px. Подпиши каждый фрейм "Направление A/B/C" мелким текстом caption.
14
Промпт аудита дизайн-системы
Просмотри выбранную страницу и перечисли:
- Компоненты не из опубликованной библиотеки (отметь как "отсоединенные")
- Цвета не использующие переменные
- Текст не использующий текстовые стили
- Промежутки Auto layout которые не являются 4/8/16/24/32
Выведи как чек-лист в заметках фрейма. Не исправляй автоматически — только отчет.
15
Проход доработки (второй промпт)
На сгенерированном фрейме примени только эти исправления:
1. Увеличь вертикальные отступы между секциями до 32px
2. Замени основную кнопку на вариант Button/Primary/Large
3. Добавь вспомогательный текст под полем email: "Мы никогда не поделимся вашим email"
4. Выровняй все иконки до 24×24 в строках списка
Не реструктурируй макет. Не добавляй новые секции.
Как связывать шаблоны в цепочки
Рабочий процесс продакшена: Шаблон 13 (исследование) → выбери направление → Шаблон 1 или 2 (полный экран) → Шаблон 15 (доработка) → Шаблон 11 (переименование) → Шаблон 12 (MCP в код). Каждый шаг использует сфокусированный промпт вместо одной гигантской инструкции, которая путает агента.
Для полной экосистемы Figma AI (Agent, Make, MCP, Skills, Sites), смотри наш полный гид 2026. Для пошаговой настройки агента, смотри как использовать Design Agent. Для планирования бюджета кредитов, смотри объяснение кредитов Figma AI.
Часто задаваемые вопросы
Работают ли эти шаблоны на бесплатном плане Figma?
Шаблоны 10–11 (замена контента, переименование) работают на бесплатных планах. Design Agent и Make требуют платные планы и доступ к бете. MCP работает с любым планом, который может включить Dev Mode / MCP для вашего места.
Должен ли я вставлять весь шаблон или сократить его?
Начни с полного шаблона. Как только увидишь, какие строки агент игнорирует, сокращай. Короткие промпты работают только после того, как ты поймешь, какие ограничения твоей дизайн-системе действительно нужны.
Могу ли я использовать один и тот же промпт для Make и Design Agent?
Нет — Make ожидает язык сборки/прототипирования и по-разному потребляет кредиты. Используй шаблоны Design Agent для слоев холста и шаблоны Make для интерактивного вывода. Их смешивание производит запутанные результаты.
Как сохранить промпты как Skills?
Скопируй шаблоны 8–9 в markdown файлы Skills в библиотеке Skills твоей команды. Вызывай с /skill-name в панели агента. Обновляй Skills когда меняются имена твоих компонентов — смотри наш гид по Skills.
Раскрытие информации: Некоторые ссылки в этой статье являются партнерскими ссылками. Мы рекомендуем только инструменты, которые лично тестировали и регулярно используем. Смотри нашу полную политику раскрытия информации.