Введение
Привет, коллеги! Работа в Figma — это постоянный поиск баланса между креативностью и системностью. Auto Layout, компоненты, вариации — всё это мощные инструменты, но их настройка под конкретную задачу может отнимать часы. А что, если часть рутины передать нейросети? В этой подборке — 15 проверенных промтов для генерации UI-элементов и структур в Figma. Они помогут быстрее создавать каркасы экранов, настраивать резиновые сетки и продумывать компоненты. Все примеры — с готовым кодом и разбором, как это применить в реальном проекте.
Базовые промты
1. Создание каркаса мобильного экрана
Задача: Быстро сгенерировать структуру экрана логина для мобильного приложения.
Промт:
Сгенерируй текстовое описание UI-каркаса для экрана логина в Figma:
- Центрированный логотип сверху.
- Поле ввода email с плейсхолдером «example@email.com».
- Поле ввода пароля с иконкой глаза.
- Кнопка «Войти» шириной 100%.
- Ссылка «Забыли пароль?» под кнопкой.
- Нижняя плашка с кнопкой «Регистрация».
Используй Auto Layout с вертикальным направлением, отступами 16px.
Пример результата (код для Figma):
Вы получите текстовую разметку, которую легко перенести в Figma: вертикальный Frame с padding 24px, внутри — логотип (Top Auto Layout), затем два поля ввода (с внутренними отступами 12px), кнопка (залитая синим, border-radius 8px) и ссылка. Всё это обёрнуто в Auto Layout с gap 16px.
2. Сетка карточек для дашборда
Задача: Создать адаптивную сетку из карточек с заголовком и подзаголовком.
Промт:
Опиши структуру Auto Layout для сетки из 6 карточек в Figma:
- Каждая карточка: ширина 200px, высота auto, padding 12px, border-radius 8px, тень (box-shadow: 0 2px 8px rgba(0,0,0,0.1)).
- Внутри карточки: иконка (32x32), заголовок (H3), подзаголовок (body).
- Сетка: 3 колонки, gap 16px.
- На мобильных (ширина < 480px) переходит в одну колонку.
Пример результата:
Вы получаете описание компонента Card с пропсами для иконки и текста. В Figma это реализуется через Auto Layout с wrap (Flex Wrap: Wrap) и Constraint Proportions. Отличное решение для дашбордов аналитики.
3. Форма обратной связи
Задача: Быстро набросать форму с валидацией.
Промт:
Спроектируй UI-структуру формы обратной связи:
- Поле «Имя» (обязательное, с красной обводкой при ошибке).
- Поле «Email» (с маской ввода).
- Текстовое поле «Сообщение» (высота 120px).
- Чекбокс «Согласен на обработку данных».
- Кнопка «Отправить» (disabled-состояние — серый фон).
- После отправки — сообщение об успехе (зелёная плашка).
Используй Auto Layout, padding 24px, gap 12px.
Пример результата:
Готовая структура с тремя состояниями: Default, Error, Success. Поля обёрнуты в компоненты Input с пропсами state и helperText. Удобно для быстрой вставки в проект.
Продвинутые промты
4. Компонент табов с вариациями
Задача: Создать систему табов с активным, неактивным и hover-состояниями.
Промт:
Опиши компонент Tab в Figma с Auto Layout:
- Варианты: Active (синий фон, белый текст), Inactive (белый фон, серый текст), Hover (светло-синий фон).
- Ширина: auto, padding: 8px 16px, border-radius: 4px.
- Внутри: текст (14px, bold).
- Всё объедини в компонент с Property: State.
- Создай контейнер Tabs с горизонтальным Auto Layout, gap 4px.
Пример результата:
Вы получаете компонент с тремя вариантами (Active, Inactive, Hover), который можно переключать в инспекторе. Контейнер Tabs автоматически выравнивает табы в ряд. Экономит время при создании навигации.
5. Адаптивный список задач
Задача: Создать список задач с чекбоксами и возможностью отметки «выполнено».
Промт:
Сгенерируй структуру для Todo List:
- Каждый элемент: чекбокс (16x16), заголовок задачи (16px), кнопка удаления (иконка корзины).
- Выполненная задача: заголовок перечёркнут, цвет серый.
- Используй Auto Layout с горизонтальным направлением, gap 8px.
- Всё оберни в вертикальный Frame с gap 4px.
- Добавь пустое состояние: текст «Нет задач» по центру.
Пример результата:
Компонент Task с пропсами completed (булево) и text. В Figma создаётся два варианта: Default и Completed. Список автоматически обновляется при добавлении новых элементов через Auto Layout.
6. Хедер с поиском и профилем
Задача: Спроектировать хедер для веб-приложения.
Промт:
Опиши хедер с Auto Layout:
- Слева: логотип (48x48) и название проекта.
- По центру: поле поиска с иконкой (ширина 300px, padding 8px 12px).
- Справа: иконка уведомлений (с бейджем), аватар пользователя (32x32).
- Высота хедера: 56px, padding 0 24px.
- Между элементами gap 16px.
- На мобильных: поиск скрывается, появляется гамбургер-меню.
Пример результата:
Готовый компонент Header с адаптивностью. В Figma можно настроить Constraints: left, center, right. Бейдж уведомлений — отдельный компонент с числовым пропсом.
7. Модальное окно подтверждения
Задача: Создать модальное окно с двумя кнопками.
Промт:
Спроектируй модальное окно:
- Оверлей (полупрозрачный чёрный, 50% opacity).
- Карточка: ширина 400px, padding 24px, border-radius 12px, тень.
- Заголовок «Подтвердите действие» (18px, bold).
- Описание (14px, gray).
- Две кнопки: «Отмена» (outline), «Удалить» (red, filled).
- Кнопки в Auto Layout с gap 8px, выравнивание справа.
- Анимация: появление с opacity 0→1 и scale 0.9→1 (CSS transition).
Пример результата:
Компонент Modal с пропсами title, description, buttonText. В Figma оверлей и карточка — отдельные слои. Анимация описывается отдельно для разработчика.
Экспертные промты
8. Дизайн-система: компонент Button
Задача: Создать полноценный компонент кнопки с 12 вариациями.
Промт:
Создай компонент Button в Figma с Auto Layout:
- Свойства: Type (Primary, Secondary, Outline, Ghost), Size (Small, Medium, Large), State (Default, Hover, Active, Disabled).
- Small: padding 6px 12px, font 12px.
- Medium: padding 8px 16px, font 14px.
- Large: padding 12px 24px, font 16px.
- Primary: синий фон, белый текст.
- Secondary: серый фон.
- Outline: белый фон, синяя обводка.
- Ghost: без фона, синий текст.
- Hover: затемнение на 10%.
- Active: затемнение на 20%.
- Disabled: opacity 0.5, cursor not-allowed.
- Внутри: иконка слева (опционально) + текст.
- Border-radius: 6px.
Пример результата:
Готовый компонент с 434 = 48 комбинациями. В Figma это реализуется через свойства (component properties): boolean для иконки, variant для Type и Size. Разработчику передаётся JSON с пропсами.
9. Адаптивная карточка товара
Задача: Создать карточку для интернет-магазина с разными размерами экрана.
Промт:
Опиши компонент ProductCard:
- Изображение (1:1, cover).
- Название товара (16px, max 2 строки).
- Цена (18px, bold).
- Рейтинг (звёзды, 5 шкала).
- Кнопка «В корзину» (ширина 100%).
- Варианты: Desktop (ширина 250px), Tablet (200px), Mobile (100%).
- В Mobile: изображение уменьшается, текст короче.
- Используй Auto Layout с вертикальным направлением, gap 8px.
- Image: fill container, высота 200px.
Пример результата:
Компонент с тремя вариантами ширины. В Figma можно использовать Constraints: left/right с процентами. Для разработчика — CSS Grid с breakpoints.
10. Система уведомлений (Toast)
Задача: Спроектировать всплывающие уведомления с разными типами.
Промт:
Создай компонент Toast:
- Типы: Success (зелёный), Error (красный), Warning (жёлтый), Info (синий).
- Внутри: иконка слева, текст, кнопка закрытия.
- Анимация: появляется сверху, сдвигается вниз (CSS translateY).
- Auto Layout: горизонтальный, padding 12px 16px, border-radius 8px.
- Ширина: 320px, тень.
- Стек: несколько тостов расположены вертикально с gap 8px.
Пример результата:
Компонент Toast с четырьмя типами. В Figma реализуется через Variants. Стек — отдельный контейнер с Auto Layout. Для анимации нужен CSS или Framer Motion.
11. Меню-бургер для мобильной версии
Задача: Создать выезжающее меню.
Промт:
Опиши компонент BurgerMenu:
- Иконка гамбургера (три линии, 24x24).
- При клике: меню выезжает слева (ширина 280px).
- Внутри: логотип, список ссылок (16px, padding 12px 16px), разделитель, кнопка «Выйти».
- Оверлей (полупрозрачный).
- Анимация: transform translateX(-100%) → 0.
- Используй Auto Layout для списка.
- Каждая ссылка — компонент с hover-состоянием.
Пример результата:
Два состояния: Closed (только иконка) и Open (оверлей + меню). В Figma — вариант с переключателем. Разработчик получает описание анимации.
12. Пагинация для таблицы
Задача: Создать компонент пагинации.
Промт:
Спроектируй пагинацию:
- Кнопки: «Назад», номера страниц (1, 2, 3...), «Вперёд».
- Активная страница: синий фон, белый текст.
- Неактивные: белый фон, серый текст.
- Если страниц > 5: показывать многоточие.
- Auto Layout: горизонтальный, gap 4px.
- Размер кнопок: 32x32, border-radius 4px.
- Текст: 14px.
Пример результата:
Компонент Pagination с пропсами currentPage и totalPages. В Figma — варианты для разных количеств страниц. Для разработчика — логика на JavaScript.
13. Профиль пользователя с редактированием
Задача: Создать страницу профиля с возможностью редактирования.
Промт:
Опиши структуру страницы профиля:
- Аватар (120x120, круглый, с возможностью загрузки).
- Имя пользователя (24px), статус (14px).
- Поля: Имя, Фамилия, Email, Телефон.
- Кнопка «Сохранить» (синяя).
- Режимы: View (поля только для чтения), Edit (поля активны).
- Используй Auto Layout, padding 32px, gap 16px.
- В Edit: поля с обводкой, кнопка активна.
Пример результата:
Два варианта: View и Edit. В Figma — через Variants. Поля — компонент Input с пропсом readonly. Удобно для личного кабинета.
14. Чат-интерфейс с сообщениями
Задача: Спроектировать окно чата.
Промт:
Создай компонент Chat:
- Шапка: имя собеседника, статус (online/offline).
- Область сообщений: Auto Layout, вертикальный, gap 8px.
- Сообщения: от пользователя (справа, синий фон), от собеседника (слева, серый фон).
- Поле ввода: 100% ширина, padding 12px, с кнопкой отправки.
- Пустое состояние: текст «Напишите первое сообщение».
- Анимация: новые сообщения плавно появляются.
Пример результата:
Компонент Message с пропсами side (left/right) и text. Чат-контейнер с прокруткой. В Figma — примеры с разным количеством сообщений.
15. Дашборд с графиками (заглушки)
Задача: Создать макет дашборда с placeholder-графиками.
Промт:
Опиши дашборд аналитики:
- Сверху: фильтры (дата, категория).
- Основная часть: сетка 2x2 из карточек с графиками.
- Каждая карточка: заголовок, график (прямоугольник-заглушка с текстом «Chart here»).
- Справа: список последних действий (5 элементов).
- Используй Auto Layout, padding 24px, gap 16px.
- Ширина карточек: 1fr (равные доли).
Пример результата:
Готовая структура для презентации. Графики — просто серые прямоугольники с текстом. Auto Layout автоматически подгоняет размеры. Идеально для быстрой демонстрации концепции.
Заключение
Эти 15 промтов помогут вам ускорить рутинные задачи в Figma — от создания каркасов до настройки сложных компонентов с вариациями. Главное — не копировать слепо, а адаптировать под свои проекты. Промты можно комбинировать: например, взять структуру формы из #3 и обернуть её в модальное окно из #7. Экспериментируйте, автоматизируйте и делитесь результатами. А если хотите глубже разобраться в Auto Layout и дизайн-системах — заглядывайте в наш блог, там много полезного.
Комментарии