» » » Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов

 

Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов

Автор: admin от 9-10-2017, 16:55, посмотрело: 35

Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов



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

Abstract. Его преимущества:




  • возможность совместной работы над одним проектом;

  • разграничение доступа;

  • создание веток;

  • версионирование и история изменений;

  • сохранение и описание каждого изменения в дизайн-макетах;

  • понятный интерфейс;

  • прозрачность процессов;

  • высокая скорость работы.





Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов



Мы активно используем Abstract для версионирования базового кита. С его помощью можно контролировать и сохранять историю любых изменений, а также иметь доступ к любой версии любого компонента в момент необходимости. Abstract записывает абсолютно все.

Любая версия. Любой компонент. В любое время.


Подход



С точки зрения дизайна и разработки, мы используем один подход — семантическое версионирование (semver) компонентов. Это означает, что версия представляется в виде трех целых цифр, разделенных точкой (например 2.4.1). Первая цифра называется мажором версии, вторая минором, а третья — патчем.



Изменение версии для дизайна:




  • Патч-версия — это исправление незначительных ошибок в дизайн-макете компонента;

  • Минор-версия — добавляется новое состояние, которое не затрагивает другие состояния компонента;

  • Мажор-версия — глобальные функциональные и стилистические изменения компонента.



Изменение версии для разработчиков:




  • Патч-версия — правки багов и изменения, не влияющие на поведение компонента;

  • Минор-версия — добавление новых состояний компонента;

  • Мажор-версия — изменения, которые могут сломать компонент. Например, изменился внешний вид и размеры.



Каждый компонент версионируется по этому подходу.



Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов



Синхронизация



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



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



Результат таких нехитрых манипуляций:




  • доступ к любым компонентам любой версии у дизайнера и разработчика;

  • полное соответствие компонентов;

  • понимание того, где используется компонент и какой он версии.



Витрина



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




  • общие принципы построения интерфейсов;

  • компоненты для всех продуктов;

  • документация и спецификации по ним;

  • ресурсы для дизайнеров и разработчиков.





Этот инструмент будет полезен абсолютно всем членам команды: дизайнерам, разработчикам, менеджерам и технологам.




  • Это отличный способ ознакомиться с принципами и всеми компонентами дизайн-системы, понять, как это все работает и собирается в единое целое.

  • Он даст понимание, насколько объемен тот или иной продукт, из каких компонентов состоит.

  • Позволит более точно дать оценку при внесении изменений или разработке фич.

  • Ответит на вопросы, как устроен компонент, откуда берутся данные и что с ними происходит.



Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов



Мы начали разработку собственной витрины для нашей дизайн-системы и наделили ее следующей функциональностью:




  • UI Kit для всех продуктов. Главная страница витрины — разводящая по всем существующим китам для продуктов.

  • Основные принципы построения интерфейсов. Для каждого кита есть свой раздел, в котором представлены цвета, типографика, компоненты и шаблоны.

  • Структура и зависимости. Можно увидеть, в каких продуктах используется каждый компонент, и если это молекула или организм, увидеть его структуру.

  • Версии. Для каждого компонента можно посмотреть его версии с момента появления на витрине. Можно увидеть актуальную версию и версию, которая находится в разработке.

  • Документация и спецификации. Каждый компонент подробно описывается с точки зрения дизайна и разработки. Имеются ссылки на актуальные макеты в Zeplin.

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

  • Использование кода. Для каждого компонента приведены все необходимые параметры, которые можно изменить. Они сразу же отображаются в снипете для кода, содержание которого можно скопировать и вставить к себе.



Послесловие



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

Источник: Хабрахабр

Категория: Компании » Apple

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

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *