Эта статья — больше заметки для себя ввиду того, что что-то подобное делаем в нашем проекте.
Недавно вышел неплохой труд в трёх частях про Badoo Design System "From zero to Cosmos". Я честно прочитал его и хочу зафиксировать свое понимание сделанного и какие-то выводы.
В первой части нам четко дают понять, что история ввода дизайн системы в Баду сродни героическому эпосу и главный герой в этой истории — автор этой статьи — Кристьяну Ростелли.
Также в первой части рассказывается классическая история, вида "сначала у ребят ничего не было, потом мы росли, появилось много похожих компонентов, как по дизайну, так и по коду, запилили общую либу компонент для веба и покрыли визуальными тестами". Это, к слову, уже довольно круто. Даже такое сделать в больших организациях довольно сложно.
Но у обычного стайл-гайда есть большой минус: дизайны, исходники которых в Sketch, быстро устаревают. Дизайнерам сложно поддерживать "зеркало" стайл-гайдов в рамках символов внутри Sketch.
Позже выясняется, что также не удалось построить процесс развития стайл-гайда, т.е. со временем он умер.
Во второй части пришел редизайн всего Баду. Редизайн рос параллельно всему проекту и его никто не поддерживал в рамках существующей системы дизайна (то есть в рамках либы компонентов). Тут ребятам очень захотелось иметь единую дизайн систему вообще для всех платформ от веба до ios и android.
В качестве решения для code-first дизайн системы автор рассматривает:
1. Для общего кода для всех платформ использовать React + React Native. Автор ссылается на вот эту статью. Кстати, я ❤️React Native.:)
2. Генерировать из кода Sketch-файлы. Автор ссылается на два труда об одном и том же техническом решении "Sketching in the Browser" и "Painting with Code, AirBnb" — react-sketchapp
Также упоминается термин design token — это абстрактное описание (JSON-файл зачастую), в котором есть базовые константы типа цветов, отступов и пр. Это тоже хочется иметь.
В третьей части статьи автор рассказывает, что у них есть и чего нет на данный момент. В этой части куча картинок.
Что есть:
— 80 веб-компонент и визуальные регрессионные тесты.
— генерация sketch библиотеки из кода.
Чего нет:
— Общей с iOs и Android библиотеки компонент. Как её делать неясно, т.к. React Native они не используют.
— Понимания, как делать общими анимации.
— Версионирования.
— Как проводить АБТ.
Выводы от меня
Похоже, если не использовать React Native, то общей либы пока не получается сделать. Максимум — шарить JSON с design tokens. Но даже React Native не решит проблем с консистентными анимациями между вебом и нативом.
Кажется, иметь хотя бы веб-библиотеку компонентов с документацией, тестами, понятными design tokens, синхронизированную с дизайнерскими исходниками, тоже очень полезно и стоит сделать хотя бы это.
Касательно процесса создания такой системы. Похоже, самым безболезненным (дизайнерам не надо будет учиться верстать) будет процесс, в котором:
- дизайнеры рисуют новые блоки,
- разработчики добавляют их в либу,
- из кода либы генерируется обновленная sketch-библиотека символов,
- дизайнеры используют эти sketch-символы в своих дизайнах.
