Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Виктор Теплов — Пилим Библу или Рефакторинг дизайн-системы

Ozon Tech
February 20, 2023

Виктор Теплов — Пилим Библу или Рефакторинг дизайн-системы

Ozon Tech

February 20, 2023
Tweet

More Decks by Ozon Tech

Other Decks in Design

Transcript

  1. старший продуктовый дизайнер,

    группа «Дизайн-система», Ozon
    Пилим Библу
    Рефакторинг дизайн-системы

    View Slide

  2. Кто здесь?

    View Slide

  3. Кто здесь?
    Визитка
    Виктор Теплов
    дизайнер

    View Slide

  4. Кто здесь?
    Визитка
    Виктор Теплов
    дизайнер
    1992
    типография
    курьер,

    панк
    1993
    типография
    курьер,

    оператор ЭВМ
    1995
    агентство
    хозяин,

    дизайнер
    2021
    ozon
    сеньор-помидор,

    хранитель одной ДС

    View Slide

  5. Что будет?

    View Slide

  6. Что будет?
    Анонс

    View Slide

  7. Что будет?
    Анонс
    1 OZI 1.
    1 проблем
    1 лечение

    View Slide

  8. Одна из главных метрик
    Кто знает?

    View Slide

  9. Скорость
    Вжжух!

    View Slide

  10. Time-to-market

    View Slide

  11. Новая фича
    Приехала

    View Slide

  12. Новая фича

    View Slide

  13. Скорость
    И ещё раз скорость
    ) скорость проектировани3
    ) скорость разработк&
    ) скорость доставки до прода

    View Slide

  14. 300+
    это к слову

    View Slide

  15. 300+ продуктов
    Это много
    Как мы боролись

    за скорость

    проектирования

    View Slide

  16. История
    Первая версия OZI

    View Slide

  17. Время приключений
    С чего всё началось

    View Slide

  18. Время приключений
    С чего всё началось
    I не было дизайн-систем@
    I не было команд@
    I полное самообслуживание

    View Slide

  19. Океан кода
    UI-киты
    UIkit-2018
    UIkit-2019a
    iOS-UI
    Android-7
    AndroidUI
    UIkit-2019b -=MyUI=-
    Admin-UI
    SellerUI_2
    iOSUI-2021
    iOS-Swift kit-2020-A

    View Slide

  20. Разнобезобразие
    Несогласованность решений
    A не было единого 

    пользовательского опытI
    A Figma и код

    не переиспользовалис7
    A время и деньги утекали

    View Slide

  21. Первый заход
    Начало систематизации
    У нас

    есть план
    8 собрали статистикG
    8 сформировали команду ДA
    8 получили разрабоW
    8 начали бить UI-китов

    View Slide

  22. Рождение
    Запуск первой версии
    3 массовый 

    переход
    Alpha
    WEB
    Ozon Internal Design System
    Version 1.0

    View Slide

  23. Проблема
    Караул

    View Slide

  24. Проблемы
    У нас, Хьюстон
    ) скорость в код$
    ) тормоза в Figma

    View Slide

  25. Большая и медленная
    Жалобы на производительность

    View Slide

  26. Ограничения

    View Slide

  27. Инструменты делают люди
    А люди есть люди

    View Slide

  28. Variants Explosion
    Взрыв вариантов

    View Slide

  29. Чёрная дыра
    После взрыва

    View Slide

  30. 2GB
    облачная платформ!
    родовая браузерная травма — 

    ограниченная память

    View Slide

  31. 2GB
    É долгая отрисовк
    É лагающие прототипÄ
    É падающие сценарии

    View Slide

  32. Death banner
    Баннер смерти

    View Slide

  33. Как было?

    View Slide

  34. Свой среди чужих
    Как была устроена библиотека
    Core
    OZI
    Brand
    Marketing
    Icons
    Archive
    Temp
    Project 01
    Prod
    Archive
    Дизайн-система
    Другие

    важные проекты

    View Slide

  35. Один файл, чтоб править всеми
    Как была устроена библиотека
    Core
    OZI
    Brand
    Marketing
    Icons
    Archive
    Temp
    Project 01
    Prod
    Archive
    Project 02
    Prod
    Archive
    Alpha
    WEB
    Ozon Internal Design System
    Version 1.0

    View Slide

  36. Куча-мала
    Всё в одном файле
    Pages
    Welcome
    ------------------
    Colors
    Typography
    Grid
    Shadows
    Spacing
    ------------------
    ❖ Accordion
    ❖ Avatar
    ❖ Button
    ❖ Calendar

    View Slide

  37. Publishing
    Долгая публикация
    Changes (100500 of 100500)
    Начните
    сначала
    (100500 of 100500)

    View Slide

  38. Swap Library
    Cложно сменить палитру или типографику
    Темизация,

    давай, 

    до свидания

    View Slide

  39. Version History
    Не восстановить файл из истории
    ⇧⌘K
    Place image...
    Save local copy...
    ⌥⌘S
    Save to version history...
    Show version history
    Export...
    Export frames to PDF...
    Crate branch...
    See all branches
    Живи

    настоящим

    View Slide

  40. Branches
    Невозможно использовать ветки
    Добрый

    вечер

    View Slide

  41. Компонент-убийца
    Источник проблем
    8 устройство

    кнопки
    Button

    View Slide

  42. Все яйца в одну корзину
    Суперкомплексные компоненты
    Button ❖
    500
    Size
    Primary
    Variant
    Left
    Icon
    Default
    State
    Hug-contents
    Resizing
    Light
    Theme
    Button

    View Slide

  43. Ковёр-простыня
    Огромное количество слоёв
    Button

    View Slide

  44. Вставь меня
    И до свидания
    Button

    View Slide

  45. Сценарий превращается
    В тыкву
    Button

    View Slide

  46. Пришла пора
    Для паники

    View Slide

  47. Пришла пора
    Для движения вперёд

    View Slide

  48. Рефакторинг
    За дело

    View Slide

  49. Скорость
    Многогранна
    # покрытие продукт6
    # документаци(
    # уровень дизайн-мышлени(
    # ...

    View Slide

  50. Делим территорию
    Новая структура
    DS Core
    System Comps
    Assets
    Service
    DS OZI
    Tokens
    Components
    Organisms
    DS BX
    Tokens
    Components
    Organisms
    DS Core
    Общие богатства дизайн-системы
    DS OZI
    Дизайн-система для продуктивити
    DS BX
    Дизайн-система ozon.ru
    Три команды

    View Slide

  51. Всеобщие богатства
    DS Core
    System Comps
    Assets
    Service
    DS OZI
    Tokens
    Components
    Organisms
    DS BX
    Tokens
    Components
    Organisms
    System Comps
    Android
    Components
    Library
    Desktop
    Components
    Library
    iOS 

    Components
    Library
    Assets
    Icons
    Library
    Illustrations
    Library
    Logos
    Library
    Service
    Service 

    Tokens
    Library
    Service
    Components
    Library
    Toolbox
    Library
    Команда DS Core

    View Slide

  52. Моя прелесть
    DS Core
    System Comps
    Assets
    Service
    DS OZI
    Tokens
    Components
    Organisms
    DS BX
    Tokens
    Components
    Organisms
    Tokens
    Palette
    Library
    Typography
    Library
    Grid
    Library
    Components
    Avatar
    Library
    Button
    Library
    Input
    Library
    Organisms
    Showcase
    Library
    Attach
    Library
    Split Button
    Library
    Команда DS OZI

    View Slide

  53. Всё разделить
    Один компонент — один файл
    DS Core
    System Comps
    Assets
    Service
    DS OZI
    Tokens
    Components
    Organisms
    DS BX
    Tokens
    Components
    Organisms
    2GB
    MegaFile
    Component

    View Slide

  54. Всё разделить
    Один компонент — один файл
    DS Core
    System Comps
    Assets
    Service
    DS OZI
    Tokens
    Components
    Organisms
    DS BX
    Tokens
    Components
    Organisms
    Accordion
    Component
    Avatar
    Component
    Badge
    Component
    Breadcrumbs
    Component
    Button
    Component
    Calendar
    Component
    Counter
    Component
    Dialog
    Component
    Drawer
    Component
    Dropdown
    Component
    Filter Chip
    Component
    Header
    Component
    Image
    Component
    Informer
    Component
    Input
    Component
    Island
    Component

    View Slide

  55. Подключи их всех
    Централизованное управление командой
    Enable Libraries for all team files
    Пульт

    управления

    View Slide

  56. Обход путей
    Взаимная перелинковка
    ) сложные взаимосвяз8
    ) «простукивание библиотеки'
    ) ..4
    ) но плюсов больше
    Есть и минусы

    View Slide

  57. А дока-то где?
    Источник правды
    E confluenc2
    E notio9
    E storyboo'
    E figma

    View Slide

  58. Showcase (витрина)
    Во всей красе

    View Slide

  59. Красивое
    Showcase
    ' начни отсюд"
    ' открой и запин
    ' читай
    Showcase
    Core

    View Slide

  60. Welcome
    Добро пожаловать

    View Slide

  61. ABC
    Структура страниц
    Pages
    +Showcase
    How to
    ------------------
    Accordion
    Attach*
    Avatar
    Backdrop*
    Badge
    Breadcrumbs
    Button
    Calendar
    Checkbox
    u алфавитный порядок

    View Slide

  62. ABC
    Структура страниц
    Pages
    +Showcase
    How to
    ------------------
    Accordion
    Attach*
    Avatar
    Backdrop*
    Badge
    Breadcrumbs
    Button
    Calendar
    Checkbox
    y алфавитный порядоt
    y перекрёстные ссылки

    View Slide

  63. Component
    Страница компонента

    View Slide

  64. Иди и смотри
    Видеоинструкции
    5 видеогайдF
    5 просмотр в прототипD
    5 раньше gif, теперь mp4

    View Slide

  65. А когда на проде?
    Статусная модель
    Поставили задачу разрабам
    Готов
    В работе
    Main
    Top-level frame
    Button
    bg
    Checkbox
    Checkbox
    circle
    Notification
    Warning
    Rectangle
    Ellipse 5

    View Slide

  66. А когда на проде?
    Статусная модель
    Проектируем
    Не передано разрабам
    Поставили задачу разрабам
    В разработке
    Готово Готов
    В работе

    View Slide

  67. Вся подноготная
    Информация о компоненте
    Main
    Top-level frame
    Button
    bg
    circle
    Warning
    Rectangle
    Ellipse 5
    Frame
    Frame 5
    Top-level scrolling frame
    Fixed
    Group 2
    Button
    Поставили задачу разрабам
    OZI
    Jira Storybook
    Diff с продом
    É Изменили расстояние до иконки 

    в размере 40¶
    É Изменили внешний отсту±
    É Изменили типографику

    View Slide

  68. Царство кода
    Storybook | витрина кода

    View Slide

  69. Трекер задач
    Jira | управление проектами

    View Slide

  70. Компонент
    Новые механики Figma

    View Slide

  71. Boolean property
    Скрываемые компоненты
    7 каунтер на аватарк2
    7 иконка в кнопк2
    7 подпись в поле ввод4
    7 ...
    Button
    Label
    Placeholder
    Caption
    2

    View Slide

  72. Instance Swap
    Cмена вложенных компонентов
    6 выбор через панел)
    6 не слетают оверрайдE
    6 предпочтительные варианты

    View Slide

  73. Красный чемоданчик
    Вложенные настройки
    Строка текста
    Q дополнительные настройки 

    вложенных компонентов

    View Slide

  74. Nested Instances (beta)
    Свойства вложенных компонентов
    G настройки детей 

    на уровне родителD
    G пока не без минусов
    Строка текста

    View Slide

  75. Всё распилить (ну почти)
    Сепарация свойств
    5 разме@
    5 ти1
    5 ...

    View Slide

  76. Фантики
    Компоненты-обёртки
    Заголовок
    Подзаголовок
    Успешный проектировщик
    взаимодействия должен постоянно
    ориентироваться на цели
    пользователя, несмотря на все
    давление и хаос цикла разработки
    продукта.
    Заголовок
    Подзаголовок
    Успешный проектировщик взаимодействия
    должен постоянно ориентироваться на цели
    пользователя, несмотря на все давление и
    хаос цикла разработки продукта.
    Button Button
    Успешный проектировщик взаимодействия
    должен постоянно ориентироваться на цели
    пользователя, несмотря на все давление и хаос
    цикла разработки продукта.
    Выбери один из вариантов
    content в панели Variants
    или собери свой компонент.
    Задай в нём вертикальный
    отступ сверху. Поменяй
    Placeholder на свой
    собранный компонент.
    Выбери один из вариантов content
    в панели Variants или собери
    свой компонент с вертикальным
    отступом.

    Поменяй Placeholder на свой
    собранный компонент.
    Выбери один из вариантов
    content в панели Variants или
    собери свой компонент с
    вертикальным отступом.

    Поменяй Placeholder на свой
    собранный компонент.
    Заголовок
    Подзаголовок
    Успешный
    проектировщик
    взаимодействия должен
    постоянно
    ориентироваться на
    цели пользователя,
    несмотря на все
    давление и хаос цикла
    разработки продукта.
    Button Button

    View Slide

  77. Наборные компоненты
    Стеки
    % варианты с разным 

    количеством элементо5
    % включение/выключение

    View Slide

  78. Stack
    Промежуточные компоненты ◇ Tabs
    ◇ StackTabs-500
    ◇ Tab-500
    ◇ Tab-500
    ◇ Tab-500
    ◇ Tab-500
    Таб 1
    ◇ Tab-500
    Таб 3
    ◇ Tab-500
    Таб 2
    ◇ StackTabs-500
    Таб 1 Таб 2 Таб 3
    ◇ Tabs
    Таб 1 Таб 2 Таб 3

    View Slide

  79. Stack (Detach me)
    Промежуточные компоненты
    0 вставитH
    0 разобратH
    0 собрать локальный 

    компоненF
    0 поместить внутрь обёртки
    ◇ Tabs
    ◇ Local Comp
    ◇ Tab-500
    ◇ Tab-500
    ◇ Tabs
    Таб 1 Таб 2 Таб 3
    StackTabs-500
    Таб 1 Таб 2 Таб 3
    ❖ Local Comp
    Один Два
    ◇ Tabs
    Один Два

    View Slide

  80. Оно того стоило?
    О, да!

    View Slide

  81. Стата
    Resource use
    измеряем вес 

    каждого компонент#
    думаем, как сделать легче 

    без потери качества

    View Slide

  82. Компоненты на диете
    Сравнение показателей
    button
    было
    Button
    18 318
    0.05 G
    стало
    Button
    760
    0.01 G

    View Slide

  83. Компоненты на диете
    Сравнение показателей
    table
    было
    Колонка Колонка Колонка
    Колонка
    Цифры Колонка Колонка
    Ячейка
    Ячейка
    Ячейка Ячейка
    Ячейка
    Ячейка
    Ячейка
    Ячейка
    Ячейка
    12345
    12345
    12345 Badge
    Badge
    Badge Действие
    Действие
    Действие
    Ячейка
    Ячейка
    Ячейка Ячейка
    Ячейка
    Ячейка
    Ячейка
    Ячейка
    Ячейка
    12345
    12345
    12345 Badge
    Badge
    Badge Действие
    Действие
    Действие
    Ячейка
    Ячейка
    Ячейка Ячейка
    Ячейка
    Ячейка
    Ячейка
    Ячейка
    12345
    12345
    12345 Badge
    Badge
    Badge Действие
    Действие
    Действие
    22 482
    0.06 G
    стало
    Колонка Колонка Колонка
    Колонка
    Цифры Колонка Колонка
    Ячейка Ячейка
    Ячейка
    12345 Badge Действие
    Ячейка Ячейка
    Ячейка
    12345 Badge Действие
    Ячейка Ячейка 12345 Badge Действие
    1 918
    0.01 G

    View Slide

  84. Компоненты на диете
    Сравнение показателей
    было
    Группа
    Строка текста 2
    Строка текста
    68 233
    0.15 G
    2 722
    0.02 G
    стало
    Группа
    Строка текста 2
    Строка текста
    dropdown

    View Slide

  85. Компоненты на диете
    Сравнение показателей
    760
    0.01 G
    + 1 918
    0.01 G
    + 2 722
    0.02 G
    ≈5 000
    18 318
    0.05 G
    + 22 482
    0.06 G
    + 68 233
    0.15 G
    ≈100 000

    View Slide

  86. Дрим Тим
    Дорогие мои

    View Slide

  87. Дрим тим
    Спасибо команде
    Богдана (Бо) Кибза
    шеф
    Саша (Шу) Шульман
    дизайнер
    Андрей Ковалев
    дизайнер
    Макс Ткаченко
    художник
    Саша Варанцов
    дизайнер
    Стёпа Полевщиков
    шеф
    Макс Шуваев
    разработчик
    Илья Чудин
    шеф
    Влад Гурьев
    разработчик
    Кира Калимулина
    редактор
    Дизайн Система

    View Slide

  88. Bonus Track
    Выстраданные советы

    View Slide

  89. Бонус
    Выстраданные советы
    ) тестируйте обновлени3
    ) переводите в статус deprecate4
    ) баг? репаблиш!

    View Slide

  90. Ускоряемся?
    Несколько шагов

    View Slide

  91. Раз
    Что сделали
    оптимизируйте

    структуру

    View Slide

  92. Два
    Что сделали
    ' оптимизируйте

    структур$
    ' разберите на части

    View Slide

  93. Три
    Что сделали
    ) оптимизируйте

    структур&
    ) разберите на част$
    ) упростите компоненты

    View Slide

  94. Четыре
    Что сделали
    ) оптимизируйте

    структур4
    ) разберите на част2
    ) упростите компонент
    ) сделайте витрину

    View Slide

  95. Быстрой библиотеки,

    лёгкого пути до прода
    Дизайн-система — это не проект,

    это продукт, который обслуживает 

    другие продукты

    View Slide

  96. youtube.com/@zen-designer t.me/systemschat

    View Slide