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

Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

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

Повторяющаяся структура

Итак, что из себя представляет мультикомпонент? МК — это компонент, состоящий из некоторого множества повторяющихся вложенных элементов, который можно масштабировать простым ресайзом высоты, ширины или по двум осям сразу. Давайте рассмотрим на примере. Почти в каждом интерфейсе можно встретить выпадающий список. Если вы фрилансер, держу пари таких списков было разработано вами предостаточно. Каждый раз вы создавали сначала элемент списка, затем вы определяли размерность списка (кол-во элементов по высоте), клонировали и позиционировали каждую строку друг под другом, потом объединяли в группу или фрейм, заменяли текст; и использовали такой компонент, чтобы продемонстрировать action по клику на выпадающий список. Вы осознаете, что это рутина?

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

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Идея MК в структуре размноженных идентичных компонентах, обрезании заступов за область фрейма (clip content) и расставленных параметров ресайзинга в зависимости от направления масштабирования (constraints). Когда вы ресайзите границу фрейма — вы определяете нужный состав будущего модуля в дизайне. Количество вложенных компонентов должно быть настолько велико, чтобы складывалось впечатление бесконечной высоты или ширины. На самом деле вы редко встретите слишком много пунктов для выбора в простом выпадающем списке. Поэтому при создании МСО предел вложенных компонентов может быть ограничен, к примеру, высотой или шириной экрана.

Полуавтоматизация дизайн-процессов

Сейчас автоматизация шагает по миру. Если когда-нибудь в будущем автоматизируют UI дизайн / прототипирование, то мы с вами скорее всего останемся без работы. Если мы начнем думать уже сейчас как автоматизировать собственные рабочие процессы — это поможет нам решать больше задач за один рабочий час. И тут на сцену выходят мультикомпоненты, чтобы уже сейчас ускорить дизайн-процессы.

Примеры

Мультикомпонент для списков

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

Состав такого МК очень простой:

1. создаем мастер-компонент в Фигме с элементом списка
2. задаем все размерности и отступы (в моем случае по 8dp сетке)
3. клонируем элементы списка друг под другом до необходимой высоты
4. создаем новый компонент из размноженных фрагментов
5. расставляем правила реакции на ресайз (constraints) → по оси X «Top», по оси Y выбираем «Scale»
6. отмечаем чекбокс «Clip content»

Мультикомпоненты для табов

Табы это прекрасная категория, чтобы создать в ней гибкий МСО. В этом случае нас интересует масштабируемость по оси Х, так как табы горизонтальны. Увы, Figma не позволяет двигать объекты внутри подчиненного компонента, поэтому оптимально иметь в библиотеке несколько вариантов размерностей для Табов:

Мультикомпоненты для таблиц

Таблицы более сложны, т.к. должны масштабироваться по оси Y до нужного количества строк, а по оси Х до нужного кол-ва колонок. Поэтому конструктор таблиц состоит из двух независимых МК. Сначала вы формируете нужное кол-во строк модулем Table Base, а затем накладываете сверху модуль Multicolumn и задаете ему аналогичную высоту:

В данный момент я сосредоточен на разработке и развитии material дизайн-системы в Figma. Совсем недавно вышла версия 1.3, в которой уже используются мультикомпоненты и проработано более чем 240+ стандартных UI элементов. Этот продукт действительно ускорит вашу дизайн-работу, если Вы работаете с графикой. Он безусловно будет интересен и разработчикам, так как позволяет собирать «боевые» прототипы без навыков дизайна. Вы также можете использовать её как основу для Вашей собственной дизайн-системы и объединить несколько продуктов в среде Фигмы. Смотрите как она работает:

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

• Веб-разработка
• Разработка мобильных приложений
• Интерфейсы
• Управление разработкой
• Управление проектами

Раскрывающийся список Select

Раскрывающийся список позволяет выбрать значение из заранее известного набора вариантов.

Когда использовать

Используйте раскрывающийся список для выбора одного значения из 5–25 вариантов:

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

Если значений в списке до 5, лучше использовать группу радиокнопок или переключатель. Если значений больше 25 — используйте комбобокс.

Описание работы

При нажатии на кнопку раскрывающегося списка появляется список вариантов для выбора. После выбора одного из вариантов, его название подставляется в кнопку, список скрывается, размеры кнопки при этом остаются прежними.

Список вариантов при появлении не блокирует страницу и не мешает пользователю нажимать на другие контролы и ссылки. Список скрывается при клике за его пределами и при повторном клике по кнопке. В этом случае значение раскрывающегося списка не меняется.

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

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

Чтобы пользователь мог отменить выбор, добавьте в список соответствующий пункт. Например, «Все», «Любой», «Неважно». Отделите такой пункт линией.

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

