Как сделать выпадающий список в figma

Выпадающий список в интерфейсе помогает сократить пространство и упорядочить выбор пользователя. В Figma такой элемент можно собрать вручную, комбинируя фреймы, Auto Layout, Variants и прототипирование. Это позволяет воспроизвести поведение, близкое к рабочему интерфейсу, включая переключение состояний и отображение вариантов.

Для создания списка понадобится базовая кнопка, контейнер с вариантами, два состояния компонента и настройка переходов. Чёткая структура фреймов обеспечивает предсказуемое поведение при смене состояния, а продуманная организация вариантов облегчает дальнейшее обновление интерфейса.

Чтобы избежать проблем с отображением, важно сразу определить размеры элементов, задать направленные отступы и продумать реакцию компонента на клики. Такой подход ускоряет сборку и снижает количество ручных правок при тестировании прототипа.

Подготовка фрейма для размещения выпадающего списка

Для будущего выпадающего списка требуется фрейм с чёткими параметрами, чтобы кнопка и блок с вариантами располагались предсказуемо. Создайте фрейм через инструмент Frame, задайте фиксированную ширину и установите режим Fixed width. Это предотвратит изменение размеров при добавлении вариантов.

Активируйте Auto Layout в вертикальном направлении. Такой порядок позволит корректно скрывать и отображать список в разных состояниях компонента. Укажите отступы по сторонам и зафиксируйте расстояние между элементами, чтобы сохранить стабильную структуру при переключении состояния.

В свойствах Resizing выберите Hug contents по высоте, чтобы фрейм подстраивался под размер открытого списка. Для точного позиционирования установите привязку Left/Top.

Создание базовой кнопки для открытия списка

Кнопка задаёт визуальный триггер для раскрытия списка, поэтому сначала создайте прямоугольник с фиксированной шириной и высотой, например 48 px по высоте. Добавьте текстовый слой с выбранным значением по умолчанию и выровняйте его по центру вертикально.

Включите Auto Layout по горизонтали, чтобы текст и иконка раскрытия удерживали стабильные интервалы. Установите внутренние отступы 12–16 px и выберите режим Fixed width, чтобы кнопка оставалась неизменной при изменении текста.

Добавьте иконку стрелки вниз, размещённую справа, и зафиксируйте расстояние до края. Иконку лучше вынести в отдельный слой, чтобы позже привязать её к Variant-состояниям компонента. После настройки структуры выделите все элементы и создайте компонент, который станет основой для последующих состояний.

Настройка состояний кнопки через Variants

Чтобы кнопка управляла раскрытием списка, создайте компонент и добавьте к нему несколько вариантов. Минимальный набор – состояние с закрытой стрелкой и состояние с повёрнутой стрелкой, сигнализирующей раскрытие.

В панели Variants сформируйте два варианта: «closed» и «open». Для варианта «open» поверните стрелку на 180 градусов и при необходимости измените цвет фона или обводки, чтобы различие было заметным.

• Выделите исходную кнопку и преобразуйте её в компонент.
• Добавьте новый вариант через кнопку Add variant.
• Назначьте свойства: state=closed и state=open.
• В состоянии «open» настройте направление стрелки и корректируйте отступы, если требуется.

После создания вариантов настройте свойство State как переключаемый параметр. Это позволит использовать компонент в прототипировании без вспомогательных групп и лишних элементов.

Формирование списка вариантов внутри компонента

Список должен быть собран в отдельном фрейме, чтобы его можно было скрывать и показывать через состояние компонента. Создайте вертикальный фрейм и активируйте Auto Layout с равномерным интервалом между пунктами. Установите Hug contents по высоте, чтобы размер блока зависел от количества элементов.

Каждый пункт списка оформите как отдельный фрейм с текстовым слоем. Задайте фиксированную высоту, например 36–40 px, и внутренние отступы по горизонтали 12–16 px. Добавьте эффект наведения, если требуется, создав дополнительное Variant-состояние для каждого пункта.

Чтобы список корректно встраивался в общий компонент, поместите его в основной фрейм под кнопкой. Укажите режим Clip content, если открытый список выходит за рамки компонента. Перед созданием состояния «open» убедитесь, что высота списка не ограничена фиксированными параметрами.

Настройка Auto Layout для корректного раскрытия списка

Auto Layout отвечает за правильное выравнивание и динамическое изменение размеров элементов при раскрытии списка. Для вертикального списка установите направление Vertical и включите Hug contents по высоте, чтобы фрейм автоматически подстраивался под количество пунктов.

• Укажите равномерные интервалы между пунктами: 4–8 px для компактных списков, 8–12 px для длинных.
• Добавьте внутренние отступы сверху и снизу 8–12 px, слева и справа 12–16 px.
• Для кнопки и списка объедините их в один фрейм с вертикальным Auto Layout, чтобы при раскрытии блок оставался на месте.
• Включите Clip content, чтобы скрыть элементы списка в закрытом состоянии.
• Проверяйте размеры при разных вариантах текста, чтобы кнопка и список не меняли ширину.

Правильная настройка Auto Layout обеспечивает стабильное поведение компонента при переключении состояний, исключая смещение и деформацию элементов.

Добавление интерактивных переходов в Prototype

