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

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