Название

Название кнопки и списка вариантов пишут с заглавной буквы и формулируют так, чтобы:

• было понятно, что можно выбрать только 1 вариант;
• названия не содержали повторяющуюся часть;
• название кнопки не дублировалось в пунктах списка.

В названии нельзя использовать слова «Выберите», «Укажите» и т. д.

Размер и расположение

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

Если выбранное значение не помещается, появляется многоточие:

Ширина списка должна быть не меньше ширины кнопки. Красиво, когда список шире кнопки на 30−40 px.

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

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

Список раскрывается вниз. Минимальная высота списка со скроллингом 200 px. При наличии места список стремится отобразить максимум вариантов и расширяется до высоты 450 px. Исключение — если раскрывающийся список находится на панели, закрепленной у нижней границы окна. В таком случае он открывается вверх.

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

Фокус и работа с клавиатурой

Раскрывающийся список получает фокус только при переходе табом —появляется чёрная рамка. При клике фокусная рамка не появляется.

В свернутом состоянии кнопки Enter и ↓ раскрывают список и перемещают синюю подсветку на первый пункт в списке.

В развернутом состоянии кнопки ↑ и ↓ перемещают синюю подсветку, а клавиша Enter выбирает подсвеченную строку. После этого фокус переходит на следующий контрол.

Валидация

Блокируйте или убирайте из списка варианты, выбор которых приведет к ошибке. Таким образом, валидация понадобится только для проверки на обязательность выбора.

Дизайн

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

Текст выравнивается по левому краю. По правому краю — иконка стрелки&nbsp из библиотеки интерфейсных иконок.

Выпадающий блок раскрытого списка имеет тень.

В момент нажатия:

В списке выбранный вариант выделяется серым фоном, фон пункта под курсором — светло-серым.

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

Пункты списка можно дополнять пояснениями — серым текстом.

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

Адаптивность

Список раскрывается на всю ширину экрана с отступами 24px от левого и правого края, и 40px от верхнего.

Вверху списка всегда располагается заголовок.

Высота списка зависит от количества пунктов внутри него. При большом количестве пунктов, список сохраняет отступ в 40px от верхнего края экрана.

Список всегда скроллится вместе с заголовком, поиском и футером, даже если они добавлены в него как залипающие элементы для десктопной версии.

Если список длинный, и не входит в видимую часть экрана — то он скроллится до крайнего положения с отступом в 80px от нижней части.

Поиск

При наличии поля поиска, раскрытие списка автоматически ставит фокус в это поле.

При вводе в поле поиска список фильтруется, количество пунктов уменьшается, сокращая высоту списка.

Анимируем выпадающий список в Figma ��

Анимируем список в Figma �� Как сделать анимацию выпадающего списка в фигме за 30 секунд?���� __ �� Создаем фрейм �� Добавляем логотип и элементы �� Добавляем список �� С помощью клавишы K уменьшаем блоки ➖ Добавляем отрицательный отступ �� Меняем очередность элементов �� Уменьшаем непрозрачность до нуля �� Добавляем и перетаскиваем элементы �� Дублируем фрейм �� Перемещаем наш список и возвращаем непрозрачность и размер �� Связываем в Prototype и выбираем Smart Animate с эффектом Slow 800 мс �� Повторяем для обратной анимации с эффектом Slow 400 мс

Показать больше

Войдите , чтобы оставлять комментарии

Дизайн-система в Figma. Часть 3: Поля ввода и выпадающие списки

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

Поля ввода

Вспомогательный компонент form_stroke

Для начала я создам вспомогательный компонент, который будет содержать в себе стиль оформления самого прямоугольника формы ввода. У меня это будет обычный прямоугольник со сругленными углами, с заданными параметрами заливки и обводки. Constraints я назначаю left+right и top+bottom. Компонент я назвала form_stroke.

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

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

Итак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.

Активность по табу и ошибочное состояние базового компонента

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

Поле ввода

Давайте подумаем, какие объекты, помимо компонента form_stroke, нам понадобятся, чтобы передать все состояния нашей формы ввода:

• Отдельный текстовый слой с названием формы
• Отдельный текстовый слой для вводимого текста
• Текст ошибки

Все эти элементы могут располагаться по-разному. Например, название формы может быть как сверху основного поля, так и прямо внутри. Оно может скрываться при попытке ввести текст, а может оставаться, а текст вводиться уже правее названия. Текст ошибки также может располагаться по-разному — сверху, справа и т.д.

Итак, нам необходимо создать новый компонент, в который будет вложен наш компонент form_stroke и все перечисленные выше объекты.

