Slide 1
Slide 1 text
ТОКЕНЫ
В ДИЗАЙН-СИСТЕМАХ
Слои абстракции для дела
ЮРИЙ ВЕТРОВ
RAIFFEISEN BANK, EX-MAIL.RU GROUP
Slide 2
Slide 2 text
НИКОГДА НЕ ВВЯЗЫВАЙСЯ В
ТЕРМИНОЛОГИЧЕСКИЕ СПОРЫ
Говорил мой зав.кафедрой. Но, блин!
Slide 3
Slide 3 text
ТЕРМИН РАЗМЫЛИ К ЧЕРТЯМ
Называют всё что угодно – от библиотеки стандартных
элементов в Sketch и странички с нарезанными скриншотами
до зрелой платформы, действительно работающей на базе
распространяемых компонентов со вшитым дизайном.
Главный источник правды это сам продукт и нужно
озаботиться тем, чтобы как задумано работал именно он.
Slide 4
Slide 4 text
1950Е-1960Е
Система визуальной идентификации бренда из прошлого.
Slide 5
Slide 5 text
2000Е
UI Kit + гайдлайн в PDF или вики-системе.
Slide 6
Slide 6 text
2010Е
Компоненты в коде (хотя кто-то делал и раньше).
Работать надо с основным материалом среды – кодом.
Slide 7
Slide 7 text
СТАРАЯ И НОВАЯ ШКОЛА
Похожи на вид,
кардинально различаются в использовании.
Slide 8
Slide 8 text
ДИЗАЙН ЧАСТО «ПЕРЕВИРАЕТСЯ»
НА ПУТИ ИЗ МАКЕТОВ
В РЕАЛИЗАЦИЮ
Цепочка «гайдлайн → дизайн → вёрстка → реализация» –
тупик, вечная ручная работа.
Чтобы избавиться от кучи геморроя по внедрению,
улучшению и поддержке продуктов, её нужно перевести в
«гайдлайн = дизайн = вёрстка → реализация».
Slide 9
Slide 9 text
КАК ЭТО РАБОТАЕТ
визуальный язык → UI Kit → макеты (ТЗ)
↓ ↓
компоненты → вёрстка → реализация
(сборка из готовых кусков)
Slide 10
Slide 10 text
ПРЕДЫСТОРИЯ
Начали в 2012 году
Slide 11
Slide 11 text
ПРОДУКТЫ СИЛЬНО ОТЛИЧАЮТСЯ
Slide 12
Slide 12 text
ЕСТЬ ДРУГИЕ БРЕНДЫ
Slide 13
Slide 13 text
НАЧАЛИ В 2012: МОБИЛЬНЫЙ ВЕБ
Slide 14
Slide 14 text
ДИЗАЙН-СИСТЕМА = UI KIT? НЕТ
Slide 15
Slide 15 text
2012-2013: МОБИЛЬНЫЙ ВЕБ
Slide 16
Slide 16 text
2014-2015: МЕДИАПРОЕКТЫ
Slide 17
Slide 17 text
2014: ХАКАТОН И ИДЕОЛОГИЯ
Slide 18
Slide 18 text
2015:
ПЛАТФОРМЕННОЕ МЫШЛЕНИЕ
Текущее видение целостной дизайн-
системы мы описали в 2015 году и с тех
пор постепенно реализуем его.
Slide 19
Slide 19 text
2017: ТОКЕНЫ
Slide 20
Slide 20 text
1
ВИЗУАЛЬНЫЙ ЯЗЫК
Правила, по которым создаются продукты:
design.mail.ru/paradigm/
Slide 21
Slide 21 text
2
ЕДИНЫЕ КОМПОНЕНТЫ В КОДЕ
Единственный источник правды. Дизайн «вшит» в них,
сервисы получают и обновляют их из единого репозитория.
Slide 22
Slide 22 text
3
ШАБЛОНЫ ДЛЯ ДИЗАЙНЕРОВ
Быстро показать идею, высокоуровневые скетчи. В идеальной
ситуации макеты не верстают, а собирают из единых компонентов.
Slide 23
Slide 23 text
ОСНОВНЫЕ ПРИНЦИПЫ
Slide 24
Slide 24 text
1.
МОДУЛЬНОСТЬ
Позволяет сравнительно легко управлять большим
количеством продуктов. Интерфейс строится по принципу
слоёв абстракции:
«переменные → базовые элементы интерфейса →
компоненты для реализации конкретных задач → экраны
продукта».
Slide 25
Slide 25 text
2.
ПАРАМЕТРИЧНОСТЬ
Изменение конкретных параметров, из которых строятся
элементы интерфейса, позволяет добиться масштабируемости
на продукты разных типов.
Для этого мы используем переменные и миксины.
Slide 26
Slide 26 text
3.
МИНИМУМ КОСТЫЛЕЙ
Собирай элементы интерфейса из уже существующих
переменных, а компоненты – из уже существующих
элементов.
Любые принимаемые нами решения должны вписываться
в систему, жить по её правилам и потенциально быть
готовыми к применению на любом из наших продуктов.
Slide 27
Slide 27 text
4.
4DP
Так называемый «супер-пиксель».
Краеугольный камень системы, на нём строится вся система
размерностей.
Мы мыслим исключительно цифрами, кратными 4-м.
Slide 28
Slide 28 text
5.
АДАПТАЦИЯ
Под мобильные (малые экраны) и сенсорные экраны
(управление пальцем, нет мыши).
Любые наши решения априори должны быть touch-friendly –
это касается размеров элементов, действий по наведению и
т.п.
Исключения бывают для внутренних инструментов вроде нишевых интранет-сайтов.
*
*
Slide 29
Slide 29 text
ПРОБЛЕМА №1
Не всегда удаётся
единый компонентный фреймворк
Slide 30
Slide 30 text
ТОКЕНЫ – ДЁШЕВО И СЕРДИТО
Когда единый компонентный фреймворк не получается.
Слой абстракции под компонентными фреймворками.
PARADIGM
PRODUCTIVITY МЕДИА B2B ПРОМО
ПОЧТА НОВОСТИ MCS САЙТЫ
ОБЛАКО КИНО BIZ ПИСЬМА
КАЛЕНДАРЬ АВТО
Slide 31
Slide 31 text
КАК РАБОТАЮТ ТОКЕНЫ
Config-файл, визуальный язык в переменных. Генерируется
файл для СSS-препроцессоров, его подключает фреймворк.
Slide 32
Slide 32 text
ВЕБ И МОБИЛЬНЫЕ ВМЕСТЕ
Из одного config-файла
делаются версии для любых платформ.
Slide 33
Slide 33 text
ОСНОВА ВИЗУАЛЬНОГО ЯЗЫКА
Играя с набором параметров, мы можем быстро получить
любой элемент. Например, простую кнопку:
Slide 34
Slide 34 text
ТИПОГРАФИКА
Все размеры и начертания мы храним в переменных. От проекта к
проекту они могут меняться, но основные группы одни и те же.
Slide 35
Slide 35 text
СЕТКА И ОТСТУПЫ
Каждый элемент дизайн-системы строится по модулям
в 4dp (density independent pixels)
Slide 36
Slide 36 text
ГРАНИЦА И ФОН
На помощь приходят чуть более сложные функции (mixin),
и прозрачности.
Slide 37
Slide 37 text
HOVER
@mixin stateHover ($colorBgSecondary) {
background: mix($colorTrueBlack, $colorBgSecondary, 4%);
}
Slide 38
Slide 38 text
ACTIVE
@mixin stateActive ($colorBgSecondary) {
background: mix($colorTrueBlack, $colorBgSecondary, 8%);
}
Slide 39
Slide 39 text
ТЕНЬ
Элемент приподнят над базовым уровнем
(кнопки, карточки) – часть лейаута или дополнительная
информация к основному контенту.
Slide 40
Slide 40 text
КНОПКА В СБОРЕ
Slide 41
Slide 41 text
АКЦЕНТНАЯ КНОПКА
За счет изменения параметра отвечающего
за фон, мы можем сделать из обычной кнопки – акцентную.
Slide 42
Slide 42 text
АКЦЕНТНАЯ КНОПКА
Slide 43
Slide 43 text
1.
СЕМАНТИКА
Все переменные названы относительно задачи («цвет
второстепенного фона»), а не просто визуального
представления («светло-серый»).
Это позволяет проще переопределять стиль – меняя
значение, не нужно рефакторить вызов самих переменных.
Правда, для расстояний и отступов это не сработает.
Slide 44
Slide 44 text
СЕМАНТИКА
$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,
},
Slide 45
Slide 45 text
2.
МИНИМУМ ПЕРЕМЕННЫХ (~200)
В них проще разобраться и легче выбрать правильную,
меньше избыточности.
В некоторых фреймворках их тысячи, но мы пытались найти
баланс между гибкостью и предсказуемостью.
Slide 46
Slide 46 text
ЦВЕТА
$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,
Slide 47
Slide 47 text
ШРИФТЫ
$fontBody: {
fontSize: 15,
lineHeight: 20,
fontWeight: 400,
marginBottom: 0,
},
$fontH1: {},
$fontH2: {},
$fontH3: {},
$fontH4: {},
$fontParagraph: {},
$fontList: {},
$fontFootnote: {},
$fontLead: {},
$fontQuote: {},
$fontTableHeader: {},
$fontControl: {},
$fontControlLabel: {},
$fontTab: {},
$fontBadge: {},
Slide 48
Slide 48 text
ОТСТУПЫ
/** РАЗМЕРЫ ЭЛЕМЕНТОВ */
$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,
Slide 49
Slide 49 text
ДЕКОР
/** ГРАНИЦЫ ЭЛЕМЕНТОВ */
$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,
Slide 50
Slide 50 text
3.
НАСЛЕДОВАНИЕ
Чтобы уменьшить количество переменных и повысить
управляемость, многие значения наследуются или считаются
от единой шкалы: отступы, цвета, типографика, прозрачности.
Шкала – это пространство возможных решений. Конкретная
переменная – решение для конкретной ситуации.
Slide 51
Slide 51 text
ШКАЛА
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;
Slide 52
Slide 52 text
РЕАЛЬНЫЕ СИТУАЦИИ
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;
},
Slide 53
Slide 53 text
4.
АДАПТИВНОСТЬ
Подход похож на media queries – есть несколько разрешений,
для адаптивных переменных указываются разные значения
для них.
На старте делали простой вариант – отдельные файлы с
токенами для каждого разрешения.
Slide 54
Slide 54 text
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,
},
},
Slide 55
Slide 55 text
5.
ТЕМАТИЗАЦИЯ
Для разных линеек продуктов свои темы оформления. Такая
тема наследует базовую, но меняет значения некоторых
переменных.
Это пригодится при применении тёмной темы – видно, что
для некоторых компаний это повод начать использовать
токены.
Slide 56
Slide 56 text
НАСЛЕДОВАНИЕ В ТЕМАХ
/** 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,
},
Slide 57
Slide 57 text
ТЕМЫ ОФОРМЛЕНИЯ
Управляя значениями переменных мы легко можем
формировать элементы и для других проектов.
Slide 58
Slide 58 text
ПЕРЕКЛЮЧЕНИЕ ТЕМ
В живом гайдлайне можно пощёлкать несколько из них.
Slide 59
Slide 59 text
ТЁМНАЯ ТЕМА ОФОРМЛЕНИЯ
Для многих компаний
стала толчком ко внедрению токенов.
Slide 60
Slide 60 text
ПРОБЛЕМА №2
Передаём только внешний вид
Slide 61
Slide 61 text
ПЕРЕДАЁМ
ТОЛЬКО ВНЕШНИЙ ВИД
Цельный компонент включает в себя как минимум внешний
вид, логику поведения, структуру данных.
Токены помогают только с первым – остальное всё равно
нужно воссоздавать в альтернативных фреймворках.
Slide 62
Slide 62 text
1
ТЕМЫ В КОДЕ
Slide 63
Slide 63 text
2
ПИКТОГРАММЫ В КОДЕ
Slide 64
Slide 64 text
3
СЕТКИ
Кек :(
Slide 65
Slide 65 text
4
ПОВЕДЕНИЕ
Slide 66
Slide 66 text
ВНЕДРЕНИЕ
Slide 67
Slide 67 text
1.
МОДЕЛЬНЫЕ ПРОДУКТЫ
Выделили систему из их дизайна. Масштабируется уже
проверенный на практике дизайн, оптимизированный с
помощью аналитики и пользовательских исследований.
Накануне и сразу после релиза проводится множество
экспериментов и тестов, после которых дизайн много раз
корректируется.
Slide 68
Slide 68 text
1
МОДЕЛЬНЫЕ ПРОДУКТЫ
Slide 69
Slide 69 text
2.
ОПИСАНИЕ ВИЗУАЛЬНОГО ЯЗЫКА
Черновик в Confluence. Помог зафиксировать решения перед
тем, как они попадут в код и живой гайдлайн.
Важно не задерживаться на этом этапе, это только черновик –
он моментально устаревает и не решает задачу унификации
на технологическом уровне.
Slide 70
Slide 70 text
2
ВИЗУАЛЬНЫЙ ЯЗЫК
Slide 71
Slide 71 text
3.
UI KIT
Простой способ зафиксировать решения и дёшево
поэкспериментировать с ними.
Slide 72
Slide 72 text
3
UI KIT
Slide 73
Slide 73 text
4.
ВЫДЕЛЕНИЕ ПЕРЕМЕННЫХ
Постепенно идём по всем элементам интерфейса в UI Kit и
описываем переменные, которые нужны для их вёрстки.
Разбиваем переменные на категории (цвета, типографика,
размеры и отступы, состояния, сетка, тени и глубина, границы
и скругления, анимация). Предлагаем систему именования,
холиварим. Рефакторим для оптимизации.
Slide 74
Slide 74 text
5
ВЫДЕЛЕНИЕ ПЕРЕМЕННЫХ
Slide 75
Slide 75 text
5.
ТОКЕНЫ И ГЕНЕРАТОР
Популярные форматы описания токенов – JSON, YAML,
TypeScript (наш выбор).
Определиться с форматами экспорта для генератора (CSS-in-
JS, PostCSS, SASS, LESS и т.п.).
Slide 76
Slide 76 text
SALESFORCE THEO
Есть готовые фреймворки и библиотеки,
не нужно писать свой генератор.
Slide 77
Slide 77 text
6.
ПОДКЛЮЧАЕМ ТОКЕНЫ К
КОМПОНЕНТНОМУ ФРЕЙМВОРКУ
NPM-пакет с версионированием.
Slide 78
Slide 78 text
КОМПОНЕНТНЫЕ ФРЕЙМВОРКИ
Они есть, но мы перестали биться за единый.
Один из них считаем модельным, мотивируем использовать.
Slide 79
Slide 79 text
ТОКЕНЫ – ДЁШЕВО И СЕРДИТО
Переход на них понятнее и быстрее.
Его можно добиться постепенным рефакторингом.
Slide 80
Slide 80 text
ВЕРСИОНИРОВАНИЕ
Дизайнеры сами могут выкатывать версии –
сборщик проверяет, нет ли проблем.
Slide 81
Slide 81 text
ROADMAP
План и текущий статус
внедрения дизайн-системы в продуктах.
Slide 82
Slide 82 text
ПЛАН РАЗВИТИЯ
Slide 83
Slide 83 text
КОМАНДА
Федеративная модель – дизайнеры и разработчики из разных
продуктов выделяют 15-20% своего времени на поддержку
дизайн-системы.
Есть ключевой дизайнер и разработчик, которые ведут план
работ.
Slide 84
Slide 84 text
ПРИМЕРЫ НА РЫНКЕ
Slide 85
Slide 85 text
МАЛО КТО ДЕЛАЕТ
Странно, но примеров на рынке с токенами не так много.
Хотя это самый простой и быстрый способ стартовать.
Slide 86
Slide 86 text
AWESOME DESIGN TOKENS
Каталог дизайн-систем с использованием токенов.
Slide 87
Slide 87 text
СТАНДАРТ W3C?
Рабочая группа пробует описать его
и включить в инструменты дизайна.
Slide 88
Slide 88 text
СВЯЗКА С ИНСТРУМЕНТАМИ
Компоненты в коде и символы/компоненты в Sketch/Figma не
связаны, поддерживаются параллельно. Но попытки есть.
Slide 89
Slide 89 text
РАБОТАЕТ В ОБРАТНУЮ СТОРОНУ
Команда GitHub экспортирует иконки из Figma
в основной репозиторий продукта.
Slide 90
Slide 90 text
DESIGN SYSTEMS CLUB
Каталог отечественных компонентных дизайн-систем,
реализованных на технологическом уровне.
http://designsystemsclub.ru/
Slide 91
Slide 91 text
ВЫВОДЫ
Slide 92
Slide 92 text
1.
ВЫШЕ СКОРОСТЬ СБОРКИ
МАКЕТОВ И ПРОДУКТОВ
Можно уделить больше внимания самому продукту,
а не просто рисованию экранов – собирать новый интерфейс
стало быстрее.
Это удобно для пользователя – группа схожих продуктов
работает одинаково понятно и привычно. А также хорошо
для бренда – вся линейка сервисов выглядит целостной.
Slide 93
Slide 93 text
2.
ЛУЧШЕ КАЧЕСТВО ПРОДУКТОВ
Контролировать большой пул проектов проще,
когда они устроены одинаково.
Вместо сотни отдельных проектов вы следите
за парой гайдлайнов.
Slide 94
Slide 94 text
3.
КУМУЛЯТИВНЫЙ ЭФФЕКТ
ОТ УДАЧНЫХ ПРОДУКТОВЫХ
РЕШЕНИЙ
Например, подняв глубину просмотра на одном из сервисов,
легко применить эти улучшения на остальные.
Slide 95
Slide 95 text
4.
ПРОЩЕ ВЗАИМОДЕЙСТВИЕ
С ДРУГИМИ КОМАНДАМИ
Аутсорсеры делают более качественные проекты,
другие продукты не изобретают велосипед.
Slide 96
Slide 96 text
Подключить токены к существующему коду быстрее,
чем поменять фреймворк.
Можно взять существующий фреймворк типа Theo,
их хватает.
Дизайнеры сами могут управлять файлом с токенами,
что ускоряет цепочку обновлений.
Инструменты дизайна не используют токены,
но когда начнут – не придётся поддерживать компоненты
в коде и дизайнерские шаблоны параллельно.
Slide 97
Slide 97 text
DESIGN.MAIL.RU/PARADIGM/
Slide 98
Slide 98 text
CREDITS: ДИЗАЙН
ЕВГЕНИЙ БЕЛЯЕВ
МАРИЯ БОБРОВА
ЮРИЙ ВЕТРОВ
АРТЁМ ГЛАДКОВ
ГЕВОРГ ГЛЕЧЯН
ПОЛИНА ГРИГОРЬЕВА
ЕВГЕНИЙ ДОЛГОВ
КОНСТАНТИН ЗУБАНОВ
АЛЕКСЕЙ КАНДАУРОВ
АЛЕКСАНДР КИРОВ
ДМИТРИЙ ОСАДЧУК
АЛЕКСЕЙ СЕРГЕЕВ
ПАВЕЛ СКРИПКИН
СВЕТЛАНА СОЛОВЬЁВА
АНДРЕЙ СУНДИЕВ
ЕВГЕНИЙ ФЕРУЛЁВ
ВЯЧЕСЛАВ ЯШКОВ
Slide 99
Slide 99 text
CREDITS: РАЗРАБОТКА
ИЛЬЯ БУРЛАК
ДМИТРИЙ ДОРОФЕЕВ
АНТОН ЕПРЕВ
ВИКТОРИЯ КАМОЛДИНОВА
КОНСТАНТИН ЛЕБЕДЕВ
АРТЁМ МЕЗИН
АЛЕКСЕЙ СУДИЛОВСКИЙ
МАРИНА ТИТОВА
СТАНИСЛАВ ТУГОВИКОВ
АРТУР УДАЛОВ
ЕГОР УТРОБИН
Slide 100
Slide 100 text
CREDITS: РАЗРАБОТКА
АЛЕКСАНДР БЕКБУЛАТОВ
ДМИТРИЙ БЕЛЯЕВ
ВИТАЛИЙ ВАСИН
ПАВЕЛ ВДОВЦЕВ
КОСТЯ ВОРОЖЕЙКИН
ЕВГЕНИЙ ИВАНОВ
АНДРЕЙ КУСИМОВ
СТАНИСЛАВ МИХАЛЬСКИЙ
СЕРГЕЙ НОЖКИН
АНТОН ПОЛЕЩУК
БОРИС РЕБРОВ
ПАВЕЛ РЫБИН
АРСТАН ТОРЕГОЖИН
МАКСИМ ТРУСОВ
ПАВЕЛ ЩЕРБИНИН
Slide 101
Slide 101 text
P.S.
Многие спрашивают, с какого размера компании имеет смысл
начинать дизайн-систему.
Токены помогают подстелить соломку даже если вы совсем
маленькие, а потом, когда подрастёте – нарастить мышцы
трушным компонентным фреймворком.
Slide 102
Slide 102 text
СПАСИБО!
ЮРИЙ ВЕТРОВ
jvetrau.com t.me/pdigest