Создание ультимативного инпута в Figma
Привет! Сегодня хотел бы затронуть тему корректного создания компонентов с учетом AL 4.0.
Разговор сегодня пойдет про элемент input, так как этот элемент используется практически в любом дизайне, начиная от лендинга и заканчивая сложными веб-сервисами.
С введение новой верссии AutoLayout, Figma нам очень сильно упростили жизнь. Теперь не нужно создавать элементы с иконкой справа, слева, с лейблом, без и т. д.
Далее скажу, что мы с вами постараемся создать максимально ультимативный инпут, который будет отвечать большинству требований.
Поделим все создание на несколько частей:
P. S. Статья рассчитана на людей, которые уже имеют какой-то опыт работы в фигма и знают, как минимум, что такое «компоненты», «варианты» и т. д.
Подготовка вспомогательных элементов
В инпуте нам будут нужны иконки, которые мы будем менять в зависимости от ситуации. Давайте сделаем компоненты из нескольких иконок, чтобы протестировать финальный результат. Я за основу беру пак Unicons с сервиса icones. js. org. (Отличный сервис, за использование которого разработчки скажут вам спасибо). Иконки с этого ресурса распространяются по “free for commercial use” лицензии.
Берем иконки, делаем компонентами, потом пакуем в варианты.
Построение компонента инпута
Здесь нам нужно понять самое главное правило для создания любого компонента при помощи Auto Layout v. 4. Пихаем в компонент максимальное количество того, что можем напихать. (дальше скроем).
Создаем само поле ввода
- Пишем текст (text color: AAB7C6)
- Shift + A
- Добавить Fill (ffffff)
- Добавить Border (AAB7C6)
- Отступы (По бокам — 16, сверху и снизу — 12)
- Скругления/толщина обводки (border radius: 12, fill width: 1)
- Выбираем у Placeholder значение Fill Container
Добавляем в поле иконки слева и справа
Не забываем, что иконки мы добавляем исключительно из тех вариантов, которые мы сделали на шаге 1.
- Копируем иконку
- Вставляем в наше поле
- Отступы иконки от текста справа и слева по 8px
- Иконка должна быть по высоте равно высоте текста в этом инпуте
Добавляем Label
- Пишем текст (text color: 18212D)
- Выбираем Label и поле
- Shift + A
- Выбираем у Label значение Fill Container
- Отступы от текста до поля — 4px
Добавляем Hint + Иконка
- Пишем текст (text color: 18212D)
- Добавляем иконку (color: 18212D)
- Выбираем два объекта -> Shift + A
- Расстояние между иконкой и текстом — 4px
- Засовываем в общий элемент
- Отступы от подсказки до поля — 4px
- Выбираем у всего автолейаута значение Fill Container
- Выбираем у текста значение Fill Container
Создание instances & properties внутри компонента
Здесь и начинается самое интересное. Тут нам нужно всем изменяемым/скрываемым элементам задать необходимые параметры.
Поделим логически наш компонент на 3 части: лейбл, поле ввода, подсказка. Пойдем сверху вниз.
Лейбл
- Создаем компонент из нашего элемента (cmd+opt/ctrl + K)
- Выделяем Label
- В разделе Layer нажимаем на соответсвующую иконку и задаем наименование нашему контролу. (Show Label)
- В разделе Content нажимаем на соответсвующую иконку и задаем наименование нашему контролу. (Change Label Text)
- Проверяем
Поле ввода
- Выделяем иконку
- В разделе Layer нажимаем на соответствующую иконку и задаем наименование нашему контролу. (Show Right Icon)
- Проверяем
- Выделяем иконку
- В разделе компонента нажимаем на соответствующую иконку и задаем наименование нашему контролу. (Change Right Icon)
Проделываем все тоже самое с другой иконкой.
- В разделе Content нажимаем на соответствующую иконку и задаем наименование нашему контролу. (Change Placeholder Text)
- Проверяем
Подсказка
Выделяем ВСЮ подсказку.
- В разделе Layer задаем наименование (Show Hint)
- Выделяем иконку
- В разделе Layer задаем наименование (Show Hint Icon)
- В разделе компонента задаем наименование (Change Hint Icon)
- Выделяем ТЕКСТ подсказки
- В разделе Layer задаем наименование (Show Hint Text)
- В разделе Content задаем наименование. (Change Hint Text)
- Проверяем
Проверяем элемент на респонсив
На этом этапе нам нужно протыкать еще раз все инстансы и составные элементы и проверить, что везде, где нужно стоит Fill и проверить компонент окончательно.
Создаем варианты
Перед тем как начать создавать варианты нужно переименовать все слои внутри элемента. Так вам будет проще им управлять и править в будущем. А также поменять расположение инстансов и свойств в панели вариантов.
Теперь, когда мы полностью проверили элемент, мы можем создать его комбинации. Мы покажем состояния: hovered, focused, filled, disabled, error. И сделаем инпут поменьше размером.
Шаг 1
- Дублируем мастер-компонент
- Разбираем его (opt + cmd + B)
- Создаем новый мастер компонент (cmd + K)
- Выделяем оба элемента и создаем варианты
- Переименовываем варианты
Шаг 2
- Дублируем исходный элемент
- Меняем цвет обводки на 7D8C9E
- Переименовываем компонент на Hovered
- Дублируем исходный элемент
- Меняем цвет обводки на 3B90F2
- Переименовываем компонент на Focused
- Дублируем исходный элемент
- Меняем цвет обводки на 182737
- Меняем цвет текста на 182737
- и т. д.
Шаг 3
- Дублируем ВСЕ исходные элементы
- Меняем отступы внутри поля ввода на 12 справа и слева и 8 сверху и снизу
- Переименовываем
Шаг 4
- Кликаем на иконку слева, затем на появившийся “прицел”.
- Фигма выделяем все эти иконки. Скрываем их
- Тоже самое проделываем с подсказкой
Вывод
На выходе мы получаем максимально ультимативный компонент, который мы можем использовать в огромном количестве случаев. Можем собрать инпут для дропдауна, можем сделать поле без лейбла, можем дописывать ошибки. В дальнейшем можно пойти еще дальше и создать внутри этого компонента выпадающие списки и тем самым объединить инпут + дропдаун. Но это уже совсем другая история.