Юрий Ветров — Токены в дизайн-системах

Один из самых простых способов реализации дизайн-системы в коде — токены. Это набор базовых переменных визуального языка (цвета, шрифты, отступы и т.п.), который передаётся в любой компонентный фреймворк. Это позволяет проще управлять визуальным стилем продуктов и дешевле внедрять на практике.

Transcript

1. ТОКЕНЫ
   В ДИЗАЙН-СИСТЕМАХ
   Слои абстракции для дела
   ЮРИЙ ВЕТРОВ
   RAIFFEISEN BANK, EX-MAIL.RU GROUP
   

   View Slide

2. НИКОГДА НЕ ВВЯЗЫВАЙСЯ В
   ТЕРМИНОЛОГИЧЕСКИЕ СПОРЫ
   Говорил мой зав.кафедрой. Но, блин!
   

   View Slide

3. ТЕРМИН РАЗМЫЛИ К ЧЕРТЯМ
   Называют всё что угодно – от библиотеки стандартных
   элементов в Sketch и странички с нарезанными скриншотами
   до зрелой платформы, действительно работающей на базе
   распространяемых компонентов со вшитым дизайном.
   Главный источник правды это сам продукт и нужно
   озаботиться тем, чтобы как задумано работал именно он.
   

   View Slide

4. 1950Е-1960Е
   Система визуальной идентификации бренда из прошлого.
   

   View Slide

5. 2000Е
   UI Kit + гайдлайн в PDF или вики-системе.
   

   View Slide

6. 2010Е
   Компоненты в коде (хотя кто-то делал и раньше).
   Работать надо с основным материалом среды – кодом.
   

   View Slide

7. СТАРАЯ И НОВАЯ ШКОЛА
   Похожи на вид,
   кардинально различаются в использовании.
   

   View Slide

8. ДИЗАЙН ЧАСТО «ПЕРЕВИРАЕТСЯ»
   НА ПУТИ ИЗ МАКЕТОВ
   В РЕАЛИЗАЦИЮ
   Цепочка «гайдлайн → дизайн → вёрстка → реализация» –
   тупик, вечная ручная работа.
   Чтобы избавиться от кучи геморроя по внедрению,
   улучшению и поддержке продуктов, её нужно перевести в
   «гайдлайн = дизайн = вёрстка → реализация».
   

   View Slide

9. КАК ЭТО РАБОТАЕТ
   визуальный язык → UI Kit → макеты (ТЗ)
   ↓ ↓
   компоненты → вёрстка → реализация
   (сборка из готовых кусков)
   

   View Slide

10. ПРЕДЫСТОРИЯ
    Начали в 2012 году
    

    View Slide

11. ПРОДУКТЫ СИЛЬНО ОТЛИЧАЮТСЯ
    

    View Slide

12. ЕСТЬ ДРУГИЕ БРЕНДЫ
    

    View Slide

13. НАЧАЛИ В 2012: МОБИЛЬНЫЙ ВЕБ
    

    View Slide

14. ДИЗАЙН-СИСТЕМА = UI KIT? НЕТ
    

    View Slide

15. 2012-2013: МОБИЛЬНЫЙ ВЕБ
    

    View Slide

16. 2014-2015: МЕДИАПРОЕКТЫ
    

    View Slide

17. 2014: ХАКАТОН И ИДЕОЛОГИЯ
    

    View Slide

18. 2015:
    ПЛАТФОРМЕННОЕ МЫШЛЕНИЕ
    Текущее видение целостной дизайн-
    системы мы описали в 2015 году и с тех
    пор постепенно реализуем его.
    

    View Slide

19. 2017: ТОКЕНЫ
    

    View Slide

20. 1
    ВИЗУАЛЬНЫЙ ЯЗЫК
    Правила, по которым создаются продукты:
    design.mail.ru/paradigm/
    

    View Slide

