Figma-промты, которые превращают дизайн-систему в конвейер: от токенов до прототипа

Дизайнеры, которые всё ещё вручную перерисовывают кнопки и ищут отступы в макетах, тратят до 30% рабочего времени на рутину. Я сам через это прошёл, пока не начал использовать промты для генерации UI-компонентов, дизайн-токенов и интерактивных прототипов. В этой подборке — 10 проверенных промтов, которые я использую в Figma каждый день. Они сэкономят вам часы, а заодно помогут выстроить системный подход к дизайну.

Промт 1: Генерация дизайн-токенов

Задача: Создать JSON-файл с дизайн-токенами для цветов, типографики и отступов.

Промт:

Сгенерируй JSON с дизайн-токенами для дизайн-системы: цветовая палитра (primary, secondary, accent, neutral), типографика (h1-h6, body, caption) с размерами и интерлиньяжем, отступы (4, 8, 12, 16, 24, 32, 48). Используй формат: { "color": { "primary": { "default": "#0057FF", "hover": "#0040CC" } } }

Пример результата:

{
  "color": {
    "primary": { "default": "#0057FF", "hover": "#0040CC" },
    "secondary": { "default": "#6C757D", "hover": "#5A636A" }
  },
  "typography": {
    "h1": { "fontSize": 32, "lineHeight": 40 },
    "body": { "fontSize": 16, "lineHeight": 24 }
  },
  "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 24, "xl": 32 }
}

Как внедрить: Загрузите JSON в плагин Tokens Studio (если используете) или просто держите как референс. Промт позволяет быстро обновлять токены при изменении брендбука.

Промт 2: Создание UI-компонентов в Figma

Задача: Сгенерировать описание библиотеки компонентов (кнопки, поля ввода, карточки).

Промт:

Опиши компоненты для библиотеки UI: кнопка (primary, secondary, ghost), поле ввода (default, error, disabled), карточка (с заголовком, текстом, изображением). Для каждого укажи: размеры, скругления, тени, состояния (hover, focus, active). Используй структуру: Компонент: Кнопка, Варианты: primary/secondary/ghost, Свойства: размер, состояние

Пример результата:

Компонент: Кнопка
Варианты: primary (синий фон, белый текст), secondary (серый фон, тёмный текст), ghost (прозрачный, синий текст)
Свойства: размер (small: 32px, medium: 40px, large: 48px), состояние (default, hover, focus, disabled)
Скругление: 8px; Тень: 0 2px 4px rgba(0,0,0,0.1)

Как внедрить: Используйте результат как спецификацию для ручного создания компонентов или передайте в плагин, который умеет генерировать компоненты по описанию (например, Figma Tokens).

Промт 3: Генерация макета страницы по текстовому описанию

Задача: Получить структуру макета для лендинга или дашборда.

Промт:

Сгенерируй структуру макета для лендинга SaaS-продукта: шапка с логотипом и меню, hero-блок с заголовком и CTA, секция с преимуществами (3 карточки), блок с отзывами, секция с ценами (3 тарифа), подвал с контактами. Для каждого блока укажи: расположение элементов, отступы, сетку (12 колонок).

Пример результата:

1. Шапка: логотип слева, меню по центру, кнопка "Войти" справа. Высота 64px.
2. Hero: заголовок по центру, подзаголовок, CTA-кнопка. Отступы сверху/снизу 80px.
3. Преимущества: 3 карточки в ряд, каждая с иконкой, заголовком, текстом. Отступы 24px.
4. Отзывы: слайдер с цитатами. Отступы 60px.
5. Цены: 3 карточки, средняя выделена. Отступы 80px.
6. Подвал: 4 колонки ссылок, копирайт. Отступы 40px.

Как внедрить: Перенесите структуру на артборд Figma, используя Auto Layout. Это ускоряет создание каркасов в разы.

Промт 4: Создание дизайн-системы на основе брендбука

