Введение
Дизайнеры тратят до 40% времени на рутинные задачи: настройку Auto Layout, создание вариаций компонентов или адаптацию макетов под разные разрешения. Нейросети, такие как ChatGPT и Claude, могут взять на себя эту работу, если правильно составить промт. В этой статье — 10 проверенных запросов, которые я использую в Figma каждый день. Никакой воды, только готовые формулировки и примеры применения.
1. Промт для генерации Auto Layout с отступами
Проблема: Быстро настроить отступы и выравнивание для карточки товара.
Промт:
«Создай описание Auto Layout для карточки товара в Figma. Используй вертикальный фрейм с padding 16px, gap 12px между элементами: изображение (300x300), заголовок (H3, жирный), цена (H4, серый цвет #666), кнопка «Купить» (зеленый фон #4CAF50, белый текст). Выравнивание по центру. Предоставь готовый JSON для импорта в Figma Plugins.»
Пример результата: Плагин Auto Layout Generator создаёт фрейм с точными настройками. Это экономит 10-15 минут на каждую карточку.
2. Промт для создания компонентов с вариантами
Проблема: Создать кнопку с состояниями (Normal, Hover, Active, Disabled) без ручного копирования.
Промт:
«Сгенерируй структуру компонента «Кнопка» с вариантами: Normal (синий фон #2196F3, белый текст, border-radius 8px), Hover (темно-синий #1976D2), Active (ещё темнее #1565C0), Disabled (серый #BDBDBD). Каждый вариант — отдельный фрейм с текстом «Нажми меня». Укажи свойства: ширину 200px, высоту 48px. Выведи в виде таблицы для импорта в Figma.»
Результат: За 1 промт получаете 4 варианта компонента, которые остаётся только привязать к прототипу.
3. Промт для настройки цветовой палитры
Проблема: Быстро сгенерировать системные цвета из брендового цвета.
Промт:
«На основе HEX-кода #FF5722 (глубокий оранжевый) создай цветовую палитру для UI: Primary, Secondary, Success, Warning, Error, Info. Для каждого цвета укажи 5 оттенков (50, 100, 200, 300, 400). Используй HSL-модель для расчёта. Предоставь в формате JSON с ключами ‘name’, ‘hex’, ‘hsl’, ‘usage’ (например, Primary 100 — для фонов).»
Пример: Код палитры можно сразу скопировать в Figma Variables. Это заменяет ручной подбор в Coolors.co.
4. Промт для текстовых стилей
Проблема: Создать типографическую систему для веб-приложения.
Промт:
«Создай набор текстовых стилей для Figma: H1 (48px, Bold, #1A1A1A), H2 (36px, Semibold, #2A2A2A), H3 (24px, Medium, #333), Body (16px, Regular, #4A4A4A), Caption (12px, Regular, #666). Для каждого стиля укажи line-height (1.2 для заголовков, 1.5 для текста) и letter-spacing (0px для заголовков, 0.5px для текста). Формат: таблица Markdown.»
Результат: Готовая таблица, которую дизайнер переносит в Figma за 5 минут.
5. Промт для создания прототипа навигации
Проблема: Быстро описать логику переходов между экранами.
Промт:
«Опиши прототип для мобильного приложения интернет-магазина с 5 экранами: Главная, Каталог, Карточка товара, Корзина, Профиль. Для каждого экрана укажи элементы навигации (кнопки, табы, ссылки) и их взаимодействие: при нажатии на «Купить» на Карточке товара открывается Корзина с анимацией Slide Right. Используй термины Figma: Smart Animate, Ease In Out, Duration 300ms. Выведи в виде списка с действиями.»
6. Промт для адаптивной верстки
Проблема: Создать компоненты для desktop, планшета и мобильного.
Промт:
«Спроектируй фрейм навигационной панели (Navbar) для трёх разрешений: Desktop (1440px) — логотип слева, 5 пунктов меню по центру, кнопка справа. Планшет (768px) — меню сворачивается в бургер-иконку. Mobile (375px) — логотип и бургер. Используй Auto Layout с wrap и hugging content. Предоставь описание в виде таблицы: компонент, размер, свойство.»
7. Промт для иконок SVG
Проблема: Получить простую иконку в SVG для вставки в Figma.
Промт:
«Сгенерируй SVG-код иконки «Настройки» в стиле Material Design. Используй viewBox 24x24, цвет #333, толщина линии 2px. Иконка должна состоять из шестерёнки с 6 зубцами и центральным кругом. Выведи только код в теге <svg> без пояснений.»
8. Промт для проверки доступности
Проблема: Проверить контрастность цветов.
Промт:
«Проверь контрастность цветов для веб-интерфейса: текст #757575 на фоне #FFFFFF. Рассчитай соотношение по WCAG 2.1. Допустимо ли для обычного текста (AA) и крупного текста (AAA)? Если нет, предложи альтернативный цвет текста с шагом 50 оттенков до достижения AA.»
9. Промт для генерации UX-текстов
Проблема: Написать текст для пустого состояния.
Промт:
«Напиши 3 варианта сообщения для пустого состояния корзины в интернет-магазине. Тон — дружелюбный, с эмодзи. Вариант 1: короткий (до 50 символов). Вариант 2: с кнопкой действия. Вариант 3: с рекомендацией товаров. Пример: «Корзина пуста? Добавьте что-нибудь вкусное! 🛒»»
10. Промт для описания Design System
Проблема: Документировать компоненты.
Промт:
«Создай описание компонента «Поле ввода» для Design System. Включи: назначение, состояния (Default, Focus, Error, Disabled), размеры (Small 32px, Medium 40px, Large 48px), валидация (email, phone). Используй формат: | Компонент | Свойство | Значение |. Укажи ссылки на документацию Material Design 3.»
Заключение
Эти 10 промтов покрывают 80% рутинных задач дизайнера в Figma. Главное — конкретика: чем точнее вы описываете размеры, цвета и состояния, тем качественнее ответ нейросети. Начните с одного-двух запросов сегодня, и вы заметите, как ускоряется работа с компонентами и прототипами. Если вы работаете с API дизайн-систем, ASI Biont поддерживает подключение к Figma через API — подробнее на asibiont.com/courses. Внедряйте промты в ежедневную практику и экономьте часы на настройке интерфейсов.
Комментарии