7 промтов для UI/UX дизайна: Figma, компоненты и прототипы в 2026 году
В 2026 году нейросети стали незаменимыми помощниками дизайнера. Согласно отчёту Nielsen Norman Group за 2025 год, дизайнеры, использующие AI-инструменты, создают прототипы в 3,2 раза быстрее, чем те, кто работает только вручную. Но ключевой навык — не просто нажать «сгенерировать», а правильно составить промт (запрос). Плохой промт даёт мусор; хороший промт — готовый компонент или макет.
Мы собрали 7 проверенных промтов для работы в Figma, создания прототипов, компонентов и auto layout. Каждый промт сопровождается пояснением и примером использования.
1. Генерация UI-кита для мобильного приложения
Задача: Быстро получить набор повторяющихся элементов (кнопки, поля ввода, карточки) для старта проекта.
Промт:
«Сгенерируй UI-кит для мобильного приложения в стиле Material Design 3. Включи: первичную и вторичную кнопки, текстовое поле ввода, карточку с изображением и заголовком, переключатель (toggle), навигационную панель с 4 иконками. Используй цветовую схему: primary #6750A4, surface #FFFBFE. Все элементы должны быть отдельными компонентами с auto layout и отступами 16px.»
Пример использования: Загрузите промт в Midjourney или DALL-E 3 для генерации изображений элементов, затем импортируйте в Figma как шаблон. В Figma уже есть инструмент «Image to Design» (бета), который распознаёт скриншоты и превращает их в редактируемые слои.
2. Создание прототипа лендинга с auto layout
Задача: Спроектировать структуру страницы с адаптивной вёрсткой.
Промт:
«Создай прототип лендинга для SaaS-продукта. Блоки: Hero (заголовок + CTA-кнопка), преимущества (3 карточки в ряд на десктопе, столбиком на мобильном), отзывы (карусель из 3 слайдов), форма подписки (email + кнопка). Используй auto layout с gap: 24px. Padding контейнера: 120px слева/справа на десктопе, 24px на мобильном. Размеры фреймов задай в процентах: карточки — 33.33% на десктопе, 100% на мобильном.»
Пример использования: Этот промт можно вставить в плагин Figma «Magician» или в GPT-4o, который возвращает готовый код auto layout для Figma. В 2026 году Figma поддерживает импорт JSON-структуры через плагин «Design Sync».
3. Генерация системы компонентов для дашборда
Задача: Создать библиотеку компонентов для аналитической панели (графики, таблицы, фильтры).
Промт:
«Спроектируй систему компонентов для дашборда: боковое меню с 5 пунктами, хедер с поиском и аватаром пользователя, карточка метрики (иконка, число, процент изменения), линейный график с двумя линиями, таблица с 4 колонками (сортировка по заголовкам). Все компоненты должны быть с auto layout и иметь состояния: default, hover, active. Используй нейтральную цветовую палитру: серый #F5F5F5 для фона, синий #1976D2 для акцентов.»
Пример использования: Выполнив генерацию, вы получаете готовую дизайн-систему, которую можно сразу использовать в Figma. Это экономит 4-6 часов ручной работы над повторяющимися элементами.
4. Редизайн существующего интерфейса
Задача: Улучшить текущий дизайн сайта или приложения с учётом современных трендов.
Промт:
«Предложи редизайн главного экрана интернет-магазина. Текущие проблемы: мелкий шрифт (12px), отсутствие контраста между карточками товаров, кнопка «Купить» не выделяется. Новая версия должна: увеличить шрифт до 16px для основного текста, добавить отступы между карточками 20px, кнопку сделать с градиентом #FF6B35 → #FF8C42. Сохрани логотип и навигацию. Используй сетку с 4 колонками на десктопе.»
Пример использования: Загрузите скриншот текущего сайта в Claude 3.5 (Sonnet) или GPT-4o с этим промтом — нейросеть вернёт текстовое описание изменений и примерную структуру, которую вы перенесёте в Figma.
5. Создание анимированного прототипа в Figma
Задача: Оживить макет с помощью переходов и микроанимаций.
Промт:
«Создай прототип онбординга из 3 экранов. Первый экран: логотип по центру, через 1 секунду плавно (ease-in-out, 0.5s) появляется заголовок. Свайп влево — переход на второй экран с затемнением фона. Второй экран: иллюстрация масштабируется (scale 0.8→1, 0.4s). Кнопка «Далее» меняет цвет с серого на синий при наведении. Третий экран: форма входа (email + пароль) появляется снизу (slide up, 0.6s).»
Пример использования: В Figma Smart Animate автоматически создаёт переходы, если слои имеют одинаковые имена. Этот промт задаёт логику анимации, которую вы реализуете через прототипирование в Figma (вкладка Prototype).
6. Генерация иконок для интерфейса
Задача: Получить набор иконок в едином стиле без ручной отрисовки.
Промт:
«Сгенерируй 5 иконок для приложения доставки еды в стиле line-art (толщина линии 2px, скруглённые углы 4px). Иконки: корзина, поиск, профиль, избранное (сердце), настройки (шестерёнка). Размер 24x24px. Все иконки должны быть в чёрном цвете #000000 на прозрачном фоне.»
Пример использования: Плагин Figma «Iconify» работает с SVG, но если нужно уникальное изображение, используйте этот промт в Midjourney. Результат — 4 варианта каждой иконки, которые можно векторизовать через плагин «Vectorize».
7. Оптимизация компонентов под auto layout
Задача: Переделать статичные фреймы в адаптивные компоненты.
Промт:
«Преобразуй карточку товара в auto layout. Исходная структура: изображение (фиксированная ширина 300px), название (текст 18px), цена (текст 24px, жирный), кнопка «В корзину» (ширина 100% от родителя). Требования: изображение должно сжиматься до 100% при уменьшении карточки, текст переносится, кнопка прижимается к нижнему краю. Отступы: padding 16px, gap между элементами 12px. Выравнивание: всё по левому краю.»
Пример использования: Выделите существующий фрейм в Figma, откройте панель Auto Layout (Shift+A) и настройте параметры по промту. Это превращает жёсткий макет в адаптивный компонент, который корректно отображается на разных экранах.
Как использовать промты эффективно?
- Уточняйте контекст. Добавляйте в промт платформу (iOS, Android, Web), стиль (Material Design, Human Interface Guidelines), целевую аудиторию.
- Указывайте размеры. Figma работает с пикселями — задавайте точные значения или проценты.
- Используйте итерации. Первый результат редко бывает идеальным. Уточняйте: «увеличь отступы до 32px», «смени цвет кнопки на зелёный».
- Комбинируйте инструменты. Промт для GPT-4o + плагин Figma = максимальная скорость. ASI Biont поддерживает подключение к Figma через API — подробнее на asibiont.com/courses.
Заключение
Промты — это новый язык общения дизайнера с инструментами. В 2026 году умение составить точный, структурированный запрос ценится выше, чем владение горячими клавишами. Начните с этих 7 промтов, адаптируйте их под свои проекты, и вы увидите, как скорость работы в Figma вырастет в разы.
Помните: нейросеть — ваш ассистент, а не замена. Лучшие результаты даёт коллаборация: AI генерирует базу, дизайнер добавляет смысл и контекст.
Комментарии