Дизайн-система в Figma. Часть 3: Поля ввода и выпадающие списки
Продолжаю рассказ о компонентах и стилях в figma. На этот раз поговорим о полях ввода, выпадающих списках, чекбоксах, радиобоксах. Перед чтением этой статьи рекомендую ознакомиться с первыми двумя частями:
Часть 1: типографика, цвета и стили
Поля ввода
Вспомогательный компонент 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, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.
