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

В Figma выпадающий список создаётся не через встроенный UI-элемент, а с помощью компонентов, вариантов и взаимодействий. Это позволяет дизайнерам имитировать поведение реального интерфейса для прототипирования.

Что такое выпадающий список в Figma: миф и реальность

Figma — это инструмент визуального проектирования, а не полноценная среда разработки. Здесь нет нативного элемента «выпадающий список», как в HTML или React. Вместо этого дизайнеры моделируют его поведение с помощью компонентов, фреймов и прототипных связей. Такой подход даёт полный контроль над анимацией, внешним видом и логикой переключения состояний.

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

Представьте, что вы проектируете форму заказа билетов. Пользователь выбирает направление: Москва → Санкт-Петербург, Москва → Казань и т.д. Чтобы смоделировать этот процесс, нужно создать компонент, который будет переключаться между состояниями: «по умолчанию», «раскрыт», «с выбранным значением». Именно так работает реальный интерфейс, и именно так его нужно воспроизвести в прототипе.

Основные этапы создания выпадающего списка

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

1. Подготовьте базовую структуру: создайте фрейм для всего списка и определите его размеры.
2. Спроектируйте состояние «по умолчанию» — это будет основной блок с текстом (например, «Выберите город»).
3. Создайте фрейм со списком опций — он изначально скрыт.
4. Превратите оба фрейма в компоненты и свяжите их как варианты одного компонента.
5. Настройте взаимодействия: клик по основному блоку должен переключать на раскрытый вариант.
6. Добавьте обратные действия: выбор пункта в списке возвращает к основному состоянию с новым значением.
7. Проверьте прототип в режиме презентации.

Каждый шаг требует внимания к деталям. Например, если не задать правильные привязки (constraints) внутри фреймов, при изменении ширины компонент может «поехать». Или если забыть активировать переключение состояний через «Smart Animate», анимация будет резкой и неестественной.

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

Начните с прямоугольника — это будет ваш основной блок. Добавьте внутрь текст, иконку стрелки вниз. Затем создайте второй фрейм — список с 3–5 пунктов. Расположите его под первым, выровняйте по горизонтали. Убедитесь, что оба фрейма имеют одинаковую ширину.

Шаг 2: Работа с Auto Layout

Примените Auto Layout к каждому фрейму. Это обеспечит гибкость: при изменении текста блок автоматически подстроится. Для списка добавьте padding и gap между пунктами. Используйте одинаковые стили текста — это важно для консистентности.

Шаг 3: Превращение в компоненты

Выделите первый фрейм, нажмите Ctrl+Alt+K (или Cmd+Option+K на Mac) — он станет компонентом. То же самое сделайте со вторым. Затем перейдите в панель «Assets» и перетащите один компонент на другой — они станут вариантами одного набора.

Работа с компонентами и вариантами: ключ к успеху

Без понимания системы компонентов и вариантов невозможно эффективно работать в Figma. Компонент — это переиспользуемый элемент. Вариант — его конкретное состояние. В случае с выпадающим списком у вас будет минимум два состояния: закрытое и открытое.

Для корректной работы важно задать параметры вариантов. В Figma есть три типа параметров: Type (тип), Name (имя) и Visibility (видимость). В нашем случае используется параметр Type. Например, можно назвать состояния: «Default», «Expanded».

Такая таблица помогает контролировать изменения. Если вы решите изменить высоту пункта списка, вы сразу увидите, как это повлияет на общую высоту раскрытого состояния.

Как связать варианты правильно

После создания двух компонентов щёлкните правой кнопкой по одному из них в панели Assets и выберите «Create component from selection». Затем, выделив второй компонент, перетащите его на первый — появится иконка «Add variant». Теперь в правой панели Properties вы можете задать значения параметров.

Убедитесь, что оба варианта имеют одинаковые параметры. Если в одном есть Type, а в другом — нет, Figma не позволит их объединить. Также проверьте, чтобы оба фрейма были одного уровня вложенности — без лишних группировок.

Использование главного компонента

После объединения появляется главный компонент (master component). Все экземпляры, которые вы будете вставлять в дизайн, будут брать данные отсюда. Вы можете переключать состояния прямо в макете — удобно для демонстрации клиенту.

Настройка взаимодействий для прототипа

Теперь, когда компонент готов, пора оживить его. Перейдите во вкладку Prototype. Выделите фрейм «Default» и создайте связь: On Click → Navigate to → Expanded. Убедитесь, что выбрано «Smart Animate» с продолжительностью 200–300 мс.

Для обратного действия: выделите каждый пункт в раскрытом списке, настройте On Click → Navigate to → Default. При этом вы можете изменить текст в основном блоке, чтобы отразить выбор. Это делается вручную: после перехода вы редактируете текст в экземпляре.

Анимация открытия и закрытия

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