Задача: Сгенерировать руководство по стилю для новой дизайн-системы.

Промт:

Создай дизайн-систему для финтех-стартапа с целевой аудиторией 25-40 лет. Включи: цветовую палитру (primary, secondary, success, warning, error), типографику (шрифты с засечками для заголовков, без засечек для текста), компоненты (кнопки, карточки, формы). Укажи принципы: минимализм, доверие, прозрачность. Дай конкретные HEX-коды.

Пример результата:

Палитра:
- primary: #1A73E8 (синий, доверие)
- secondary: #34A853 (зелёный, успех)
- success: #188038
- warning: #F9AB00
- error: #D93025
Типографика:
- Заголовки: Merriweather, 28px, жирный
- Текст: Roboto, 16px, обычный
Принципы: минимум украшений, понятная навигация, честные данные.

Как внедрить: Используйте как стартовую точку для создания гайдлайнов, затем адаптируйте под конкретный продукт.

Промт 5: Автоматизация создания прототипа

Задача: Сгенерировать описание интерактивного прототипа с переходами.

Промт:

Опиши интерактивный прототип мобильного приложения для заказа еды: экраны (главный, каталог, корзина, оформление), переходы между экранами (кнопка "Добавить" ведёт в корзину, "Оформить" — к оплате), анимации (плавное появление, сдвиг). Для каждого экрана укажи элементы и действия.

Пример результата:

Экран 1 (Главный): список ресторанов, карточки с фото и рейтингом. Нажатие на карточку -> переход на экран каталога.
Экран 2 (Каталог): список блюд, кнопка "Добавить" у каждого. Нажатие -> добавление в корзину, кнопка "Корзина" в шапке.
Экран 3 (Корзина): список выбранных блюд, кнопка "Оформить". Нажатие -> переход на экран оплаты.
Экран 4 (Оплата): форма с адресом и картой, кнопка "Подтвердить". Нажатие -> всплывающее окно успеха.
Анимации: при переходе экран сдвигается влево, появление элементов с fade-in (0.3s).

Как внедрить: Создайте экраны во Figma, затем используйте прототип-режим, чтобы связать их согласно описанию. Промт экономит время на продумывание логики.

Промт 6: Генерация UI-текстов (микрокопии)

Задача: Сгенерировать тексты для интерфейса: кнопки, ошибки, подсказки.

Промт:

Сгенерируй микрокопию для формы регистрации: заголовок, подзаголовок, текст на кнопке, сообщения об ошибках (пустое поле, неверный email, слабый пароль), сообщение об успехе. Тон — дружелюбный, но профессиональный.

Пример результата:

Заголовок: "Создайте аккаунт"
Подзаголовок: "Присоединяйтесь к сообществу из 10 000 дизайнеров"
Кнопка: "Зарегистрироваться"
Ошибки:
- Пустое поле: "Пожалуйста, заполните это поле"
- Неверный email: "Проверьте формат email (например, name@example.com)"
- Слабый пароль: "Пароль должен содержать минимум 8 символов, включая цифру и заглавную букву"
Успех: "Регистрация завершена! Проверьте почту для подтверждения."

Как внедрить: Используйте в макетах сразу, чтобы не отвлекаться на тексты позже.

Промт 7: Аудит доступности (Accessibility)

Задача: Проверить контрастность и доступность цветов в дизайне.

Промт:

Проверь контрастность следующих пар: фон #FFFFFF и текст #FF0000; фон #F0F0F0 и текст #333333. Сравни с WCAG 2.1 (AA: 4.5:1 для обычного текста, 3:1 для крупного). Дай рекомендации по улучшению.

Пример результата:

Пара 1: #FFFFFF и #FF0000 — контраст 4:1, не проходит AA для обычного текста (нужно 4.5:1). Рекомендация: используйте #E60000 или #CC0000.
Пара 2: #F0F0F0 и #333333 — контраст 10.5:1, отлично.

