КАК В ФИГМЕ СДЕЛАТЬ ВЫПАДАЮЩИЙ СПИСОК
Чтобы создать выпадающий список в Figma, нужно использовать специальный компонент «Dropdown».
1. Выберите инструмент «Rectangle» и нарисуйте прямоугольник, который будет служить кнопкой или заголовком списка.
2. Выделите этот прямоугольник и в панели свойств справа выберите «Component» и нажмите «Create Component».
3. Создайте еще один прямоугольник, который будет служить контейнером для выпадающего списка. Здесь же можно разместить элементы списка.
Дизайн-система в 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:
Это тоже очень удобно для генерации страниц.
В итоге мы получили гибкий набор настраиваемых компонентов, стили и внешний вид которых можно удобно менять буквально в пару кликов
Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом �� (кстати, клапснуть можно несколько раз).
Принимаю ваши пожелания, какие новые компоненты можно отразить в нашей дизайн-системе. Буду также рада услышать ваше мнение, как подобные штуки реализуете вы.
Behance — мои лучшие работы
Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.
How to Create Dropdown Components on Figma
For example, if you have a list that contains all the documents of a certain type, you can then separate them into different dropdowns.
This makes it easier for the user to select an option. Because there are more manageable lists of options to select from, instead of one long list.
You can use dropdowns for many different purposes, including: command menus, navigation menus, form filling, and attribute selection.
Check out the below interaction for the dropdown component I made in Figma:
And here is the Figma design:
As you can see at the first interaction preview is a language switcher.
You can hover it to show the dropdown list. Then, if you click to select, it will change to the other variation of the components. If you select again, it will change back again.
Here is what the prototype looks like:
For the second dropdown, I created a clickable component as an example. This type of dropdown is usually used for <select> form components as input.
You can see here for the interaction flow:
There are two components in this clickable dropdown, I created the Menu List Item is for the hover interactions.
You can just focus on the simple flow on the top, which only has two interactions: the first is to show the dropdown when it clicked and the other one is for hiding it.
So, this is a simple and quick way to create a dropdown, and we hope this is useful to you. If you’d like to learn more about Figma or want to make a suggestion, you can contact me in the form below to tell me about what you would like to learn or create on Figma. Thanks for reading!
Меню в фигма: как сделать выпадающее меню с анимацией
Разбираемся как сделать выпадающее меню в программе фигма (Figma). Делаем простую анимацию меню на реальном примере.
Как сделать выпадающее меню в фигме
Предварительно вам нужно нарисовать меню «гамбургер» и отдельный фрейм с тем меню, которое будет выезжать. Туда можно поместить ссылки, логотип и название компании, номер телефона и т.д.
Чтобы сделать выпадающее меню в фигме при клике, выберите его в вашем дизайн макете нажав на левую клавиши мыши. Перейдите во вкладку «Prototype». Сделайте связь между меню «Гамбургер» и этим фреймом, где будут ссылки и т.д.
Теперь нужно настроить анимацию следующим образом.
Делаем, чтобы меню появлялось при нажатии. Для этого в списке должно стоять «On click». Вместо надписи «Navigate to» поставьте «Open overlay».
Внизу надписи «Overlay» поставьте значение «Top right», если хотите чтобы меню в фигма появлялось справа. Рекомендую поставить галочку напротив надписи «Close when clicking outside». Это означает, что меню будет закрываться, если нажать на область, которая находится вне этого меню.
Если нужно, то можете изменить цвет затемнения. По умолчанию он черный 000000. Прозрачность затемнения я ставлю на 25%.
Параметры анимации меню — move in, стрелка налево, Ease out, 300 ms.
Аналогичную операцию следует проделать с другими разрешениями, которые есть в вашем проекте.
Чтобы сделать закрытие меню при нажатии на крест в нём, выберите крестик внутри фрейма меню, перейдите во вкладку «Prototype» и нажмите на плюс напротив надписи «Interactions».
Затем вместо значения «None» из списка выберите «Close overlay». При нажатии на этот крест меню будет закрываться.
Чтобы посмотреть анимацию меню, нажмите на кнопку «Present», сверху справа.