Дизайн-система Tinkoff #1 и #2

Дизайн-система Tinkoff #1 и #2

Дата
October 10, 2017
Теги
Для профиСсылкаДизайн-системы
День недели
Опубликовано

В блоге банка Тинькофф на Хабре появилась вторая часть рассказа о том как они организуют свою дизайн-систему

Цикл «Создание Tinkoff Design System» будет полезен тем, кто пытается организовать дизайн крупного проекта. Если в работе нескольких дизайнеров нет единой системы и правил, возникает бардак. Эти посты рассказывают как удалось упорядочить дизайн в Тинькове.

Часть 1: Первые шаги goo.gl/z2fXFt

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

Часть 2: UI Kit, версионирование и витрина компонентов goo.gl/qb5q35

Вторая часть более конкретная и посвящена трудностям, которые возникли по пути.

Что сделали:

  • Уменьшили количество компонентов
  • Зафиксировали сетку в пикселах
  • Ввели контроль версий через сервис Abstract
  • Каждому компоненту в системе дали версию
  • Сделали внутренний сайт-витрину.

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

Ждём третью часть про бизнес-процессы.