За последние годы искусственный интеллект стал незаменимым помощником дизайнера интерфейсов. С помощью правильно сформулированных промтов (запросов к языковым моделям) можно автоматизировать рутинные операции, быстро генерировать идеи и даже выстраивать структуру дизайн-систем. В этой подборке я собрал 8 практичных промтов, которые пригодятся в ежедневной работе в Figma: от создания компонентов до настройки auto layout и прототипирования. Каждый промт снабжен пояснением и примером использования.
1. Создание дизайн-системы
Задача: заложить основу проекта — палитру, типографику, сетку.
Промт:
Ты — UI/UX-дизайнер. Создай дизайн-систему для приложения по доставке еды. Определи:
1. Цветовую палитру (primary, secondary, accent, surface), каждый цвет — с HEX-кодом и кратким описанием назначения.
2. Типографическую шкалу: 6 размеров, от display до caption, с рекомендациями по начертанию и межстрочному интервалу.
3. Правила для отступов (4/8/16/24/32), теней (2 уровня) и скруглений (радиусы 8, 16).
Опиши, когда использовать каждый элемент. Результат — структурированный список.
Пример: подставив этот промт в ChatGPT, вы получите готовую спецификацию, которую останется лишь перенести в Figma: создать Color Styles, Text Styles и Effects Styles. Это экономит несколько часов на старте проекта.
2. Автоматизация auto layout
Задача: быстро собрать адаптивную карточку товара.
Промт:
Разработай структуру карточки товара для интернет-магазина с использованием Auto Layout. Перечисли, какие элементы входят в карточку (изображение, название, цена, кнопка). Для каждого элемента укажи, должен ли он тянуться (fill) или подстраиваться под контент (hug), а также значения внутренних отступов и отступов между элементами. Опиши направление layout (горизонтальное/вертикальное). Сделай так, чтобы карточка корректно масштабировалась при изменении ширины родителя.
Пример: в Figma вы создаете фрейм, применяете Auto Layout и следуете инструкциям модели. Меньше раздумий о ресайзе — больше времени на дизайн.
3. Проектирование user flow
Задача: спроектировать поток экранов для прототипа.
Промт:
Опиши пользовательский сценарий регистрации в мобильном приложении: от первого запуска до подтверждения email. Для каждого шага укажи экран (например, "Приветствие", "Ввод номера телефона", "Верификация"), его ключевые элементы и возможные состояния (загрузка, ошибка, успех). Также опиши переходы между экранами и правила показа индикаторов прогресса.
Пример: полученный текст — готовый сценарий для создания прототипа. Вы создаете фреймы, добавляете текст и связываете их в Figma с помощью прототипных взаимодействий. Это помогает продумать все состояния заранее.
4. Проверка доступности
Задача: привести макет к стандартам WCAG 2.1.
Промт:
Проверь цветовую палитру интерфейса: для пары цветов (например, #1E293B на #F1F5F9) рассчитай контрастность и определи, соответствует ли она уровню AA (4.5:1 для обычного текста, 3:1 для крупного). Предложи альтернативные HEX-значения, если контраст недостаточен. Объясни, какие элементы дизайна (текст, иконки, фокус-индикаторы) особенно важно проверить.
Пример: LLM выдаст рекомендации по замене цветов, а вы примените их в Figma, изменив переменные или стили. Такой промт полезно использовать на финальной стадии проекта.
5. Система нейминга слоёв
Задача: навести порядок в панели слоёв.
Промт:
Предложи правила нейминга слоёв и групп в Figma для типового проекта. Покрой следующие случаи: иконки, кнопки, поля ввода, карточки, навигация. Приведи примеры имен, например: "icon/search", "button/primary/active", "input/validation/error", "card/product/horizontal". Опиши, как организовать вложенность групп и как нумеровать слои для правильного порядка.
Пример: следование этим правилам упрощает коллаборацию: другие дизайнеры и разработчики быстро найдут нужный элемент. Модель можно попросить сгенерировать чек-лист для аудита файла.
6. Генерация UI-кита
Задача: создать библиотеку компонентов.
Промт:
Сгенерируй UI-кит для веб-сервиса по бронированию отелей. Включи: набор кнопок (primary, secondary, ghost), текстовые поля (обычное, с иконкой, с ошибкой), навигационное меню, карточку отеля. Для каждого компонента опиши состояния: default, hover, active, disabled. Укажи размеры и внутренние отступы. Представь в виде таблицы: компонент, состояние, размеры, пример использования.
Пример: такой UI-кит станет основой для создания компонентов Figma с вариантами. Вы заранее знаете все состояния и параметры, что ускоряет разработку библиотеки.
7. Адаптивная верстка для устройств
Задача: спроектировать отзывчивый макет.
Промт:
Разработай адаптивную сетку для новостного блога. Опиши, как контент ведет себя на ширинах 1440, 768 и 375 пикселей. Укажи: количество колонок, размеры отступов, поведение сайдбара и шапки, изменения типографики. Предложи конкретные правила для Figma (например, constraints: left+right, center, scale), чтобы элементы автоматически масштабировались.
Пример: эти данные превращаются в логичную структуру фреймов в Figma: вы создаете три версии макета или используете Constraints для адаптации одного фрейма. Это экономит время на создании избыточных артбордов.
8. Микро-анимации для прототипа
Задача: оживить взаимодействия.
Промт:
Придумай микро-взаимодействия для экрана подтверждения платежа. Предложи 3–5 анимаций: появление кнопки, изменение иконки статуса, индикатор загрузки. Для каждой анимации укажи: триггер (например, нажатие), длительность (мс), кривую easing (linear, ease-out, cubic-bezier c параметрами) и что именно движется. Опиши, как это реализовать в Figma Smart Animate (соответствие слоев).
Пример: используя Smart Animate в Figma, вы создаете прототип с плавными переходами, руководствуясь данными из промта. Результат — высоко детализированный прототип, который производит впечатление на стейкхолдеров.
Эти промты — не панацея, а вспомогательный инструмент. Важно критически оценивать результат и адаптировать его под конкретные задачи. Чем точнее запрос, тем полезнее ответ. Чтобы прокачать навыки работы с Figma, загляните в официальную документацию — там описаны все функции. А если вы хотите научиться правильно формулировать промты, начните с малого: комбинируйте запросы, добавляйте контекст, тестируйте разные стили. Экспериментируйте!
Комментарии