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

P. S. Статья рассчитана на людей, которые уже имеют какой-то опыт работы в фигма и знают, как минимум, что такое «компоненты», «варианты» и т. д.

3232
11

Автор молодец, но

Инпут не ультимативный как минимум из-за того, что нет мастера и придётся редактировать все варианты.

Если у вас есть разные инпуты: поиск, текст, почта с маской, числовой и тд — вы запаритесь редактировать все.

Да и настраивать каждый раз с дефолтного на, например, поиск, надоест) имхо

1. Ресайз не должен переносить текст на новую строку. Так никто не делает
2. Иконки все в одном компоненте. Зачем свойство Boolean тогда?
3. В инпутах бывает сброс (крестик). Как сделаете? Иконкой? Иконка - не интерактивный элемент
4. Лейбл и хелпер - такие же компоненты

я уж не говорю про то, что не хватает состояний и интерактивности

Сори, не ультимативно, но основы сборки поданы хорошо. Лайк

4
Ответить

Раньше я всегда собирал отдельно .base компонент для редактирования, но по опыту буквально 1-2 раза за все время мне пришлось его отредактировать. Поэтому я и отказался от этого.

1) Ресайз, да, должен скрывать текст. Не отписал тут этот момент.
2) Да, иконки нельзя никогда хранить в вариантах. Я просто обернул их, чтобы показать, что они компоненты, а не просто валяются. Но это ввело в заблуждение, учту:)

Состояния в макете есть:) Интерактивность просто решил не описывать тут.

Спасибо за отклик:)

Ответить