Витрины компонентов и хранение фронтовой документации
Дизайнеры должны иметь доступ не только к ожидаемому результату поведения компонентов в Фигме, но и к фактическому в коде. Важно в любой момент времени мочь пощупать компонент, библиотечку, паттерн, налить в него данных, потыкать пропсы, посмотреть анимацию.Дизайн — это не то, как выглядит вещь, а то, как она работает. Стив Джобс
За фактическое представление отвечают витрины. Чаще всего они делятся по платформам веб, iOS, Android, но не всегда, например, дизайн-система ВК умеет мимикрировать под дизайны и поведение разных платформ и полностью представлена в вебе.
Веб
Для развертывания витрин в вебе есть множество готовых решений: Knapsack, Supernova и самый популярный Storybook, который имеет богатые функциональные возможности для визуализации, документирования и тестирования компонентов.
Так как держателями процесса по документированию готовых компонентов являются разработчики, то подключайте их к обсуждению с первых шагов в эту сторону.
Чего вам нужно добиться вместе:
- обеспечить синхронизацию внешнего вида, пропсов и требований,
- проведение дизайн-ревью доработок на дев-стендах и дев-ветках сторибука,
- покрытие логики и визуала тестами,
- наличие полной и актуальной документации для разработчиков,
- прозрачное версионирование компонентов и дизайн-системы,
- связь между компонентами в Storybook, бэклоге и представлении в Фигме.
Android
Чаще всего витрина реализуется через apk-файл для установки на мобильном устройстве или симуляторе:
iOS
Чаще всего витрина реализуется через app-файл для установки на мобильном устройстве или симуляторе:
