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

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

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

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

Yury Vetrov

May 27, 2019
Tweet

More Decks by Yury Vetrov

Other Decks in Design

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