Система для быстрого создания форм в Figma в стиле Банка Тинькофф

Внешний вид формы взял с сайта Тинькофф Банка. Дизайн копировал не точь-точь. Кое-где другие закругления у полей и расстояния между элементами. В файле не все поля, которые используются на сайте банка. Сейчас есть инпут, выпадающий список, радиокнопки и чекбоксы.

Легко вносить изменения

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

Название цветовых стилей имеют семантику

Для названия цветовых стилей пользовался материалом из статьи https://uxrdsgn. ru/design-tokens/. Из названия стиля понятно, где он используется. Если на продакшене захотим изменить цвет заливки поля в состоянии enabled, то это легко можно сделать и изменить цвет только у одной переменной fill-background-enabled:

Каждое поле ввода — это универсальный блок с настройками

Для каждого поля можно добавить заголовок, подзаголовок и подсказку. Заголовок и подзаголовок относятся не к конкретному полю, а к группе полей. А название поля находится внутри самого поля

Поле ввода трансформируется в выпадающий список, радиокнопки или чекбоксы

Разные состояния поля для input и dropdown

• Enabled — поле доступно для заполнения
• Focus — клик по полю, в поле появился курсор
  
• Typing — процесс заполнение поля с отображением курсора
  
• Complete — заполненное поле
  
• Disable — поле недоступно для заполнения
  
• Error — поле с ошибкой
  
• Error-focus — клик по полю с ошибкой
  
• Hover — состояние, когда над полем навели курсор. Фон поля становится темнее. Так пользователю понятнее, что с этим элементом можно взаимодействовать

Автоматически увеличение поля по высоте

Так поле input визуально превращается в textarea, чтобы вместить весь контент

Поля растягиваются по ширине

При смене состояния, название поля в input и dropdowns смещается вверх, как на реальном сайте

Название поля «Мобильный телефон». А когда поле заполнено название поле поднимается выше

До четырех вариантов выбора для радиокнопок и чекбоксов

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

Состояния:

• on — элемент выбран
• off — элемент не выбран
  
• on_hover — когда на выбранный элемент навели курсор
  

Внутри инпута и выпадающего списка есть доп. настройки

Можно добавить:

• Одну иконку слева
• Две иконки справа
  
• Блок с процентами
  

Все иконки можно заменить на другие через компоненты

Как из ПК версии формы сделать версию для мобильных устройств с разными размерами экранов

Опубликовал исходный файл в сообществе Figma

Ваши комментарии и предложения пишите пожалуйста ниже.