Как внедрить: Используйте промт перед сдачей макета, чтобы избежать проблем с доступностью. Для автоматической проверки можно использовать плагин Stark, но промт помогает понять принципы.

Промт 8: Оптимизация Auto Layout

Задача: Получить рекомендации по настройке Auto Layout для сложных макетов.

Промт:

У меня есть карточка товара с изображением, названием, ценой и кнопкой. Как настроить Auto Layout, чтобы текст не растягивался, кнопка была прижата к низу, а отступы были фиксированными? Дай конкретные параметры.

Пример результата:

- Карточка: Auto Layout вертикальный, padding 16px, gap 12px.
- Изображение: фиксированная высота 200px, ширина 100%.
- Название: свойство Text Auto Resize = Fixed, чтобы не растягивалось.
- Цена: так же Fixed.
- Кнопка: align self = Stretch, чтобы занять всю ширину; добавьте Spacer между ценой и кнопкой (или установите кнопке margin-top: auto).

Как внедрить: Примените эти настройки в Figma. Промт полезен, когда вы только осваиваете Auto Layout.

Промт 9: Генерация иконок и иллюстраций

Задача: Сгенерировать SVG-иконки по текстовому описанию.

Промт:

Создай SVG-код для иконки "корзина" в линейном стиле (stroke), размер 24x24, толщина линии 2px, цвет #333333. Используй стандартные SVG-элементы (path, circle, rect).

Пример результата:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333333" stroke-width="2">
  <path d="M3 3h2l2.4 12.2a2 2 0 0 0 2 1.8h7.6a2 2 0 0 0 2-1.6L21 7H6" />
  <circle cx="9" cy="21" r="1" />
  <circle cx="19" cy="21" r="1" />
</svg>

Как внедрить: Вставьте SVG прямо во Figma или используйте как основу для дальнейшего редактирования. Это экономит время на поиск иконок.

Промт 10: Создание UI-кита для команды

Задача: Сгенерировать описание UI-кита для передачи разработчикам.

Промт:

Опиши UI-кит для веб-приложения: цветовая палитра, типографика, компоненты (кнопки, формы, навигация), паттерны (пустые состояния, загрузка). Укажи, как компоненты должны вести себя на разных разрешениях (desktop, tablet, mobile).

Пример результата:

Палитра: primary #0057FF, secondary #6C757D, success #28A745, warning #FFC107, danger #DC3545.
Типографика: заголовки — Inter, 20-32px; текст — Inter, 14-16px.
Компоненты:
- Кнопки: primary, secondary, outline, sizes (sm, md, lg).
- Формы: поля с лейблами, состояния (default, focus, error).
- Навигация: верхняя панель, сайдбар для desktop, бургер-меню для mobile.
Паттерны: пустые состояния — иконка + текст + CTA; загрузка — скелетоны.
Адаптивность: desktop — 12 колонок, tablet — 8, mobile — 4.

Как внедрить: Используйте как чек-лист при создании UI-кита и для коммуникации с разработчиками.

Как интегрировать промты в рабочий процесс

Чтобы промты работали эффективно, следуйте простым правилам:

• Уточняйте контекст: чем больше деталей вы даёте, тем точнее результат.
• Используйте итерации: не ждите идеала с первого раза, уточняйте запрос.
• Комбинируйте промты: например, сначала сгенерируйте токены, потом компоненты, потом прототип.
• Проверяйте результат: ИИ — это помощник, а не замена экспертизе. Всегда проверяйте контраст, отступы и логику.

Заключение

Эти 10 промтов — лишь верхушка айсберга. Они уже экономят мне несколько часов в неделю и помогают поддерживать консистентность дизайн-системы. Начните с одного-двух, адаптируйте под свои задачи, и вы заметите, как рутина уходит на второй план. А если у вас есть свои любимые промты — делитесь в комментариях, буду рад пополнить коллекцию.