Фигма как сделать выпадающий список

Выпадающий список в Figma — это интерактивный элемент, который позволяет пользователям выбирать один или несколько вариантов из предложенного меню. Создание такого компонента требует понимания работы с фреймами, авто-макетами, взаимодействиями и компонентами. Основной способ — использовать сочетание видимости слоёв и переходов между состояниями.

Основные требования к выпадающему списку

Выпадающий список — один из ключевых элементов интерфейса, особенно в формах, фильтрах и настройках. В Figma его нельзя создать как нативный компонент, как в коде (например, HTML select), но можно имитировать поведение с помощью прототипирования и компонентов. Главная цель — обеспечить плавное раскрытие и скрытие списка при клике.

Для успешного воспроизведения поведения важно учитывать три аспекта: визуальную согласованность, логику взаимодействия и адаптивность. Список должен выглядеть естественно, не перекрывать важные элементы и корректно масштабироваться под разные контентные объемы.

Пользователь ожидает, что при клике по полю он увидит список опций, сможет выбрать одну и вернуться к заполнению формы. Поэтому важно, чтобы анимация была минимальной, а переход — интуитивным. Также стоит предусмотреть закрытие списка при клике вне области (что в Figma реализуется через триггер «On Outside Click», если используется плагин).

Шаг 1: Создание базового интерфейса

Первым делом необходимо создать визуальное представление поля и самого списка. Начните с прямоугольника — это будет ваше поле ввода. Добавьте внутрь текстовый блок с заголовком, например, «Выберите страну», и стрелку справа (можно использовать иконку из библиотеки или нарисовать самостоятельно).

Создайте отдельный фрейм ниже — это будет область выпадающего списка. Внутри разместите несколько прямоугольников с текстом: «Россия», «Казахстан», «Беларусь». Убедитесь, что все элементы выровнены и имеют одинаковые отступы. Используйте сетку, чтобы избежать визуальных диспропорций.

Важно, чтобы оба фрейма — поле и список — находились в одном родительском фрейме. Это обеспечит правильную привязку при анимации и позволит легко управлять видимостью. Родительский фрейм станет основой для будущего компонента.

• Создайте фрейм-обёртку размером, например, 300×200 px.
• Внутрь поместите поле ввода (высота ~40 px).
• Под ним — фрейм со списком (изначально может быть скрыт).
• Назовите слои понятно: «Input Field», «Dropdown List», «Option 1» и т.д.

Шаг 2: Настройка авто-макета

Auto Layout — ключевой инструмент для создания адаптивных и удобных в управлении компонентов. Примените его к родительскому фрейму, чтобы внутренние элементы правильно реагировали на изменения. Затем добавьте Auto Layout отдельно к списку опций.

Настройте направление: вертикальное для списка, горизонтальное — если нужно выровнять стрелку и текст в поле. Установите отступы (padding) и gap между пунктами (рекомендуется 8–16 px). Это обеспечит равномерное расстояние и упростит редактирование.

Если вы решите добавить новую опцию, она автоматически займет своё место благодаря gap. При удалении — остальные сдвинутся. Это особенно полезно при A/B-тестировании или локализации.

Шаг 3: Создание состояний списка

Теперь нужно задать два состояния: «закрыто» и «открыто». Для этого используйте вариант компонента (Component Variant) или просто скрывайте/показывайте слои. Первый способ предпочтительнее, если вы создаёте дизайн-систему.

Создайте копию родительского фрейма. В одной версии оставьте только поле ввода, а список скройте (через значок глаза в слоях). Во второй — покажите список. Эти два фрейма станут «Closed State» и «Open State».

Если используете Variants, настройте свойство, например, «State» со значениями «Default» и «Expanded». Это позволит переключаться между состояниями через интерактив в прототипе. Такой подход масштабируем и легко интегрируется в плагины и dev handoff.

• Выделите оба фрейма (закрытый и открытый).
• Нажмите правой кнопкой → Create Component Set.
• Назначьте свойство, например, «State».
• Убедитесь, что Variants правильно привязаны.

Шаг 4: Настройка взаимодействия

Перейдите в режим Prototype. Выделите поле ввода в состоянии «Default». В правой панели найдите раздел Interactions. Установите триггер: «OnClick». В качестве действия выберите «Change to» и укажите состояние «Expanded».

Настройте анимацию: рекомендуется «Smart Animate» с продолжительностью 200–300 мс. Это создаст плавное появление списка. Убедитесь, что включена опция «Push siblings» — тогда следующие за компонентом элементы сдвинутся вниз, а не будут перекрываться.

Для обратного действия — клика по одному из пунктов — выделите опцию (например, «Россия»), установите OnClick, выберите «Change to» состояние «Default» и передайте выбранное значение в текст поля (это можно сделать через плагин Variable или вручную при демонстрации).

1. Перейдите в Prototype Mode.
2. Настройте OnClick для поля → переход к Expanded.
3. Настройте OnClick для каждой опции → возврат к Default.
4. Добавьте Smart Animate для плавности.
5. Проверьте поведение в Preview.

Особенности для прототипов и design systems

Если вы создаёте прототип высокой детализации, важно учесть дополнительные состояния: disabled, error, loading. Например, серое поле с серой стрелкой — когда выбор заблокирован. Или красная рамка — при ошибке валидации.

Для design systems рекомендуется добавить параметры:

• Size (Small, Medium, Large)
• Variants (Single-select, Multi-select)
• States (Default, Hover, Focused, Disabled)
• Icon (стрелка, календарь, поиск)

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

Частые ошибки и как их избежать

Одна из самых распространённых ошибок — отсутствие родительского фрейма. Без него невозможно корректно управлять положением списка, и при анимации элементы «прыгают».

Вторая ошибка — игнорирование Auto Layout. Ручное позиционирование приводит к несогласованности при редактировании. Особенно это заметно при локализации: текст «United States» длиннее, чем «Россия», и может вылезти за границы.

Третья — использование разных названий слоёв в вариантах. Smart Animate перестаёт работать, если в одном состоянии есть «List», а в другом — «Dropdown Menu». Называйте слои идентично.

Экспертное мнение

Она отмечает, что многие команды до сих пор используют статичные макеты, хотя даже базовая интерактивность повышает точность обратной связи от заказчиков. «Когда клиент видит, как список открывается и закрывается, он лучше понимает логику продукта. Это снижает количество правок на этапе разработки».

Вопросы и ответы

Заключение

Создание выпадающего списка в Figma — это сочетание визуального дизайна, структуры и прототипирования. Хотя Figma не предоставляет нативного элемента select, возможности Auto Layout, Variants и Smart Animate позволяют реализовать полноценную имитацию поведения.

Главное — соблюдать структуру: общий фрейм, идентичные имена слоёв, использование компонентов и правильные триггеры. Это обеспечит плавную анимацию, масштабируемость и удобство в использовании.

• Всегда используйте родительский фрейм для управления позицией.
• Применяйте Auto Layout для адаптивности и простоты редактирования.
• Настройте Variants для разных состояний (Default, Expanded).
• Используйте Smart Animate для плавных переходов.
• Тестируйте компонент в разных контекстах перед внедрением.