• Если фреймы имеют разную высоту, Figma растянет один до другого.
• Если текст меняется, анимация текста возможна только при совпадении количества символов.
• Иконка стрелки должна быть отдельным слоем, чтобы её можно было анимировать независимо.

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

Обработка выбора значения

Figma не хранит состояние «выбрано». Поэтому после клика на пункт вы должны вручную изменить текст в основном блоке. Есть два способа:

1. Создать дополнительные варианты: «Выбрано: Москва», «Выбрано: СПб» и т.д. Подходит для малого числа опций.
2. Использовать плагины, например, «Variables» (бета-функция), чтобы динамически менять текст.

Первый способ надёжнее, второй — современнее, но требует знаний новых инструментов Figma.

Ошибки, которые нельзя допускать

Даже опытные дизайнеры совершают типичные ошибки при создании выпадающих списков в Figma. Они не критичны, но могут замедлить работу, усложнить передачу макетов разработчикам или испортить пользовательский опыт в прототипе.

Ошибка 1: Неправильная иерархия фреймов

Если компоненты вложены в группы или лишние фреймы, Figma не сможет корректно анимировать переходы. Smart Animate работает только между одноуровневыми фреймами с одинаковой структурой.

Ошибка 2: Отсутствие Auto Layout

Без Auto Layout при изменении текста компонент теряет пропорции. А в прототипе это выглядит как «прыгающий» интерфейс. Всегда применяйте Auto Layout к кнопкам, полям и спискам.

Ошибка 3: Игнорирование доступности

Многие забывают про контраст текста, размер касаемых зон (минимум 44×44 px), а также альтернативные способы навигации. Хотя Figma не проверяет доступность автоматически, это важно для реальных продуктов.

Ошибка 4: Слишком сложная логика

Попытка смоделировать всё — поиск, фильтрацию, множественный выбор — приводит к запутанной структуре. Лучше начать с простого: один выбор, без поиска. Добавляйте сложность постепенно.

Практический контент с примерами

Давайте создадим реальный пример: выпадающий список для выбора страны доставки. Шаг за шагом, с акцентом на читабельность и точность.

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

• Создайте фрейм 320×48 px — это поле ввода.
• Добавьте текст «Страна доставки» и иконку стрелки справа.
• Ниже — фрейм 320×128 px (4 пункта × 32 px).
• Заполните: Россия, Казахстан, Беларусь, Армения.

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

• Примените Auto Layout к обоим фреймам.
• Превратите в компоненты.
• Объедините как варианты с параметром Type: Default / Expanded.

Шаг 3: Прототип

• Default → On Click → Expanded (Smart Animate, 250 ms).
• Каждый пункт в списке → On Click → Default + изменение текста.
• Добавьте Overlay для затемнения фона (опционально).

Пример использования в форме

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

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

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

Он также отмечает: «Используйте выпадающие списки умеренно. Исследования Nielsen Norman Group показывают, что пользователи тратят в среднем на 30% больше времени при работе с ними по сравнению с радиокнопками, особенно на мобильных устройствах.»

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

• Можно ли сделать выпадающий список с поиском?

  Да, но это сложнее. Нужно смоделировать поле ввода внутри раскрытого состояния и добавить фильтрацию через скрытие слоёв. Полноценный поиск требует Variables или сторонних плагинов. Для MVP достаточно показать, как список реагирует на ввод.

• Как передать поведение разработчику?

  Используйте раздел Dev Mode. Добавьте комментарии к компоненту: «Переключается между Default и Expanded по клику. Высота изменяется плавно. При выборе пункта текст в поле обновляется.» Также экспортируйте все состояния и укажите, какие свойства анимируются.

• Поддерживает ли Figma мультиселект в списках?

  Напрямую — нет. Но можно создать компонент с несколькими состояниями: «Без выбора», «Выбран 1», «Выбраны 2» и т.д. Каждое состояние — отдельный вариант. При клике по пункту происходит переход к соответствующему варианту.

• Что делать, если список длинный?

  Ограничьте видимые пункты (например, 5) и добавьте прокрутку через маску (masking). Создайте фрейм с overflow: hidden и поместите внутрь более высокий список. В прототипе это будет выглядеть как прокручиваемая область.

Заключение

Создание выпадающего списка в Figma — это не просто техническая задача, а демонстрация понимания принципов интерактивного дизайна. Хотя инструмент не предлагает нативных селектов, он даёт гибкие средства для их имитации: компоненты, варианты, взаимодействия и анимации.

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

• Используйте компоненты с вариантами для создания разных состояний.
• Настройте взаимодействия через On Click и Smart Animate.
• Применяйте Auto Layout для адаптивности.
• Избегайте избыточной сложности — фокус на ясности.
• Передавайте разработчикам чёткие инструкции через Dev Mode.