21. 2
    ЕДИНЫЕ КОМПОНЕНТЫ В КОДЕ
    Единственный источник правды. Дизайн «вшит» в них,
    сервисы получают и обновляют их из единого репозитория.
    

    View Slide

22. 3
    ШАБЛОНЫ ДЛЯ ДИЗАЙНЕРОВ
    Быстро показать идею, высокоуровневые скетчи. В идеальной
    ситуации макеты не верстают, а собирают из единых компонентов.
    

    View Slide

23. ОСНОВНЫЕ ПРИНЦИПЫ
    

    View Slide

24. 1.
    МОДУЛЬНОСТЬ
    Позволяет сравнительно легко управлять большим
    количеством продуктов. Интерфейс строится по принципу
    слоёв абстракции:
    «переменные → базовые элементы интерфейса →
    компоненты для реализации конкретных задач → экраны
    продукта».
    

    View Slide

25. 2.
    ПАРАМЕТРИЧНОСТЬ
    Изменение конкретных параметров, из которых строятся
    элементы интерфейса, позволяет добиться масштабируемости
    на продукты разных типов.
    Для этого мы используем переменные и миксины.
    

    View Slide

26. 3.
    МИНИМУМ КОСТЫЛЕЙ
    Собирай элементы интерфейса из уже существующих
    переменных, а компоненты – из уже существующих
    элементов.
    Любые принимаемые нами решения должны вписываться
    в систему, жить по её правилам и потенциально быть
    готовыми к применению на любом из наших продуктов.
    

    View Slide

27. 4.
    4DP
    Так называемый «супер-пиксель».
    Краеугольный камень системы, на нём строится вся система
    размерностей.
    Мы мыслим исключительно цифрами, кратными 4-м.
    

    View Slide

28. 5.
    АДАПТАЦИЯ
    Под мобильные (малые экраны) и сенсорные экраны
    (управление пальцем, нет мыши).
    Любые наши решения априори должны быть touch-friendly –
    это касается размеров элементов, действий по наведению и
    т.п.
    Исключения бывают для внутренних инструментов вроде нишевых интранет-сайтов.
    *
    *
    

    View Slide

29. ПРОБЛЕМА №1
    Не всегда удаётся
    единый компонентный фреймворк
    

    View Slide

30. ТОКЕНЫ – ДЁШЕВО И СЕРДИТО
    Когда единый компонентный фреймворк не получается.
    Слой абстракции под компонентными фреймворками.
    PARADIGM
    PRODUCTIVITY МЕДИА B2B ПРОМО
    ПОЧТА НОВОСТИ MCS САЙТЫ
    ОБЛАКО КИНО BIZ ПИСЬМА
    КАЛЕНДАРЬ АВТО
    

    View Slide

31. КАК РАБОТАЮТ ТОКЕНЫ
    Config-файл, визуальный язык в переменных. Генерируется
    файл для СSS-препроцессоров, его подключает фреймворк.
    

    View Slide

32. ВЕБ И МОБИЛЬНЫЕ ВМЕСТЕ
    Из одного config-файла
    делаются версии для любых платформ.
    

    View Slide

33. ОСНОВА ВИЗУАЛЬНОГО ЯЗЫКА
    Играя с набором параметров, мы можем быстро получить
    любой элемент. Например, простую кнопку:
    

    View Slide

34. ТИПОГРАФИКА
    Все размеры и начертания мы храним в переменных. От проекта к
    проекту они могут меняться, но основные группы одни и те же.
    

    View Slide

35. СЕТКА И ОТСТУПЫ
    Каждый элемент дизайн-системы строится по модулям
    в 4dp (density independent pixels)
    

    View Slide

36. ГРАНИЦА И ФОН
    На помощь приходят чуть более сложные функции (mixin),
    и прозрачности.
    

    View Slide

37. HOVER
    @mixin stateHover ($colorBgSecondary) {
    background: mix($colorTrueBlack, $colorBgSecondary, 4%);
    }
    

    View Slide

