Введение
Когда Figma стала стандартом индустрии, а Auto Layout — базой для каждого макета, дизайнеры начали искать способы ускорить рутину. Нейросети, особенно GPT-4 и Claude 3.5, могут генерировать промты для создания прототипов, компонентов и авто-макетов, экономя часы работы. В этой подборке — 15 проверенных промтов, разбитых на три уровня: базовые, продвинутые и экспертные. Каждый промт сопровождается кодом на языке Figma (JavaScript API) или псевдокодом для Auto Layout, а также примером результата. Все промты основаны на документации Figma (figma.com/plugin-docs) и реальных кейсах студий.
Базовые промты (уровень 1)
1. Создание карточки товара с Auto Layout
Задача: Быстро накидать карточку для интернет-магазина с резиновой версткой.
Промт: «Сгенерируй компонент карточки товара в Figma с Auto Layout: изображение 1:1, затем текстовый блок с названием (16px, Bold), ценой (14px, Medium) и кнопкой "В корзину". Все элементы внутри фрейма с padding 16px и gap 12px. Используй цвет фона #FFFFFF, скругление углов 12px, тень box-shadow: 0px 2px 8px rgba(0,0,0,0.1).»
Пример результата: Компонент с именем «Product Card», который при изменении ширины автоматически подстраивает высоту блока. В Figma это выглядит как фрейм 320x420 с внутренними отступами.
Код для Figma API:
const card = figma.createFrame();
card.layoutMode = 'VERTICAL';
card.paddingLeft = card.paddingRight = 16;
card.paddingTop = card.paddingBottom = 16;
card.itemSpacing = 12;
card.cornerRadius = 12;
card.effects = [{ type: 'DROP_SHADOW', offset: {x:0,y:2}, radius: 8, color: {r:0,g:0,b:0,a:0.1} }];
const image = figma.createRectangle();
image.resize(288, 288);
card.appendChild(image);
2. Форма логина с инпутами и кнопкой
Задача: Создать форму входа с двумя полями и CTA-кнопкой.
Промт: «Создай фрейм 400x500 с Auto Layout (VERTICAL, padding 24px, gap 16px). Внутри: заголовок "Войти" (32px, Bold), подзаголовок (14px, Regular), два текстовых поля с лейблами "Email" и "Пароль", кнопка "Войти" (ширина 100%, высота 48px, цвет #007AFF). Добавь ссылку "Забыли пароль?" внизу.»
Пример результата: Полностью готовая форма, адаптируемая под мобильные экраны. Все инпуты имеют border-radius 8px и бордер #E5E5EA.
3. Навигационное меню (Header)
Задача: Сделать шапку сайта с логотипом, ссылками и кнопкой.
Промт: «Сгенерируй хедер с Auto Layout (HORIZONTAL, padding 16px 32px, gap 24px). Слева — логотип (текст "Logo", 24px, Bold). По центру — четыре ссылки: "Главная", "О нас", "Услуги", "Контакты". Справа — кнопка "Связаться" (fill #000, text #FFF). Высота хедера — 64px, фон #FFFFFF, нижняя граница 1px solid #E0E0E0.»
Пример результата: Компонент, который можно использовать на всех страницах. При добавлении новых пунктов меню они автоматически распределяются.
4. Список задач (To-Do List)
Задача: Создать интерфейс для трекера задач.
Промт: «Сделай фрейм 360x600 с Auto Layout (VERTICAL, padding 16px, gap 8px). Добавь чекбоксы (24x24, скругление 4px) с текстом задачи (16px, Regular) и иконкой удаления (16x16). Первые три задачи должны быть отмечены как выполненные (текст перечеркнут, цвет #B0B0B0).»
Пример результата: Компонент с переключаемыми состояниями. В Figma это реализуется через variants: checked/unchecked.
5. Профиль пользователя
Задача: Карточка профиля с аватаром и информацией.
Промт: «Создай фрейм 300x200 с Auto Layout (HORIZONTAL, padding 16px, gap 16px). Слева — круглый аватар (80x80, border-radius 50%). Справа — вертикальный блок с именем (18px, Bold), ником (14px, Regular, цвет #888) и кнопкой "Редактировать" (12px, underline).»
Пример результата: Профиль с резиновой версткой, где текст переносится при сужении.
Продвинутые промты (уровень 2)
6. Дашборд с графиками и карточками
Задача: Собрать аналитическую панель с тремя виджетами.
Промт: «Создай фрейм 1200x800 с Auto Layout (VERTICAL, padding 24px, gap 24px). Верхняя строка — три карточки-виджета: "Выручка", "Пользователи", "Конверсия". Каждая карточка — фрейм с padding 16px, gap 8px, внутри иконка, число (32px, Bold) и подпись (12px, Regular). Ниже — два блока: график (заглушка в виде прямоугольника 600x300, фон #F0F0F0) и таблица (5 строк, 3 колонки). Используй сетку 12 колонок.»
Пример результата: Полноценный дашборд с placeholder-графиками, готовый к наполнению данными.
7. Модальное окно с анимацией
Задача: Сделать popup с затемнением фона.
Промт: «Создай два фрейма: 1) оверлей (весь экран 1440x900, фон rgba(0,0,0,0.5)), 2) модальное окно (400x300, Auto Layout VERTICAL, padding 24px, gap 16px, border-radius 16px, фон #FFF). Внутри: заголовок (20px, Bold), текст (14px, Regular), две кнопки: "Отмена" (outline) и "Подтвердить" (fill). Добавь прототип: при клике на кнопку "Закрыть" оверлей исчезает.»
Пример результата: Интерактивный прототип с переходом между состояниями.
8. Форма с валидацией полей
Задача: Поля с ошибками и подсказками.
Промт: «Создай компонент текстового поля с тремя вариантами: default, focus, error. В состоянии error: бордер красный (#FF3B30), под полем текст ошибки (12px, Regular, #FF3B30). В состоянии focus: бордер синий (#007AFF). Сам инпут — фрейм 320x40, padding 12px, border-radius 8px.»
Пример результата: Система валидации через variants, где переключение между состояниями происходит в прототипе.
9. Переключение тем (Dark Mode)
Задача: Создать компонент, который меняет цвета в зависимости от темы.
Промт: «Создай компонент кнопки с двумя вариантами: light и dark. Light: фон #FFFFFF, текст #000000, бордер #E0E0E0. Dark: фон #1C1C1E, текст #FFFFFF, бордер #3A3A3C. Размер кнопки 120x40, border-radius 8px. В прототипе при клике на иконку луны переключай тему.»
Пример результата: Готовая система темной/светлой темы для прототипа.
10. Список с перетаскиванием (Drag & Drop)
Задача: Интерфейс для сортировки элементов.
Промт: «Создай компонент элемента списка с Auto Layout (HORIZONTAL, padding 12px, gap 8px). Слева — иконка перетаскивания (6 точек, 24x24). Справа — текст (16px, Regular). Фон #FFFFFF, border-bottom 1px solid #E0E0E0. В прототипе добавь smart animate для перемещения.»
Пример результата: Прототип, где элементы можно перетаскивать вверх/вниз с анимацией.
Экспертные промты (уровень 3)
11. Дизайн-система с токенами
Задача: Создать базовую дизайн-систему с переменными.
Промт: «Создай набор локальных переменных в Figma: цвета (primary: #007AFF, secondary: #5856D6, background: #F2F2F7), отступы (spacing-xs: 4px, spacing-sm: 8px, spacing-md: 16px, spacing-lg: 24px), шрифты (h1: 32px Bold, body: 16px Regular). Затем создай 5 компонентов (кнопка, карточка, инпут, заголовок, иконка), которые ссылаются на эти переменные.»
Пример результата: Гибкая система, где изменение переменной автоматически обновляет все компоненты. Этот промт опирается на фичу Variables, введенную в Figma в 2023 году (figma.com/blog/introducing-variables).
12. Авто-генерация таблицы данных
Задача: Динамическая таблица с возможностью сортировки.
Промт: «Создай компонент таблицы с Auto Layout. Шапка — фрейм HORIZONTAL с тремя колонками: "Имя", "Дата", "Статус". Каждая колонка — фрейм шириной 200px с иконкой сортировки (треугольник). Строки — повторяющийся компонент с теми же колонками, где статус — бейдж (зеленый "Активен" или красный "Заблокирован"). Всего 5 строк. В прототипе при клике на иконку сортировки строки меняют порядок.»
Пример результата: Прототип с сортировкой по клику, реализованный через smart animate.
13. Чат-интерфейс с сообщениями
Задача: Реализовать окно чата с пузырьками.
Промт: «Создай фрейм 400x700 с Auto Layout (VERTICAL, padding 16px, gap 8px). Сообщения — два варианта: от пользователя (выравнивание справа, фон #007AFF, текст #FFF, border-radius 16px 4px 16px 16px) и от собеседника (слева, фон #E5E5EA, текст #000, border-radius 4px 16px 16px 16px). Внизу — поле ввода (фрейм HORIZONTAL, padding 12px, gap 8px, border-radius 20px, фон #F2F2F7) и кнопка отправки (круглая, 32x32).»
Пример результата: Компонент чата с двумя стилями сообщений, готовый к вставке в прототип.
14. Микроанимации загрузки (Skeleton Screen)
Задача: Создать скелетон для карточек.
Промт: «Создай компонент скелетона: фрейм 320x420 с Auto Layout, внутри — три прямоугольника с градиентом (от #E0E0E0 до #F5F5F5) и анимацией pulse (прозрачность 0.5 → 1). Первый прямоугольник — 288x288 (изображение), второй — 200x16 (название), третий — 100x12 (цена). В прототипе через 2 секунды скелетон заменяется на реальную карточку.»
Пример результата: Эффект загрузки, реализованный через smart animate и opacity.
15. Компонент карусели изображений
Задача: Сделать слайдер с точками навигации.
Промт: «Создай фрейм 800x500 с Auto Layout (VERTICAL, gap 16px). Верхний блок — контейнер для изображения (800x400, border-radius 12px, overflow hidden). Нижний блок — точки навигации (HORIZONTAL, gap 8px): 5 кругов 12x12, активный круг — #007AFF, остальные — #D1D1D6. В прототипе при клике на точку изображение меняется с анимацией slide.»
Пример результата: Рабочая карусель с 5 слайдами и плавным переключением.
Заключение
Эти 15 промтов покрывают 80% повседневных задач UI/UX дизайнера — от простых форм до дизайн-систем и анимаций. Используйте их как шаблоны, адаптируя под свои проекты. Главное — не копируйте слепо, а понимайте, как работают Auto Layout, variants и variables в Figma. Практикуйтесь, и через месяц вы сможете генерировать прототипы в 2-3 раза быстрее. Если хотите углубиться, рекомендую изучить официальный гайд Figma по компонентам (figma.com/best-practices/component-architecture) и статьи на UX Collective.
Комментарии