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