Челлендж
В большинстве библиотек состояние показывают отдельными элементами: бейджами, спиннерами, полосками. Мне захотелось попробовать по-другому, чтобы это показывал сам текст и анимация. Например, чем надёжнее пароль, тем жирнее шрифт. И чтобы из этого можно было собрать настоящий интерфейс, а не только посмотреть.
Процесс
Сначала сделал 59 концептов на одной идее. Например, у слайдера значение показывает толщина цифры, а надёжность пароля — жирность шрифта, без полоски под полем. Потом перенёс всё в React-библиотеку на токенах и сделал к ней студию.
Что обнаружилось
- Легко начать анимировать всё подряд. Поэтому для каждой анимации я спрашивал себя, что из неё понятно человеку. Если ничего, убирал.
- Дизайнеры не читают документацию. Им надо сначала потрогать компонент, а уже потом смотреть свойства.
- На цветном стекле плохо читается текст, а подбирать 14 цветов темы руками долго.
Ключевые решения
- Превью на первом месте. Наверху живой компонент, свойства выезжают по кнопке «Настроить», документация в самом низу.
- Что настроил, то и копируешь. Код TSX собирается из текущих свойств, рядом CSS и JSON темы.
- Тема из одного цвета. Задаёшь основной цвет, остальное подбирается само для светлой и тёмной темы, контраст проверяется сразу.
- Одна кривая анимации на всё. Все компоненты двигаются одинаково, поэтому интерфейс выглядит собранным.
Результат
74 компонента, 9 готовых тем, 8 анимированных фонов и экспорт кода. Студия на русском и английском, контраст проверен в светлой и тёмной теме.
Знакомые дизайнеры уже посмотрели. Дальше хочу выложить библиотеку в npm и посмотреть, как ей пользуются в реальных проектах.