38. ACTIVE
    @mixin stateActive ($colorBgSecondary) {
    background: mix($colorTrueBlack, $colorBgSecondary, 8%);
    }
    

    View Slide

39. ТЕНЬ
    Элемент приподнят над базовым уровнем
    (кнопки, карточки) – часть лейаута или дополнительная
    информация к основному контенту.
    

    View Slide

40. КНОПКА В СБОРЕ
    

    View Slide

41. АКЦЕНТНАЯ КНОПКА
    За счет изменения параметра отвечающего
    за фон, мы можем сделать из обычной кнопки – акцентную.
    

    View Slide

42. АКЦЕНТНАЯ КНОПКА
    

    View Slide

43. 1.
    СЕМАНТИКА
    Все переменные названы относительно задачи («цвет
    второстепенного фона»), а не просто визуального
    представления («светло-серый»).
    Это позволяет проще переопределять стиль – меняя
    значение, не нужно рефакторить вызов самих переменных.
    Правда, для расстояний и отступов это не сработает.
    

    View Slide

44. СЕМАНТИКА
    $colorText: '#333333’,
    $colorTextSecondary: '#999999’,
    $colorBg: '#ffffff’,
    $colorBgSecondary: '#f0f0f0’,
    $sizeBase: 4,
    $sizeGrid: 20,
    $paddingControlButton: 20,
    $marginIcon: 12,
    $fontH1: {
    fontSize: 24,
    lineHeight: 32,
    fontWeight: 700,
    marginBottom: 16,
    },
    $fontParagraph: {
    fontSize: 15,
    lineHeight: 20,
    fontWeight: 400,
    marginBottom: 24,
    },
    

    View Slide

45. 2.
    МИНИМУМ ПЕРЕМЕННЫХ (~200)
    В них проще разобраться и легче выбрать правильную,
    меньше избыточности.
    В некоторых фреймворках их тысячи, но мы пытались найти
    баланс между гибкостью и предсказуемостью.
    

    View Slide

46. ЦВЕТА
    $colorText: #333333,
    $colorTextSecondary: #999999,
    $colorTextContrast: #FFFFFF,
    $colorBg: #FFFFFF,
    $colorBgSecondary: #F0F0F0,
    $colorBgContrast: #333333,
    $colorIcon: #333333,
    $colorIconSecondary: #C7C7C7,
    $colorIconContrast: #FFFFFF,
    $colorAccent: #005FF9,
    $colorAccentSecondary: #FF9E00,
    $colorLink: #005BD1,
    $colorLinkContrast: #FFFFFF,
    $colorLinkVisited: #528FDF,
    $colorSuccess: #28C75D,
    $colorError: #FF1100,
    $colorNotify: #FF9E00,
    $colorBgWarning: #FFFCE0,
    $colorRating: #FFD400,
    $colorTrueBlack: #000000,
    $colorTrueWhite: #FFFFFF,
    $colorState: #000000,
    $colorSocialVk: #4D75A2,
    $colorSocialOk: #EE8208,
    

    View Slide

47. ШРИФТЫ
    $fontBody: {
    fontSize: 15,
    lineHeight: 20,
    fontWeight: 400,
    marginBottom: 0,
    },
    $fontH1: {},
    $fontH2: {},
    $fontH3: {},
    $fontH4: {},
    $fontParagraph: {},
    $fontList: {},
    $fontFootnote: {},
    $fontLead: {},
    $fontQuote: {},
    $fontTableHeader: {},
    $fontControl: {},
    $fontControlLabel: {},
    $fontTab: {},
    $fontBadge: {},
    

    View Slide

