Когда я пришел на биржу, первым делом увидел устаревшую структуру компонентов. Возможно, когда-то она работала, но индустрия ушла вперед. Я показал команде несколько крупных публичных дизайн-систем — Uber, Ant, Контур и стало понятно: нужна переделка структуры и рефакторинг компонентов.

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

Начал с ресерча. Проанализировал больше 20 дизайн-систем, чтобы понять, как устроены лучшие. В итоге, я создал новые группы компонентов и перекидал файлы (компоненты) по этим новым группам. Снаружи ничего не изменилось — ссылки остались прежними. Внутри — полностью новая структура.

Переименование файлов прошло быстро. Большинство компонентов назывались по классике — input, button. Из фишечек: я добавил префикс ❖ (символ) в название файла. Для компонента это такой, для других библиотек свои (✦ Tokens, ✶ Effects и т.д.). Это помогло быстрее отсеивать глазами компоненты от стилей/шрифтов/организмов в списке Assets.

А вот нейминг пропсов потребовал больше внимания. Раньше был хаос. По сути, я работал уже над третьей версией системы, и тянулось много легаси. Один хвост отрубишь — три новых появятся.

Навел порядок:

• Если в компоненте есть лейбл, он называется Edit label (по аналогии — Edit caption text, Edit placeholder, Edit title).
• Логические группы вынес в настройки и разделил линией. Дело в том, что иногда внутри компонента есть вложенные компоненты — например, в Collapse живёт Button со своими пропсами. Теперь такие кейсы отделены друг от друга.

Все пропсы разделил на три уровня:

1. Swap instans — переключение компонента через свап. Лежит в самом верху панели. Пример: Type. Он по умолчанию там находится и в Figma, и в Pixso.
2. Primary props — высокочастотные настройки: Size, Semantic, State.
3. Secondary props — отвечают за ассеты внутри компонента: Icon only, Left Icon, Badge.

Все стало читаться единообразно. Каждый пропс на своем месте. Дизайнеры быстрее находят нужные настройки в сложных компонентах — не нужно гадать, где искать переключатель состояния или иконку.

Система стала предсказуемой. Предсказуемость — это скорость. Скорость — меньше раздражения и больше времени на работу.

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