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

Transcript

1. старший продуктовый дизайнер, группа «Дизайн-система», Ozon Пилим Библу Рефакторинг дизайн-системы
2. Кто здесь?
3. Кто здесь? Визитка Виктор Теплов дизайнер
4. Кто здесь? Визитка Виктор Теплов дизайнер 1992 типография курьер,
 панк 1993 типография курьер,
 оператор ЭВМ 1995 агентство хозяин,
 дизайнер 2021 ozon сеньор-помидор,
 хранитель одной ДС
5. Что будет?
6. Что будет? Анонс
7. Что будет? Анонс 1 OZI 1. 1 проблем 1 лечение
8. Одна из главных метрик Кто знает?
9. Скорость Вжжух!
10. Time-to-market
11. Новая фича Приехала
12. Новая фича
13. Скорость И ещё раз скорость ) скорость проектировани3 ) скорость разработк& ) скорость доставки до прода
14. 300+ это к слову
15. 300+ продуктов Это много Как мы боролись
 за скорость
 проектирования
16. История Первая версия OZI
17. Время приключений С чего всё началось
18. Время приключений С чего всё началось I не было дизайн-систем@ I не было команд@ I полное самообслуживание
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
20. Разнобезобразие Несогласованность решений A не было единого 
 пользовательского опытI A Figma и код
 не переиспользовалис7 A время и деньги утекали
21. Первый заход Начало систематизации У нас
 есть план 8 собрали статистикG 8 сформировали команду ДA 8 получили разрабоW 8 начали бить UI-китов
22. Рождение Запуск первой версии 3 массовый 
 переход Alpha WEB Ozon Internal Design System Version 1.0
23. Проблема Караул
24. Проблемы У нас, Хьюстон ) скорость в код$ ) тормоза в Figma
25. Большая и медленная Жалобы на производительность
26. Ограничения
27. Инструменты делают люди А люди есть люди
28. Variants Explosion Взрыв вариантов
29. Чёрная дыра После взрыва
30. 2GB  облачная платформ!  родовая браузерная травма — 
 ограниченная память
31. 2GB É долгая отрисовк É лагающие прототипÄ É падающие сценарии
32. Death banner Баннер смерти
33. Как было?
34. Свой среди чужих Как была устроена библиотека Core OZI Brand Marketing Icons Archive Temp Project 01 Prod Archive Дизайн-система Другие
 важные проекты
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
36. Куча-мала Всё в одном файле Pages Welcome ------------------ Colors Typography Grid Shadows Spacing ------------------ ❖ Accordion ❖ Avatar ❖ Button ❖ Calendar
37. Publishing Долгая публикация Changes (100500 of 100500) Начните сначала (100500 of 100500)
38. Swap Library Cложно сменить палитру или типографику Темизация,
 давай, 
 до свидания
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 Живи
 настоящим
40. Branches Невозможно использовать ветки Добрый
 вечер
41. Компонент-убийца Источник проблем 8 устройство
 кнопки Button
42. Все яйца в одну корзину Суперкомплексные компоненты Button ❖ 500 Size Primary Variant Left Icon Default State Hug-contents Resizing Light Theme Button
43. Ковёр-простыня Огромное количество слоёв Button
44. Вставь меня И до свидания Button
45. Сценарий превращается В тыкву Button
46. Пришла пора Для паники
47. Пришла пора Для движения вперёд
48. Рефакторинг За дело
49. Скорость Многогранна # покрытие продукт6 # документаци( # уровень дизайн-мышлени( # ...
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 Три команды
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
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
53. Всё разделить Один компонент — один файл DS Core System Comps Assets Service DS OZI Tokens Components Organisms DS BX Tokens Components Organisms 2GB MegaFile Component
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
55. Подключи их всех Централизованное управление командой Enable Libraries for all team files Пульт
 управления
