Создание ультимативного инпута в Figma

Привет! Сегодня хотел бы затронуть тему корректного создания компонентов с учетом AL 4.0.

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

С введение новой верссии AutoLayout, Figma нам очень сильно упростили жизнь. Теперь не нужно создавать элементы с иконкой справа, слева, с лейблом, без и т. д.

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

Поделим все создание на несколько частей:

• Подготовка вспомогательных элементов (иконки)
• Построение компонента инпута
• Создание instances & properties внутри компонента
• Проверка элемента на responsive
• Создание вариантов (состояния компонента, размеры)

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
  

Здесь и начинается самое интересное. Тут нам нужно всем изменяемым/скрываемым элементам задать необходимые параметры.

Поделим логически наш компонент на 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

• Кликаем на иконку слева, затем на появившийся “прицел”.
• Фигма выделяем все эти иконки. Скрываем их
• Тоже самое проделываем с подсказкой

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