48. ОТСТУПЫ
    /** РАЗМЕРЫ ЭЛЕМЕНТОВ */
    $sizeControlHeight: 40,
    $sizeControlButtonWidthMin: 130,
    $sizeControlLabelWidth: 184,
    $sizeControlCheckHeight: 16,
    $sizePopupSmall: 420,
    /** ОТСТУПЫ ВНУТРИ ЭЛЕМЕНТОВ */
    $paddingControlHorizontal: 12,
    $paddingControlVertical: 0,
    $paddingControlButton: 20,
    $paddingMenu: 8,
    $paddingTab: 0,
    /** ОТСТУПЫ МЕЖДУ ЭЛЕМЕНТАМИ */
    $marginControl: 12,
    $marginFormLabelHorizontal: 16,
    $marginFormLabelVertical: 4,
    $marginIcon: 12,
    $marginChoice: 8,
    /** ИКОНКИ */
    $sizeIconUI: 16,
    $sizeIconHeader: 20,
    /** ИЛЛЮСТРАЦИИ */
    $sizeIllustrationS: 48,
    

    View Slide

49. ДЕКОР
    /** ГРАНИЦЫ ЭЛЕМЕНТОВ */
    $sizeBorderWidth: 1,
    $sizeBorderWidthTab: 2,
    $sizeBorderWidthBar: 4,
    $sizeBorderWidthAccent: 8,
    $sizeBorderRadius: 2,
    /** ТОНИРОВАНИЕ ЭЛЕМЕНТОВ */
    $toneValueX1: 0.04;
    $toneValueX2: 0.08;
    $toneValueBase: 0.48;
    $toneValueViewer: 0.88;
    $toneValueToolbar: 0.24;
    /** ТЕНИ */
    $depth0:,
    $depth1,
    $depth2,
    $depth3: 0 16px 48px 0 rgba(0, 0,
    0, 0.48),
    $depthInset,
    

    View Slide

50. 3.
    НАСЛЕДОВАНИЕ
    Чтобы уменьшить количество переменных и повысить
    управляемость, многие значения наследуются или считаются
    от единой шкалы: отступы, цвета, типографика, прозрачности.
    Шкала – это пространство возможных решений. Конкретная
    переменная – решение для конкретной ситуации.
    

    View Slide

51. ШКАЛА
    const sizeBase = 4;
    const x0 = 0;
    const x025 = sizeBase / 4;
    const x05 = sizeBase / 2;
    const x1 = sizeBase;
    const x2 = sizeBase * 2;
    const x3 = sizeBase * 3;
    const x4 = sizeBase * 4;
    const x5 = sizeBase * 5;
    const x6 = sizeBase * 6;
    const x8 = sizeBase * 8;
    const x10 = sizeBase * 10;
    const x12 = sizeBase * 12;
    const x15 = sizeBase * 15;
    const x20 = sizeBase * 20;
    const sizeGrid = 20;
    

    View Slide

52. РЕАЛЬНЫЕ СИТУАЦИИ
    get sizeControlHeight() {
    return this.x8;
    },
    get sizeProgress() {
    return this.x1;
    },
    get sizeProgressScroll() {
    return this.sizeProgress +
    this.sizeBase * 2;
    },
    get sizeDotBullet() {
    return this.x1;
    },
    get paddingControlHorizontal() {
    return this.x3;
    },
    get paddingControlVertical() {
    return this.x0;
    },
    get paddingMenu() {
    return this.x2;
    },
    get paddingTag() {
    return this.x2;
    },
    

    View Slide

53. 4.
    АДАПТИВНОСТЬ
    Подход похож на media queries – есть несколько разрешений,
    для адаптивных переменных указываются разные значения
    для них.
    На старте делали простой вариант – отдельные файлы с
    токенами для каждого разрешения.
    

    View Slide

54. BREAKPOINTS
    thresholds: {
    touch: 320,
    tablet: 768,
    desktopS: 1024,
    desktopM: 1280,
    default: 1366,
    desktopL: 1680,
    },
    fontH1: {
    default: {
    ...touch.fontSize6,
    fontWeight: 700,
    marginBottom: x4,
    },
    tablet: {
    ...fontSize6,
    fontWeight: 700,
    marginBottom: x4,
    },
    desktopS: {
    ...fontSize6,
    fontWeight: 700,
    marginBottom: x3,
    },
    desktopM: {
    ...fontSize7,
    fontWeight: 700,
    marginBottom: x4,
    },
    },
    

    View Slide

