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

Создать выпадающий список в Figma можно двумя основными способами: с помощью компонентов (рекомендуется для реальных проектов) или вручную для прототипирования. Вот подробное руководство.

Создание интерактивного выпадающего списка с помощью компонентов

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

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

Создание элементов списка

1. Поле ввода (триггер): Нарисуйте прямоугольник (R) - это будет поле, по которому кликают. Добавьте иконку шеврона (стрелки вниз) и текст-плейсхолдер, например, "Выберите опцию".
2. Список вариантов: Нарисуйте прямоугольник-контейнер для списка. Внутри создайте несколько прямоугольников поменьше - это варианты выбора (например, "Опция 1", "Опция 2"). Расположите этот список прямо под полем ввода или с наложением.

Превращение в компоненты

1. Выделите поле ввода и нажмите Ctrl/Cmd + Alt + K (или кнопку "Create component"). Это будет главный компонент (триггер).
2. Выделите весь контейнер списка с вариантами и также превратите в компонент (Ctrl/Cmd + Alt + K). Это будет компонент выпадающего списка.

 

Важно: Сразу скройте слой с компонентом списка (глазик в Layers panel). По умолчанию список скрыт.

 

Создание интерактивного прототипа

1. Перейдите на вкладку "Prototype" в правой панели.
2. Выберите ваш поле ввода (триггер).
3. Нажмите на синий значок + (создать connection) и потяните связь на компонент списка.
4. В настройках интеракции выберите:

• Trigger: On Click.
• Action: Open Overlay.
• Animation: Smart Animate (для плавности) или Instant.
• Overlay Position: Укажите положение (часто "Bottom center" или "Manual", чтобы список появлялся прямо под полем).

Теперь настройте закрытие. Для этого выберите фон вне списка (или создайте невидимый Frame поверх всего). Создайте connection от этого фона обратно на триггер:

• Trigger: On Click.
• Action: Close Overlay.

Использование и выбор варианта

Чтобы симулировать выбор, нужно создать варианты состояния триггера. Проще всего:

1. Создайте Text Layer внутри компонента-триггера для отображения выбранного значения.
2. Создайте несколько Variants (вариантов) для этого компонента (правая панель, вкладка "Design", раздел "Component"):

• Базовый вариант: с текстом-плейсхолдером.
• Вариант 1: с текстом "Опция 1".
• Вариант 2: с текстом "Опция 2" и т.д.

 

В прототипе настройте связи от каждого элемента списка к триггеру с действием "Change to" нужного варианта + "Close Overlay".

 

Быстрое создание для демонстрации без компонентов

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

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

1. Создайте два Frame (F): один для состояния "Закрыто", другой для состояния "Открыто".
2. В Frame "Закрыто" нарисуйте поле с текстом и стрелкой.
3. В Frame "Открыто" скопируйте это поле и добавьте под ним список вариантов.
4. Перейдите на вкладку "Prototype".
5. Свяжите поле из состояния "Закрыто" с Frame "Открыто":

• Trigger: On Click.
• Action: Navigate to.
• Animation: Instant (или "Push").

Свяжите любой элемент вне списка в состоянии "Открыто" (или специальную кнопку "Закрыть") с Frame "Закрыто" с действием Navigate Back. Это действие симулирует поведение реального интерфейса, когда клик вне области выпадающего списка приводит к его закрытию, возвращая пользователя к исходному состоянию.

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

Критерий	Способ 1: С компонентами и оверлеем	Способ 2: Навигация между фреймами
Сложность	Средняя/Высокая	Низкая
Переиспользование	Отлично (библиотека компонентов)	Плохо (ручное копирование)
Гибкость	Высокая (можно менять вариант триггера)	Низкая (статичная демонстрация)
Цель использования	Реальный проект, дизайн-система	Быстрый показ идеи, прототип-демка
Обновление дизайна	Централизованно (через главный компонент)	Вручную в каждом фрейме

 

Важные советы и лучшие практики

Вне зависимости от выбранного способа, есть ключевые принципы, которые повысят качество вашей работы. Всегда используйте Auto Layout для поля и элементов списка - это обеспечит автоматическое выравнивание и отступы, что сэкономит вам массу времени при изменении контента.

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

1. Авто-расположение (Auto Layout): Используйте Shift + A для поля и для списка. Это позволит списку автоматически подстраиваться под длину текста и упростит выравнивание.
2. Стили: Заранее определите стили для текста (Paragraph), цвета заливки и обводки (Stroke) для состояний Default, Hover, Pressed.
3. Состояния: Подумайте о разных состояниях элемента: по умолчанию, при наведении (:hover), открытый, отключенный (disabled).
4. Библиотека: Если вы создали выпадающий список как компонент с вариантами, опубликуйте его в библиотеке (Menu › Publish › Publish styles and components), чтобы использовать во всех файлах проекта.

 

Не забывайте про семантику: продублируйте визуальные изменения состояний для вспомогательных технологий, используя соответствующие свойства в панели дизайна.

 

Альтернативный способ с помощью интерактивных компонентов

В Figma появилась мощная функция Interactive Components. Она позволяет создать всю логику открытия/закрытия и выбора внутри одного мастер-компонента.

1. Создайте компонент, внутри которого есть состояния "Closed" и "Opened" как Variants.
2. Во вкладке Prototype настройте переходы между этими вариантами по клику на стрелку.
3. Затем, на основном поле, настройте взаимодействие, которое будет менять варианты (например, клик на "Опция 1" меняет текст в триггере).

Вся интерактивность - открытие, закрытие и даже смена текста - описывается внутри набора вариантов (Variants) главного компонента. Вам больше не нужно создавать отдельные оверлеи и сложные связи между разными фреймами; вся "магия" инкапсулирована в одном переиспользуемом объекте.

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

Вывод

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