Располагаем наши объекты в нужных местах. Не забываем настраивать constraints. Например вводимый текст в форме и компонент form_stroke имеют настройки left+right и top+bottom. Название и ошибка формы всегда в моем случае привязаны к верхнему краю.

А вот так легко можно менять состояние ошибки и активность поля ввода:

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

Выпадающие списки

Базовое состояние

Итак, простая форма ввода готова. Теперь я хочу расширить ее до выпадающего списка.

Cправа у выпадающих списков есть треугольник, либо галочка, которая намекает на то, что тут можно что-либо раскрыть. В нашей библиотеке уже есть иконка галочки, но она белая. Создадим еще один экземпляр компонента этой иконки, перекрасим иконку в нужный цвет и снова запакуем в компонент (можно в принципе и не запаковывать, а перекрасить уже внутри формы, это уже вопрос кому как удобнее)

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

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

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

Итак, я беру иконку и вставляю ее внутрь компонента формы. Настраиваю Constraints: left+right и top+bottom, чтобы вложенный компонент масштабировался вместе с выпадающим списком.

Открытое состояние

Теперь нарисуем открытое состояние выпадающего списка.

Для этого создаем вот такой компонент:

В этом компоненте у меня находится текстовый слой с выравниванием left+right и top+bottom, текст в нем всегда выровнен по левому краю и по-цетру относительно вертикали. А также линия с выравниванием left+right и bottom, которая всегда привязана к нижнему краю компонента.

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

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

Теперь из экземпляров этого компонента собираем такую конструкцию:

Чтобы быстро выровнять их друг под другом, удобно использовать Auto Layout.

Затем всю эту конструкцию мы помещаем поверх компонента нашей плашки, которую мы рисовали в самой первой статье.

Запаковываем все в один компонент. Для плашки настраиваем constraints: left+right, top+bottom.

Для каждого внутреннего элемента списка Auto Layout в левой панели должна быть выбрана такая опция:

Для всего списка Auto Layout выделяем иконку fixed width:

И ставим всему списку constraints: left+right, top.

Таким образом мы задали масштабирование нашей выпадушки по-горизонтали.

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

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

Помещаем экземпляр прокрутки в новый компонент списка. Настраиваем constraints: right, top+bottom.

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

Не забываем настроить constraints. В моем случае это настраиваем constraints: left+right, bottom — т.е. в ширину выпадушка масштабируется вместе с полем ввода, а по высоте она всегда привязана к низу компонента.

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

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

В итоге у нас получился вот такой набор состояний для полей ввода и выпадающих списков:

Можно оставить как есть, а можно все состояния запаковать в отдельные компоненты, назначить одинаковые имена, начинающиеся с form и управлять ими уже при помощи instance в правой панели фигмы.

Чекбокс/радиобокс

Мы закончили с компонентом для полей ввода и выпадушек. Теперь создадим новый компонент для чекбоксов и радиобоксов. Я также решила объединить их в один компонент для удобства использования.

Нам нужно создать 4 состояния:

• чекбокс активен
• чекбокс неактивен
• радиобокс активен
• радиобокс неактивен

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

Все 4 иконки я переименовываю по одному правилу через слеш, чтобы потом было удобно менять их в компоненте чекбокса-радиобокса. фигма определить общуя часть названия и при изменении instance иконки поставить эти значения в список

Теперь создаем экземпляр активной иконки чекбокса и подставляем к ней текст. Запаковываем все это в новый компонент. Настраиваем параметры и constraints для текста:

Для иконки constraints ставим left и center.

Компонент готов, теперь подменяя иконку, благодаря правильному именованию, мы легко получаем различные состояния объекта:

Вот какие состояния получились в итоге:

Запакуем также эти состояния в отдельные компоненты и дадим им имена начинающиеся на form/, объединив их таким образом в одну группу с полями ввода и выпадающими списками. Так будет удобнее настраивать всевозмодные страницы с большим количеством разных форм.

В итоге мы получим вот такой набор компонентов:

Кстати, одинаковое именование компонентов также группирует их в общем списке в левой панели figma:

Это тоже очень удобно для генерации страниц.

Итог

В итоге мы получили гибкий набор настраиваемых компонентов, стили и внешний вид которых можно удобно менять буквально в пару кликов

Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом �� (кстати, клапснуть можно несколько раз).

• Часть 1: типографика, цвета и стили
• Часть 2: Кнопки

• Часть 4: Поиск и умный поиск
• Часть 5: Списки и Auto Layout

Принимаю ваши пожелания, какие новые компоненты можно отразить в нашей дизайн-системе. Буду также рада услышать ваше мнение, как подобные штуки реализуете вы.

Behance — мои лучшие работы

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.

Instagram