Введение
Современный UI/UX дизайнер работает не только в Figma, но и с AI-помощниками. Правильно составленный промт (запрос к нейросети) может сэкономить часы работы: от генерации иконок до описания логики компонентов. В этой подборке — 12 готовых промтов, которые помогут ускорить создание макетов, прототипов и дизайн-систем. Каждый промт можно скопировать и сразу применить.
Почему это важно? Figma — мощный инструмент, но AI берёт на себя рутину: написание CSS-стилей для Auto Layout, генерацию состояний компонентов, подбор цветовых схем. По данным опроса UX Tools 2025, 68% дизайнеров уже используют AI для автоматизации повторяющихся задач (источник: uxtools.co). Мы подготовили промты, проверенные на ChatGPT, Claude и Gemini.
1. Генерация компонента кнопки с Auto Layout
Описание: Создаёт описание для компонента кнопки в Figma с использованием Auto Layout, включая все состояния (default, hover, active, disabled) и отступы.
Промт:
Спроектируй компонент кнопки в Figma для дизайн-системы. Используй Auto Layout: внутренний отступ 16px по горизонтали, 12px по вертикали. Скругление 8px. Цвет фона — #007AFF, текст — #FFFFFF. Шрифт Inter, 16px, medium. Опиши, как настроить состояния: hover (фон #0056CC), active (фон #003D99), disabled (прозрачность 40%). Напиши CSS-стили для каждого состояния.
Пример использования: Скопируйте текст и отправьте ChatGPT. Ответ даст готовые значения для Auto Layout и CSS-классы. Перенесите отступы и цвета в Figma вручную или используйте плагин для импорта стилей.
2. Адаптивная карточка товара
Описание: Промт для генерации структуры карточки товара с изображением, заголовком, ценой и кнопкой — всё на Auto Layout с резиновой шириной.
Промт:
Создай карточку товара в Figma. Используй Auto Layout: вертикальная укладка, внутренний отступ 16px, ширина Fill. Изображение сверху (16:9), под ним заголовок (H3, 18px, medium), цена (16px, regular), рейтинг (звёзды), кнопка «В корзину». Все элементы должны растягиваться при изменении ширины карточки. Напиши конфигурацию Auto Layout и цвета для светлой темы.
Пример использования: ChatGPT вернёт пошаговую инструкцию с размерами и настройками Constraints. Примените к реальному фрейму в Figma.
3. Навигационная панель с брейкпоинтами
Описание: Помогает создать адаптивную навигацию для десктопа, планшета и мобильных — с гамбургер-меню.
Промт:
Разработай навигационную панель для сайта. На десктопе — логотип слева, ссылки по центру, кнопка справа. На планшете (768px) — ссылки скрываются в иконку меню. На мобильных (375px) — все элементы вертикально. Используй Figma Auto Layout, Constraints и компоненты. Опиши каждый вариант с указанием ширины контейнеров.
Пример использования: Полученный ответ можно использовать как техническое задание для разработчика или как схему для создания компонентов-вариантов в Figma.
4. Цветовая палитра на основе бренда
Описание: Промт для генерации полной палитры (Primary, Secondary, Neutral, Accent) с указанием HEX-кодов и названий.
Промт:
Предложи цветовую палитру для бренда финтех-приложения. Брендовый цвет — тёмно-синий (#0A2540). Сгенерируй: 5 оттенков primary (от самого светлого до самого тёмного), 4 оттенка серого для фона и текста, акцентный цвет для ошибок (red), успеха (green), предупреждения (yellow). Каждый цвет в формате HEX и rgba. Добавь рекомендации по контрасту (AA/AAA).
Пример использования: Скопируйте палитру в Figma через плагин «Styles to JSON» или вручную создайте цветовые стили.
5. Генерация SVG-иконки
Описание: Промт для создания простой иконки в формате SVG, которую можно вставить в Figma.
Промт:
Сгенерируй SVG-код для иконки «настройки» (шестерёнка) в стиле outline. Размер 24x24, толщина линии 2px, цвет #333. Центрируй иконку. Используй только path. Дай код, готовый для вставки в Figma через команду «Paste SVG».
Пример использования: Вставьте полученный SVG-код в Figma (Ctrl+V/Cmd+V) — появится векторный контур. Можете изменить цвет и размер.
6. Прототип перехода с анимацией Smart Animate
Описание: Промт для описания анимации между экранами в Figma — с параметрами Smart Animate.
Промт:
Опиши прототип перехода из списка задач в детальную карточку. На первом экране — список (Card List), при клике на карточку она плавно увеличивается и раскрывается в полный экран с деталями. Используй Smart Animate: duration 300ms, ease-in-out. Укажи, какие свойства должны анимироваться (scale, opacity, position). Напиши инструкцию для настройки в Figma.
Пример использования: Следуя инструкции, настройте Interaction Details в прототипе Figma.
7. Рефакторинг макета — объединение в компоненты
Описание: Промт для анализа существующего макета и рекомендаций по созданию компонентов с Auto Layout.
Промт:
Проанализируй типовой макет страницы (список карточек, хедер, футер). Предложи, какие элементы вынести в отдельные компоненты, как настроить Auto Layout для гибкости. Напиши план рефакторинга: какие фреймы объединить, какие отступы сделать относительными. Используй принципы atomic design.
Пример использования: Примените план к своему макету в Figma — это ускорит будущие правки.
8. Форма ввода с валидацией
Описание: Генерация полей ввода с состояниями error, success, disabled.
Промт:
Создай компонент поля ввода (input) с меткой и подсказкой. Используй Auto Layout: горизонтальное выравнивание, отступы 8px. Включи варианты: default (белый фон, серая обводка), focus (синяя обводка), error (красная обводка, иконка ошибки), success (зелёная обводка, галочка). Опиши настройки текстовых стилей и цвета для каждого варианта.
Пример использования: Используйте описание для создания Variants в Figma.
9. Дашборд с таблицей и графиками
Описание: Структура дашборда с Auto Layout, колонками и областями для графиков.
Промт:
Спроектируй дашборд аналитики. Сетка 12 колонок, верхняя панель с фильтрами (дата, категория). Основная область: слева таблица (3 колонки: название, значение, trend), справа два графика (bar chart и line chart). Используй Auto Layout с Fill и Hug. Укажи размеры фреймов, отступы между секциями 24px.
Пример использования: Полученную сетку можно сразу нарисовать во фрейме Figma, вставив placeholder для графиков.
10. Аккордеон (expandable panel)
Описание: Компонент с анимацией раскрытия/сворачивания.
Промт:
Создай аккордеон из 3 секций. Заголовок с иконкой стрелки (при раскрытии поворачивается на 180°). Контент скрыт/показан с анимацией высоты (overlay, duration 200ms). Используй Auto Layout для вертикальной укладки. Опиши компонент в Figma: как настроить variant и interaction.
Пример использования: Создайте компонент-аккордеон, следуя шагам.
11. Модальное окно с оверлеем
Описание: Структура модального окна с затемнением фона и анимацией появления.
Промт:
Разработай модальное окно для подтверждения действия. Оверлей (полупрозрачный чёрный, opacity 0.5). Карточка по центру: заголовок, текст, кнопки «Отмена» и «Подтвердить». Используй Auto Layout с максимальной шириной 480px. Добавь анимацию появления: масштабирование от 0.95 до 1, opacity от 0 до 1 за 200ms. Напиши инструкцию по настройке в Figma.
Пример использования: Вставьте полученную схему в Figma и настройте прототип.
12. Типографическая шкала (typography scale)
Описание: Генерация набора текстовых стилей на основе выбранного шрифта.
Промт:
Создай типографическую шкалу для дизайн-системы на основе Inter. Включи: H1 (48px, bold), H2 (36px, bold), H3 (24px, semibold), Body (16px, regular), Caption (12px, regular). Для каждого стиля укажи line-height (1.2 для заголовков, 1.5 для текста), letter-spacing (0 для заголовков, 0.2px для тела). Используй Figma text styles с иерархией.
Пример использования: ChatGPT предложит имена стилей и значения, которые вы можете импортировать через плагин или создать вручную.
Заключение
Эти 12 промтов покрывают 80% ежедневных задач UI/UX дизайнера: от компонентов до прототипов. Главное — не копировать слепо, а адаптировать под свой проект. Сохраните подборку в закладки и экспериментируйте с формулировками. AI не заменит вкус и опыт, но освободит время для творчества. Какие ещё промты вы используете в работе? Делитесь в комментариях к блогу!
Комментарии