Система для быстрого создания форм в 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
Ваши комментарии и предложения пишите пожалуйста ниже.
Мануал: Как создат фишинг сайт в стиле Тинькова. 😎
ахах, ну не совсем так) Это же просто форма, а не дизайн всего сайта.
Комментарий недоступен
Спасибо
Комментарий недоступен
Если я правильно понял, ты про это http://designsystemsclub.ru/companies/tinkoff
Я смотрел этот файл, но дизайн полей в этом файле Taiga UI немного отличается от того, что сейчас на сайте банка.
Например в Taiga UI поле в состоянии Normal выглядит вот так:
А на сайте банка (https://www.tinkoff.ru/cards/credit-cards/) поля выглядят по другому: есть голубой фон, закругления меньше, не отображается Value