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. Кто здесь? Визитка Виктор Теплов дизайнер 1992 типография курьер,
 панк

    1993 типография курьер,
 оператор ЭВМ 1995 агентство хозяин,
 дизайнер 2021 ozon сеньор-помидор,
 хранитель одной ДС
  2. Время приключений С чего всё началось I не было дизайн-систем@

    I не было команд@ I полное самообслуживание
  3. Разнобезобразие Несогласованность решений A не было единого 
 пользовательского опытI

    A Figma и код
 не переиспользовалис7 A время и деньги утекали
  4. Первый заход Начало систематизации У нас
 есть план 8 собрали

    статистикG 8 сформировали команду ДA 8 получили разрабоW 8 начали бить UI-китов
  5. Свой среди чужих Как была устроена библиотека Core OZI Brand

    Marketing Icons Archive Temp Project 01 Prod Archive Дизайн-система Другие
 важные проекты
  6. Один файл, чтоб править всеми Как была устроена библиотека Core

    OZI Brand Marketing Icons Archive Temp Project 01 Prod Archive Project 02 Prod Archive Alpha WEB Ozon Internal Design System Version 1.0
  7. Куча-мала Всё в одном файле Pages Welcome ------------------ Colors Typography

    Grid Shadows Spacing ------------------ ❖ Accordion ❖ Avatar ❖ Button ❖ Calendar
  8. 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 Живи
 настоящим
  9. Все яйца в одну корзину Суперкомплексные компоненты Button ❖ 500

    Size Primary Variant Left Icon Default State Hug-contents Resizing Light Theme Button
  10. Делим территорию Новая структура DS Core System Comps Assets Service

    DS OZI Tokens Components Organisms DS BX Tokens Components Organisms DS Core Общие богатства дизайн-системы DS OZI Дизайн-система для продуктивити DS BX Дизайн-система ozon.ru Три команды
  11. Всеобщие богатства 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
  12. Моя прелесть 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
  13. Всё разделить Один компонент — один файл DS Core System

    Comps Assets Service DS OZI Tokens Components Organisms DS BX Tokens Components Organisms 2GB MegaFile Component
  14. Всё разделить Один компонент — один файл 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
  15. ABC Структура страниц Pages +Showcase How to ------------------ Accordion Attach*

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

    Avatar Backdrop* Badge Breadcrumbs Button Calendar Checkbox y алфавитный порядоt y перекрёстные ссылки
  17. А когда на проде? Статусная модель Поставили задачу разрабам Готов

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

    Поставили задачу разрабам В разработке Готово Готов В работе
  19. Вся подноготная Информация о компоненте 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¶ É Изменили внешний отсту± É Изменили типографику
  20. Boolean property Скрываемые компоненты 7 каунтер на аватарк2 7 иконка

    в кнопк2 7 подпись в поле ввод4 7 ... Button Label Placeholder Caption 2
  21. Instance Swap Cмена вложенных компонентов 6 выбор через панел) 6

    не слетают оверрайдE 6 предпочтительные варианты
  22. Nested Instances (beta) Свойства вложенных компонентов G настройки детей 


    на уровне родителD G пока не без минусов Строка текста
  23. Фантики Компоненты-обёртки Заголовок Подзаголовок Успешный проектировщик взаимодействия должен постоянно ориентироваться

    на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Заголовок Подзаголовок Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Button Button Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Выбери один из вариантов content в панели Variants или собери свой компонент. Задай в нём вертикальный отступ сверху. Поменяй Placeholder на свой собранный компонент. Выбери один из вариантов content в панели Variants или собери свой компонент с вертикальным отступом. Поменяй Placeholder на свой собранный компонент. Выбери один из вариантов content в панели Variants или собери свой компонент с вертикальным отступом. Поменяй Placeholder на свой собранный компонент. Заголовок Подзаголовок Успешный проектировщик взаимодействия должен постоянно ориентироваться на цели пользователя, несмотря на все давление и хаос цикла разработки продукта. Button Button
  24. 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
  25. 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 Один Два
  26. Стата Resource use  измеряем вес 
 каждого компонент# 

    думаем, как сделать легче 
 без потери качества
  27. Компоненты на диете Сравнение показателей 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
  28. Компоненты на диете Сравнение показателей было Группа Строка текста 2

    Строка текста 68 233 0.15 G 2 722 0.02 G стало Группа Строка текста 2 Строка текста dropdown
  29. Компоненты на диете Сравнение показателей 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
  30. Дрим тим Спасибо команде Богдана (Бо) Кибза шеф Саша (Шу)

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

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