Промты для Figma, которые сокращают дизайн-марафон: 12 сценариев от вайрфрейма до дизайн-системы
Дизайн-марафон — это когда нужно за короткий срок выдать концепт, прототип и передать в разработку. Знакомо? Figma уже давно не просто редактор, а платформа с AI-плагинами и встроенными ассистентами. Но чтобы они работали на вас, нужны правильные промты. В этой подборке — 12 проверенных сценариев, которые я использую в реальных проектах. Каждый промт — с примером и пояснением, как адаптировать под свою задачу.
Важно: все промты предполагают, что вы работаете в Figma с плагинами, поддерживающими текстовые команды (например, «Figma AI» или сторонние решения типа «Magician», «Genius»). Если плагин не понимает сложный запрос, разбейте его на части. И помните: AI не заменяет дизайнера, а ускоряет рутину.
1. Генерация вайрфреймов по текстовому описанию
Проблема: Нужно быстро набросать структуру лендинга, но нет времени рисовать каждый блок.
Промт:
Создай вайрфрейм для лендинга онлайн-курса по Python. Структура: шапка с логотипом и меню, герой-секция с заголовком и CTA-кнопкой, блок с преимуществами (3 карточки), секция с программой курса (список модулей), блок с отзывами (2 колонки), футер с контактами и соцсетями. Используй серые плейсхолдеры, стандартные шрифты. Размер фрейма: 1440x3000.
Результат: Плагин сгенерирует фрейм с прямоугольниками и текстовыми заглушками. Вы можете двигать блоки, менять размеры. Экономия времени — до 30 минут на каждый вайрфрейм.
2. Автолейаут для сложных компонентов
Проблема: Руками настраивать Auto Layout для карточки товара с разными состояниями — долго.
Промт:
Примени Auto Layout к выделенному фрейму. Настрой: вертикальное направление, отступы 16px, расстояние между элементами 8px. Внутри: изображение (соотношение 1:1), заголовок (стиль H3), описание (Body), кнопка (Primary). Установи Hug contents для высоты.
Результат: Компонент становится адаптивным, легко меняет размер при изменении контента. Работает в Figma AI и плагине «Auto Layout».
3. Создание компонентов с вариантами
Проблема: Нужна кнопка в 4 состояниях (default, hover, pressed, disabled) — вручную создавать варианты утомительно.
Промт:
Создай компонент кнопки с вариантами: Default (синий фон, белый текст), Hover (темно-синий), Pressed (ещё темнее), Disabled (серый фон, серый текст). Используй текстовый стиль Button, радиус 8px, паддинги 12px 24px. Собери в Component Set.
Результат: Готовый набор вариантов, который можно переиспользовать. Время — 2 минуты вместо 15.
4. Генерация текстов для интерфейса (UX-копирайтинг)
Проблема: Заголовки, подписи к полям, тексты ошибок — всё это нужно придумывать, а дизайнер не копирайтер.
Промт:
Напиши текст для экрана регистрации в мобильном приложении для фитнеса. Нужны: заголовок (мотивирующий), подзаголовок (поясняющий), плейсхолдеры для email и пароля, текст кнопки, ссылка на вход, сообщение об ошибке при неверном пароле. Тон: дружелюбный, но профессиональный. Язык: русский.
Результат: Плагин вставит тексты прямо в макет. Можно сразу оценить, как они смотрятся.
5. Документация для дизайн-системы
Проблема: Нужно описать компоненты, их пропсы и правила использования — обычно это отнимает часы.
Промт:
Сгенерируй документацию для компонента «Карточка товара». Опиши: назначение, анатомию (изображение, название, цена, кнопка), варианты (горизонтальная/вертикальная), состояния (обычное, загруженное, ошибка), рекомендации по использованию, ограничения. Формат: Markdown.
Результат: Готовый текст, который можно вставить в Figma-страницу с документацией или экспортировать в Notion.
6. Проверка контрастности и доступности
Проблема: Дизайн должен соответствовать WCAG, но проверять каждый цвет вручную — муторно.
Промт:
Проверь контрастность текста и фона для всех текстовых слоёв на выделенном фрейме. Если коэффициент ниже 4.5:1 для обычного текста или 3:1 для крупного, предложи альтернативные цвета. Выведи отчёт в виде таблицы: слой, текущий контраст, рекомендация.
Результат: Таблица с проблемными местами и suggestions. Можно быстро исправить.
7. Адаптация макета под мобильные устройства
Проблема: Есть десктопный дизайн, нужно сделать мобильную версию.
Промт:
Адаптируй выделенный фрейм (ширина 1440px) под мобильный экран 375px. Перестрой блоки в одну колонку, уменьши отступы до 16px, шрифты уменьши на 2 пункта, кнопки сделай на всю ширину. Сохрани иерархию.
Результат: Новый фрейм с адаптированным дизайном. Можно доработать вручную.
8. Генерация иконок в едином стиле
Проблема: Нужен набор иконок для панели навигации, но покупать или искать — долго.
Промт:
Создай 5 иконок в стиле outline (толщина линии 2px, скругленные концы): дом, поиск, профиль, уведомления, настройки. Размер 24x24. Цвет #333333. Размести на фрейме с отступами 8px.
Результат: Векторные иконки, готовые к использованию. Если плагин не умеет рисовать, он предложит SVG.
9. Создание сетки и направляющих
Проблема: Нужно быстро настроить колоночную сетку для нового проекта.
Промт:
Настрой layout grid для фрейма 1440px: 12 колонок, ширина колонки 80px, гаттер 24px, отступы по 80px. Цвет направляющих: красный, прозрачность 10%.
Результат: Сетка применена, можно верстать.
10. Рефакторинг слоёв и групп
Проблема: После импорта из Sketch или Figma-файла от подрядчика царит хаос в именах слоёв.
Промт:
Переименуй все слои и группы на выделенном фрейме по схеме: [тип]_[название]_[вариант]. Например: btn_primary_default, card_product_horizontal. Убери лишние группы, объедини однотипные элементы.
Результат: Чистая структура, удобная для работы и передачи разработчикам.
11. Генерация цветовой палитры из бренд-цвета
Проблема: Есть основной цвет, нужно построить гармоничную палитру.
Промт:
На основе цвета #3B82F6 сгенерируй палитру: primary (базовый), primary-dark (на 20% темнее), primary-light (на 40% светлее), secondary (комплементарный), neutral (5 оттенков серого). Выведи в виде свотчей с HEX-кодами.
Результат: Готовая палитра, можно сразу применять в стилях.
12. Создание прототипа с переходами
Проблема: Нужно быстро связать экраны для демонстрации клиенту.
Промт:
Создай прототип из трёх экранов: главная, список товаров, карточка товара. Свяжи: клик по кнопке «Каталог» на главной → список; клик по карточке в списке → детальная; кнопка «Назад» на детальной → список. Анимация: Smart Animate, длительность 300ms.
Результат: Интерактивный прототип, готовый к презентации.
Как адаптировать промты под свои задачи
Все промты выше — шаблоны. Меняйте параметры: цвета, размеры, тексты. Чем конкретнее запрос, тем лучше результат. Если плагин не понимает с первого раза, упростите или разбейте на шаги. И всегда проверяйте сгенерированное — AI может ошибаться в деталях.
Инструменты, которые поддерживают такие промты
- Figma AI (встроенный, в бете на 2026) — понимает自然 язык, но не все функции доступны.
- Magician — плагин для генерации текстов и иконок.
- Genius — умеет создавать компоненты и автолейауты.
- Autoflow — для быстрого создания прототипов.
Проверяйте обновления: AI в Figma развивается быстро.
Заключение
Эти 12 промтов — не догма, а отправная точка. Комбинируйте их, экспериментируйте. Главное — перестать делать рутинную работу вручную и сосредоточиться на творчестве. Попробуйте внедрить хотя бы 2-3 промта в свой процесс — и увидите, как дизайн-марафон превращается в спринт. Делитесь своими находками в комментариях!
Комментарии