56. Обход путей Взаимная перелинковка ) сложные взаимосвяз8 ) «простукивание библиотеки' ) ..4 ) но плюсов больше Есть и минусы
57. А дока-то где? Источник правды E confluenc2 E notio9 E storyboo' E figma
58. Showcase (витрина) Во всей красе
59. Красивое Showcase ' начни отсюд" ' открой и запин ' читай Showcase Core
60. Welcome Добро пожаловать
61. ABC Структура страниц Pages +Showcase How to ------------------ Accordion Attach* Avatar Backdrop* Badge Breadcrumbs Button Calendar Checkbox u алфавитный порядок
62. ABC Структура страниц Pages +Showcase How to ------------------ Accordion Attach* Avatar Backdrop* Badge Breadcrumbs Button Calendar Checkbox y алфавитный порядоt y перекрёстные ссылки
63. Component Страница компонента
64. Иди и смотри Видеоинструкции 5 видеогайдF 5 просмотр в прототипD 5 раньше gif, теперь mp4
65. А когда на проде? Статусная модель Поставили задачу разрабам Готов В работе Main Top-level frame Button bg Checkbox Checkbox circle Notification Warning Rectangle Ellipse 5
66. А когда на проде? Статусная модель Проектируем Не передано разрабам Поставили задачу разрабам В разработке Готово Готов В работе
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¶ É Изменили внешний отсту± É Изменили типографику
68. Царство кода Storybook | витрина кода
69. Трекер задач Jira | управление проектами
70. Компонент Новые механики Figma
71. Boolean property Скрываемые компоненты 7 каунтер на аватарк2 7 иконка в кнопк2 7 подпись в поле ввод4 7 ... Button Label Placeholder Caption 2
72. Instance Swap Cмена вложенных компонентов 6 выбор через панел) 6 не слетают оверрайдE 6 предпочтительные варианты
73. Красный чемоданчик Вложенные настройки Строка текста Q дополнительные настройки 
 вложенных компонентов
74. Nested Instances (beta) Свойства вложенных компонентов G настройки детей 
 на уровне родителD G пока не без минусов Строка текста
75. Всё распилить (ну почти) Сепарация свойств 5 разме@ 5 ти1 5 ...
76. Фантики Компоненты-обёртки Заголовок Подзаголовок Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Заголовок Подзаголовок Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Button Button Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Выбери один из вариантов content в панели Variants или собери свой компонент. Задай в нём вертикальный отступ сверху. Поменяй Placeholder на свой собранный компонент. Выбери один из вариантов content в панели Variants или собери свой компонент с вертикальным отступом. Поменяй Placeholder на свой собранный компонент. Выбери один из вариантов content в панели Variants или собери свой компонент с вертикальным отступом. Поменяй Placeholder на свой собранный компонент. Заголовок Подзаголовок Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Button Button
77. Наборные компоненты Стеки % варианты с разным 
 количеством элементо5 % включение/выключение
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
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 Один Два
80. Оно того стоило? О, да!
81. Стата Resource use  измеряем вес 
 каждого компонент#  думаем, как сделать легче 
 без потери качества
82. Компоненты на диете Сравнение показателей button было Button 18 318 0.05 G стало Button 760 0.01 G
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
84. Компоненты на диете Сравнение показателей было Группа Строка текста 2 Строка текста 68 233 0.15 G 2 722 0.02 G стало Группа Строка текста 2 Строка текста dropdown
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
86. Дрим Тим Дорогие мои
87. Дрим тим Спасибо команде Богдана (Бо) Кибза шеф Саша (Шу) Шульман дизайнер Андрей Ковалев дизайнер Макс Ткаченко художник Саша Варанцов дизайнер Стёпа Полевщиков шеф Макс Шуваев разработчик Илья Чудин шеф Влад Гурьев разработчик Кира Калимулина редактор Дизайн Система
88. Bonus Track Выстраданные советы
89. Бонус Выстраданные советы ) тестируйте обновлени3 ) переводите в статус deprecate4 ) баг? репаблиш!
90. Ускоряемся? Несколько шагов
91. Раз Что сделали оптимизируйте
 структуру
92. Два Что сделали ' оптимизируйте
 структур$ ' разберите на части
93. Три Что сделали ) оптимизируйте
 структур& ) разберите на част$ ) упростите компоненты
94. Четыре Что сделали ) оптимизируйте
 структур4 ) разберите на част2 ) упростите компонент ) сделайте витрину
95. Быстрой библиотеки,
 лёгкого пути до прода Дизайн-система — это не проект,
 это продукт, который обслуживает 
 другие продукты
96. youtube.com/@zen-designer t.me/systemschat