Для реализации раскрытия списка в прототипе используйте вкладку Prototype в Figma. Выберите кнопку и соедините её с вариантом компонента «open» через Interaction с типом On Click.

Настройте анимацию: Smart Animate позволяет плавно изменять положение и размер списка. Если список появляется мгновенно, выберите Instant, чтобы избежать визуальных задержек.

Для возврата к закрытому состоянию соедините кликабельную область открытого списка с вариантом «closed». Можно использовать тот же тип события On Click или ограничивать область клика отдельным слоем за пределами списка.

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

Создание варианта с открытым состоянием списка

Для варианта «open» создайте копию компонента кнопки и добавьте внутри фрейма фрейм со списком пунктов. Убедитесь, что фрейм списка расположен под кнопкой и полностью видим при раскрытии.

Настройте Auto Layout для списка с вертикальным направлением и интервалом между пунктами 8–12 px. Включите Hug contents по высоте, чтобы фрейм автоматически подстраивался под количество элементов.

Поверните стрелку кнопки на 180 градусов, чтобы визуально показать открытие. Если необходимо, измените цвет фона или обводки для выделения состояния. Все элементы должны оставаться частью компонента, чтобы Prototype корректно распознавал переходы между вариантами.

Проверяйте вариант «open» в режиме просмотра, убедившись, что список раскрывается полностью, не изменяя ширину кнопки и не перекрывая соседние элементы интерфейса.

Тестирование интерактивного выпадающего списка в прототипе

Запустите режим просмотра прототипа и проверьте работу кнопки: клик должен переключать состояние компонента между «closed» и «open». Убедитесь, что список раскрывается полностью и элементы не смещаются.

Проверяйте плавность анимации при использовании Smart Animate, следите за сохранением отступов и ширины кнопки. Обратите внимание на поведение стрелки и изменение цвета элементов, чтобы визуально отображалось открытие и закрытие списка.

Тестируйте клики по каждому пункту списка и по областям за пределами компонента, если задано закрытие при клике вне списка. При необходимости корректируйте Auto Layout, интервалы и внутренние отступы для устранения смещения и наложения элементов.

Вопрос-ответ:

Как создать базовую кнопку для выпадающего списка в Figma?

Для создания кнопки сначала нарисуйте прямоугольник с фиксированной шириной, обычно 240–320 px, и высотой около 48 px. Добавьте текстовое поле с выбранным значением и выровняйте его по центру вертикально. Включите Auto Layout по горизонтали, чтобы текст и иконка стрелки оставались на одинаковом расстоянии. Затем вынесите стрелку в отдельный слой и создайте из всей структуры компонент, который станет основой для вариантов состояния.

Как настроить состояния кнопки через Variants?

Создайте компонент кнопки и добавьте к нему два варианта: «closed» и «open». В варианте «open» поверните стрелку на 180 градусов и при необходимости измените цвет фона или обводки. Используйте свойство State для переключения между вариантами. Это позволит кнопке управлять раскрытием списка при клике в прототипе без добавления лишних слоёв или групп.

Как формировать список вариантов внутри компонента?

Создайте вертикальный фрейм внутри компонента кнопки и активируйте Auto Layout с вертикальным направлением. Каждый пункт списка оформите отдельным фреймом с текстом, высотой 36–40 px и внутренними отступами 12–16 px. Для интерактивности можно добавить Variant-состояния с эффектом наведения. Включите Clip content на основном фрейме, чтобы скрывать список в закрытом состоянии и корректно отображать его при открытии.

Какие настройки Auto Layout важны для раскрывающегося списка?

Выберите вертикальное направление для фрейма со списком и включите Hug contents по высоте, чтобы размер блока зависел от количества элементов. Задайте равномерные интервалы между пунктами 8–12 px и внутренние отступы сверху и снизу 8–12 px, слева и справа 12–16 px. Объедините кнопку и список в один фрейм с вертикальным Auto Layout, чтобы при раскрытии компонента элементы оставались на месте. Включение Clip content поможет скрывать элементы в закрытом состоянии.

Как проверить работу интерактивного выпадающего списка в прототипе?

Запустите режим просмотра прототипа и кликните по кнопке. Состояние компонента должно переключаться между «closed» и «open», раскрывая список. Убедитесь, что стрелка поворачивается, список полностью виден, а элементы не смещаются. Проверьте клики по каждому пункту списка и по областям вне компонента, если предусмотрено закрытие списка при клике за его пределами. При необходимости скорректируйте Auto Layout и отступы для устранения смещений.

Как сделать так, чтобы выпадающий список корректно отображался при изменении количества пунктов?

Для автоматической подстройки высоты списка используйте Auto Layout с направлением Vertical и включённой опцией Hug contents по высоте. Каждый пункт оформляйте отдельным фреймом с фиксированной высотой и внутренними отступами. Это обеспечит одинаковое расстояние между элементами и предотвратит смещение кнопки или соседних элементов при добавлении новых вариантов.

Можно ли в Figma сделать интерактивный список с кликабельными пунктами?

Да, для этого создайте Variant для каждого состояния пункта при наведении или клике. Соедините каждый пункт с нужным действием в Prototype через On Click. При этом основная кнопка остаётся частью компонента, а список раскрывается и закрывается корректно, сохраняя заданные отступы и размеры. Такая настройка позволяет тестировать поведение списка без использования сторонних плагинов.