55. 5.
    ТЕМАТИЗАЦИЯ
    Для разных линеек продуктов свои темы оформления. Такая
    тема наследует базовую, но меняет значения некоторых
    переменных.
    Это пригодится при применении тёмной темы – видно, что
    для некоторых компаний это повод начать использовать
    токены.
    

    View Slide

56. НАСЛЕДОВАНИЕ В ТЕМАХ
    /** BASE */
    $sizeBorderRadius: 2,
    $sizeControlHeight: 32,
    $fontH1: {
    default: {
    ...fontSize6,
    fontWeight: 700,
    marginBottom: x4,
    },
    /** MEDIA */
    $sizeBorderRadius: 4,
    $sizeControlHeight: 40,
    $fontH1: {
    default: {
    ...fontSize7,
    fontWeight: 700,
    marginBottom: x4,
    },
    /** PROMO */
    $sizeBorderRadius: 8,
    $sizeControlHeight: 48,
    $fontH1: {
    default: {
    ...fontSize8,
    fontWeight: 700,
    marginBottom: x5,
    },
    

    View Slide

57. ТЕМЫ ОФОРМЛЕНИЯ
    Управляя значениями переменных мы легко можем
    формировать элементы и для других проектов.
    

    View Slide

58. ПЕРЕКЛЮЧЕНИЕ ТЕМ
    В живом гайдлайне можно пощёлкать несколько из них.
    

    View Slide

59. ТЁМНАЯ ТЕМА ОФОРМЛЕНИЯ
    Для многих компаний
    стала толчком ко внедрению токенов.
    

    View Slide

60. ПРОБЛЕМА №2
    Передаём только внешний вид
    

    View Slide

61. ПЕРЕДАЁМ
    ТОЛЬКО ВНЕШНИЙ ВИД
    Цельный компонент включает в себя как минимум внешний
    вид, логику поведения, структуру данных.
    Токены помогают только с первым – остальное всё равно
    нужно воссоздавать в альтернативных фреймворках.
    

    View Slide

62. 1
    ТЕМЫ В КОДЕ
    

    View Slide

63. 2
    ПИКТОГРАММЫ В КОДЕ
    

    View Slide

64. 3
    СЕТКИ
    Кек :(
    

    View Slide

65. 4
    ПОВЕДЕНИЕ
    

    View Slide

66. ВНЕДРЕНИЕ
    

    View Slide

67. 1.
    МОДЕЛЬНЫЕ ПРОДУКТЫ
    Выделили систему из их дизайна. Масштабируется уже
    проверенный на практике дизайн, оптимизированный с
    помощью аналитики и пользовательских исследований.
    Накануне и сразу после релиза проводится множество
    экспериментов и тестов, после которых дизайн много раз
    корректируется.
    

    View Slide

68. 1
    МОДЕЛЬНЫЕ ПРОДУКТЫ
    

    View Slide

69. 2.
    ОПИСАНИЕ ВИЗУАЛЬНОГО ЯЗЫКА
    Черновик в Confluence. Помог зафиксировать решения перед
    тем, как они попадут в код и живой гайдлайн.
    Важно не задерживаться на этом этапе, это только черновик –
    он моментально устаревает и не решает задачу унификации
    на технологическом уровне.
    

    View Slide

70. 2
    ВИЗУАЛЬНЫЙ ЯЗЫК
    

    View Slide

71. 3.
    UI KIT
    Простой способ зафиксировать решения и дёшево
    поэкспериментировать с ними.
    

    View Slide

72. 3
    UI KIT
    

    View Slide

73. 4.
    ВЫДЕЛЕНИЕ ПЕРЕМЕННЫХ
    Постепенно идём по всем элементам интерфейса в UI Kit и
    описываем переменные, которые нужны для их вёрстки.
    Разбиваем переменные на категории (цвета, типографика,
    размеры и отступы, состояния, сетка, тени и глубина, границы
    и скругления, анимация). Предлагаем систему именования,
    холиварим. Рефакторим для оптимизации.
    

    View Slide

74. 5
    ВЫДЕЛЕНИЕ ПЕРЕМЕННЫХ
    

    View Slide

75. 5.
    ТОКЕНЫ И ГЕНЕРАТОР
    Популярные форматы описания токенов – JSON, YAML,
    TypeScript (наш выбор).
    Определиться с форматами экспорта для генератора (CSS-in-
    JS, PostCSS, SASS, LESS и т.п.).
    

    View Slide

76. SALESFORCE THEO
    Есть готовые фреймворки и библиотеки,
    не нужно писать свой генератор.
    

    View Slide

77. 6.
    ПОДКЛЮЧАЕМ ТОКЕНЫ К
    КОМПОНЕНТНОМУ ФРЕЙМВОРКУ
    NPM-пакет с версионированием.
    

    View Slide

78. КОМПОНЕНТНЫЕ ФРЕЙМВОРКИ
    Они есть, но мы перестали биться за единый.
    Один из них считаем модельным, мотивируем использовать.
    

    View Slide

79. ТОКЕНЫ – ДЁШЕВО И СЕРДИТО
    Переход на них понятнее и быстрее.
    Его можно добиться постепенным рефакторингом.
    

    View Slide

80. ВЕРСИОНИРОВАНИЕ
    Дизайнеры сами могут выкатывать версии –
    сборщик проверяет, нет ли проблем.
    

    View Slide

81. ROADMAP
    План и текущий статус
    внедрения дизайн-системы в продуктах.
    

    View Slide

82. ПЛАН РАЗВИТИЯ
    

    View Slide

83. КОМАНДА
    Федеративная модель – дизайнеры и разработчики из разных
    продуктов выделяют 15-20% своего времени на поддержку
    дизайн-системы.
    Есть ключевой дизайнер и разработчик, которые ведут план
    работ.
    

    View Slide

84. ПРИМЕРЫ НА РЫНКЕ
    

    View Slide

85. МАЛО КТО ДЕЛАЕТ
    Странно, но примеров на рынке с токенами не так много.
    Хотя это самый простой и быстрый способ стартовать.
    

    View Slide

86. AWESOME DESIGN TOKENS
    Каталог дизайн-систем с использованием токенов.
    

    View Slide

87. СТАНДАРТ W3C?
    Рабочая группа пробует описать его
    и включить в инструменты дизайна.
    

    View Slide

88. СВЯЗКА С ИНСТРУМЕНТАМИ
    Компоненты в коде и символы/компоненты в Sketch/Figma не
    связаны, поддерживаются параллельно. Но попытки есть.
    

    View Slide

89. РАБОТАЕТ В ОБРАТНУЮ СТОРОНУ
    Команда GitHub экспортирует иконки из Figma
    в основной репозиторий продукта.
    

    View Slide

90. DESIGN SYSTEMS CLUB
    Каталог отечественных компонентных дизайн-систем,
    реализованных на технологическом уровне.
    http://designsystemsclub.ru/
    

    View Slide

91. ВЫВОДЫ
    

    View Slide

92. 1.
    ВЫШЕ СКОРОСТЬ СБОРКИ
    МАКЕТОВ И ПРОДУКТОВ
    Можно уделить больше внимания самому продукту,
    а не просто рисованию экранов – собирать новый интерфейс
    стало быстрее.
    Это удобно для пользователя – группа схожих продуктов
    работает одинаково понятно и привычно. А также хорошо
    для бренда – вся линейка сервисов выглядит целостной.
    

    View Slide

93. 2.
    ЛУЧШЕ КАЧЕСТВО ПРОДУКТОВ
    Контролировать большой пул проектов проще,
    когда они устроены одинаково.
    Вместо сотни отдельных проектов вы следите
    за парой гайдлайнов.
    

    View Slide

94. 3.
    КУМУЛЯТИВНЫЙ ЭФФЕКТ
    ОТ УДАЧНЫХ ПРОДУКТОВЫХ
    РЕШЕНИЙ
    Например, подняв глубину просмотра на одном из сервисов,
    легко применить эти улучшения на остальные.
    

    View Slide

95. 4.
    ПРОЩЕ ВЗАИМОДЕЙСТВИЕ
    С ДРУГИМИ КОМАНДАМИ
    Аутсорсеры делают более качественные проекты,
    другие продукты не изобретают велосипед.
    

    View Slide

96. Подключить токены к существующему коду быстрее,
    чем поменять фреймворк.
    Можно взять существующий фреймворк типа Theo,
    их хватает.
    Дизайнеры сами могут управлять файлом с токенами,
    что ускоряет цепочку обновлений.
    Инструменты дизайна не используют токены,
    но когда начнут – не придётся поддерживать компоненты
    в коде и дизайнерские шаблоны параллельно.
    

    View Slide

97. DESIGN.MAIL.RU/PARADIGM/
    

    View Slide

98. CREDITS: ДИЗАЙН
    ЕВГЕНИЙ БЕЛЯЕВ
    МАРИЯ БОБРОВА
    ЮРИЙ ВЕТРОВ
    АРТЁМ ГЛАДКОВ
    ГЕВОРГ ГЛЕЧЯН
    ПОЛИНА ГРИГОРЬЕВА
    ЕВГЕНИЙ ДОЛГОВ
    КОНСТАНТИН ЗУБАНОВ
    АЛЕКСЕЙ КАНДАУРОВ
    АЛЕКСАНДР КИРОВ
    ДМИТРИЙ ОСАДЧУК
    АЛЕКСЕЙ СЕРГЕЕВ
    ПАВЕЛ СКРИПКИН
    СВЕТЛАНА СОЛОВЬЁВА
    АНДРЕЙ СУНДИЕВ
    ЕВГЕНИЙ ФЕРУЛЁВ
    ВЯЧЕСЛАВ ЯШКОВ
    

    View Slide

99. CREDITS: РАЗРАБОТКА
    ИЛЬЯ БУРЛАК
    ДМИТРИЙ ДОРОФЕЕВ
    АНТОН ЕПРЕВ
    ВИКТОРИЯ КАМОЛДИНОВА
    КОНСТАНТИН ЛЕБЕДЕВ
    АРТЁМ МЕЗИН
    АЛЕКСЕЙ СУДИЛОВСКИЙ
    МАРИНА ТИТОВА
    СТАНИСЛАВ ТУГОВИКОВ
    АРТУР УДАЛОВ
    ЕГОР УТРОБИН
    

    View Slide

100. CREDITS: РАЗРАБОТКА
     АЛЕКСАНДР БЕКБУЛАТОВ
     ДМИТРИЙ БЕЛЯЕВ
     ВИТАЛИЙ ВАСИН
     ПАВЕЛ ВДОВЦЕВ
     КОСТЯ ВОРОЖЕЙКИН
     ЕВГЕНИЙ ИВАНОВ
     АНДРЕЙ КУСИМОВ
     СТАНИСЛАВ МИХАЛЬСКИЙ
     СЕРГЕЙ НОЖКИН
     АНТОН ПОЛЕЩУК
     БОРИС РЕБРОВ
     ПАВЕЛ РЫБИН
     АРСТАН ТОРЕГОЖИН
     МАКСИМ ТРУСОВ
     ПАВЕЛ ЩЕРБИНИН
     

     View Slide

101. P.S.
     Многие спрашивают, с какого размера компании имеет смысл
     начинать дизайн-систему.
     Токены помогают подстелить соломку даже если вы совсем
     маленькие, а потом, когда подрастёте – нарастить мышцы
     трушным компонентным фреймворком.
     

     View Slide

102. СПАСИБО!
     ЮРИЙ ВЕТРОВ
     jvetrau.com t.me/pdigest
     

     View Slide