Идеология инструментов

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

Figma: хранит ожидаемый результат по внешнему виду компонентов, иконки, кейвижуал, примеры и шаблоны экранов.

Docusaurus: хранит гайдлайны компонентов, принципы проектирования интерфейсов, редполитику, Release Notes и любые текстовые описания касающиеся дизайн-системы. Претендует быть единым источником правды.

Github хранит репозитории и все артефакты этих репозиториев.

Репозиторий с дизайнерской документацией:

Репозиторий с web-компонентами хранит:

Репозиторий с iOS-компонентами устроен так же как и репозиторий с web-компонентами

Репозиторий с Android-компонентами устроен так же как и репозиторий с web-компонентами

Storybook: визуализирует фактический результат реализованных веб-компонентов, хранит документацию для фронтенд-разработчиков, позволяет проходить дизайн-ревью на dev-контуре.

Витрина компонентов Android, приложение для визуализации фактического результата реализованных Android-компонентов, позволяет проходить дизайн-ревью на dev-контуре.

Витрина компонентов iOS, приложение для визуализации фактического результата реализованных iOS-компонентов, позволяет проходить дизайн-ревью на dev-контуре.

Chromatic: инструмент для кросс-браузерного автоматического тестирования компонентов. Обеспечивает дополнительную уверенность в качестве сборок.

Ни один из инструментов не претендует на хранение исчерпывающей информации по компоненту и поэтому, содержит ссылки на остальные инструменты для взаимного дополнения.