0:00 С вами Женя, автор телеграм-канала Манкен Дизайнер.
0:03 Я запускаю новый формат подкастов.
0:05 У меня уже есть подкаст, который мы выпускаем совместно с юстехом, это дизайн тусовка.
0:09 И там мы строим наши беседы конкретно от людей, конкретно от дизайнеров.
0:14 И дальше уже развиваем тему общения, говорим про их опыт, говорим, чем они занимаются, и так далее.
0:20 Этот формат - конкретно про дизайн, где у нас центр - это тема дизайна, и беседа уже строится вокруг нее.
0:28 Сегодня вы можете слышать только мой голос.
0:30 В дальнейшем я планирую, что на этот подкаст будут приходить какие-то гости.
0:34 Возможно, в этом подкасте появится второй ведущий или ведущая.
0:39 Подписывайся на телеграм-канал Манкин Дизайнер.
0:41 Ссылка будет в описании к этому подкасту.
0:43 Возможно, вы уже пришли из этого канала, но все равно делитесь ссылочками.
0:46 Ставьте лайки на Эпл подкастах, ставьте оценочки и на Яндекс.Музыки также нажимайте лайкосик.
0:56 это первый пилотный выпуск.
0:58 У меня уже готов почти материал по дизайн токенам.
1:02 Я его рассказывал на конференциях, но он был такой немножечко размазанный.
1:05 Я готовлю статью для хабра, где максимально подробно расскажу весь процесс от и до, то есть от момента задумки до момента внедрения уже в готовое приложение, и момент работы с кодом, то есть какие библиотеки существуют, как компилировать, как поднять эту библиотеку и какие-то полезные лайфхаки.
1:24 И так как мне очень сильно хотелось записать этот выпуск, я решил начать с этой темы, которая у меня уже проработана и лежит в загашнике.
1:35 Сейчас проходит очень много лекций, конференций, дизайнеры только рассказывают.
1:40 На небе есть разговоров, что о дизайн-системах и дизайн-токенах.
1:44 И здесь хотелось бы более подробно раскрыть эту историю.
1:47 Сегодня, возможно, будут какие-то сложные примеры, которые голосам не передать и их лучше показывать, но я постараюсь донести какую-то общую концепцию, общую суть по работе с так называемыми дизайн токенами.
2:00 Ну и давайте наверное начнем.
2:01 То есть, сегодня мы разберем, что такое токен, для чего они нужны, если они нужны и нужны ли вообще, когда они нужны, на каком этапе они нужны и, как внедрить их в этот процесс.
2:12 В последнее время в дизайн-сообществах ведутся разговоры о дизайн-системах, как правильно строить, как правильно их процессить, как тестировать компоненты.
2:20 Здесь разработчики уже придумали все давным-давно за нас, и они используют это все в виде фреймворков и вполне себе успешно работают.
2:29 Здесь просто дизайнеры говорят о самом процессе, и также с самими дизайн токенами.
2:33 Само понятие далеко не новое, в разработке давно практикуются так называемые переменные, которые внесут в себе какие-то значения, но просто в них есть небольшая разница.
2:42 Давайте обо всем по порядку.
2:46 Самое первое упоминание о дизайн токенах было в 2016 году когда джинна болтон и джон левин представляли дизайн систему лайнг от сайфор там они рассказали о своем подходе к проектированию как токены переносят дизайн и как поддерживать вообще кросс-платформенность.
3:03 И даже для этого разработали свой собственный продукт, который называется Тео.
3:07 Его можно найти на гетхабе Сейлфорса, который компилирует Джессо в необходимый формат.
3:11 Ну там не только Джессон, там еще и КМЛ, по-моему, но не суть.
3:15 А ссылку на это видео я ставлю в описании к подкасту.
3:17 Обязательно посмотрите, очень интересно, очень информативно.
3:20 И вообще, в целом, хочется сказать, что в русскоязычном сегменте интернета они так на самом деле много и статей.
3:25 Есть общая какая-то вводная статья.
3:27 По-моему, на ее экспабе я ее видел.
3:29 Потом я видел статью про опыт Баду, переведенный на хабре.
3:34 И Юра Ветров рассказывал о дизайн-токенах на какой-то фронт-энд конференции.
3:38 И в целом мне эта история понравилась, эта идея классная.
3:41 Такая, знаете, что называется, подстелить соломку на всякий случай, если вдруг мы масштабируемся или у нас есть какие-то задачи, которые должны масштабировать наши стили.
3:49 Какое место вообще токены занимают во всем процессе дизайна?
3:53 Если мы говорим про какие-то большие приложения, их массовость и платформенность, то наверняка эти приложения строятся на каком-то фундаменте.
3:59 И этот фундамент - дизайн-система.
4:01 И если следовать концепции атомарного дизайна Брэда Фроста, то дизайн-система состоит из самой мельчайшей частицы - это атом, из атомов у нас строятся молекулы, из атомов и молекулов у нас строятся организмы, там дальше шаблоны и страницы.
4:18 И если на весь этот принцип прикрутить токены, то получается, что они встают в самое начало вот этой вот цепочки и становятся самыми маленькими частицами атомарного дизайна.
4:29 И что наверное здесь самое важное хотелось бы сказать, что если вы занимаетесь какими-то лендингами или там небольшими веб-корпоративными сайтами, этот продукт у вас там один, а не такой уж и большой, то дизайн-система и уж тем более дизайн-токены вам здесь не нужны.
4:43 Но для общего понимания я советую послушать этот выпуск до конца.
4:50 Токены своего рода являются переносчиками.
4:53 Дизайн данных: это цвет, это типографика и это тень.
4:57 Ну такой базовый функционал но на самом деле их предназначение может быть расширено там могут быть какая-то размерная сетка отступы скругления брейкпоинты и так далее то есть кто во что гораздо хранятся дизайн токены в джесон файле.
5:11 Джессон это, ну, ребята, фронт-эндеры, простите, я здесь буду упрощать какие-то вещи.
5:16 Джессон это всего лишь там текстовый файлик с разрешением.жон.
5:20 Этот формат основан на джаваскрипт.
5:22 И здесь нет никакого программирования, ничего сложного.
5:24 Нам нужно просто вложить одно значение токена в другой.
5:26 Хранятся токены в джон-файле, которые потом компилируются специальным серверным приложением.
5:31 Ну, грубо говоря, это такая приложуха, как у вас стоит на комплюктеле, а это вот стоит на сервере.
5:36 Ее нельзя пощупать, у нее нет юай интерфейса, там только командная строка, и мы можем задавать какие-то команды.
5:41 И это может быть теоцлфорс, и это может быть стайл дикшенеры от Амазон и какие-то другие продукты, и дальше они уже раскладывают в качестве переменных наши токены в веб, 8 или 1.
5:53 Получается, что есть такой централизованный файл - вот этот джейсончик, который лежит себе на сервере спокойно, он хранит себе какие-то дизайн данные, это там заливки, обводки, цвет, типографику и прочее.
6:05 И здесь нам стоит на самом деле только его подменить один раз, если вдруг мы там покрасили основной цвет кнопки.
6:11 Мы его подменяем на сервере, и сервер уже компилирует и раскатывает новые значения на все приложения.
6:16 Токены могут помочь синхронизироваться дизайнеру и разработчику, и здесь важно выстроить какой-то правильный процесс.
6:23 Но сперва о проблематике.
6:27 Если мы хотим получить прозрачный и вполне себе понятный путь, то давайте рассмотрим ситуацию, как делать не стоит.
6:35 В качестве примера сегодня будем разбирать цветовые стили.
6:38 Некоторые ребята объявляют глобальные переменные цвета: там праймари, секондари и применяют их ко всем элементам на странице.
6:46 Это там кнопки, иконки, ссылки, какие-то островки цветные, контрастные.
6:51 И вот один - значит, стиль хранится для всех объектов на странице.
6:55 Хуже, когда у нас появляются стили типа грин, 1, 3, просто зеленый, лайт ред, ред, ред 2, ред 3 и прочее.
7:05 То есть с этим вообще непонятно., как работать Если грин станет вдруг синим, он нор придет и скажет: слушай, чувак, а давай-ка мы наши уведомления покрасим синий цвет.
7:16 Тогда у нас переменная, как бы, обнуляется, у нас семантика самой переменной называется зеленая, значение синее.
7:24 Возникают вопросики и проблемки.
7:26 Да, если мы не наладили вот эту синхронизацию, как разработчик увидел фигме эти стили, он так забивает эту глобальную переменную, которую он назначает в СССР, неважно, и уже как бы с ней работает по всему документу.
7:38 И здесь я вижу, на самом деле, две глобальные проблемы: то есть, если мы говорим с точки зрения дизайна, новый дизайнер, который придут на проект, или которому вы передадите этот проект дальше, они просто не поймут, где какой цвет использовать, потому что надо здесь использовать красный или лайт-красный.
7:53 А разработчики могут просто там на 5-0-строчке сесс, извините, товарищи фронтендеры, вы меня за это побьете.
8:00 У них открыто несколько документов, которые они разбили по типам содержания, там кнопки и таблицы.
8:06 И там, например, они в ССС написали уже какую-нибудь тысячную строчку кода и объявляя переменную к какому-то элементу, они просто не помнят, а какой здесь должен быть 3 или 1.
8:17 И в этом, конечно, большая проблема.
8:20 Неудобно переключаться по окнам.
8:22 В итоге разработчики скажут: ай так сойдет, где надо было использовать светло-красный, они будут использовать красный.
8:28 Плюс, если у вас в какой-то глобальной переменной прайме, заведены иконки и кнопки - все в один, и в какой-то момент необходимо будет разъединить эти сущности.
8:38 Например, необходимо будет подкрасить иконки, ну, поменять с основного цвета какого-то там до акцентного цвета на какой-нибудь черный или серый.
8:46 То что здесь необходимо будет сделать?
8:47 Здесь либо перекрашивать сам праймарье цвет, что повлечет за собой изменения цвета основных кнопок, или ломать стиль у иконки и создавать уже новый стиль.
8:57 Но в фигме вам помогут какие-то плагины, сметчить одни и те же объекты, но разработки будет, конечно, геморроя немножечко побольше.
9:05 Если вернуться к токенам, то токены вообще подразумевают собой семантическое название и передают, то есть, в самом названии они передают смысл для чего они применяются.
9:15 Пваеря у нас есть категория: это категория токена, цвет, шрифт, размер, тип токена: это бэкграунд, бордер, айтем - это конкретный элемент, баттен, тейбл, инпут, саб-айтом, такое плавающее значение, если нам не хватает обычной конструкции.
9:29 Вот мы такие вот фантазеры там навыдумывали себе длину токена огромную.
9:33 И, собственно, стейт стейт - это состояние элемента.
9:36 Там у элемента бывают состояние дефолт, ховер, активно, дислет.
9:39 Но такая конструкция, конечно же, не строгая, не нужно вымучивать из себя название.
9:43 Если вдруг вам что-то не подходит по этой конструкции, вы такие, блин, как бы еще назвать?
9:48 Здесь нужно просто согласовать семантику с разработчиком и понять, как удобнее все будет работать вам.
9:52 То есть, здесь будет все зависеть от ваших условий, фантазий и насколько вообще хотите дробить переменные.
9:58 И чтобы внедрить такой подход в готовый интерфейс, вам необходимо провести инвентаризацию вашего интерфейса и понять, на какие группы вы будете делить ваши цветовые стили.
10:07 Так как мы говорим, конечно же, о цвете, то здесь нужно будет проводить инвентаризацию с цветом.
10:14 В разных проектах я задаю стили по-разному, все зависит от контекста самой задачи.
10:20 Но вот давайте возьмем самый свежий пример.
10:22 Нам нужно было на продукте Тил и Чарк подготовить некую такую кастомизацию под каждого клиента.
10:27 То есть, у нас есть основные цвета приложения, веб-приложения, и дальше у нас заказчик покупает этот продукт и говорит, покрасьте мне его в необходимый цвет.
10:37 Нужно этим было как-то управлять.
10:38 И здесь я разделил цвета на несколько групп.
10:42 Сюда входит общий фон страницы, фон подложек, бордеров к подложкам, таблицам, самостоятельным разделителем, акцентный фон - тот самый, знаете, праймари, который вот такой яркий, цветной для заливки различных элементов.
10:54 И фон для модальных окон с прозрачностью, вторая группа цветовых стилей - это кнопки.
11:00 Здесь я разбиваю уже кнопки по типу праймари, аутлайн и какой-нибудь, не знаю, там линк, если кнопка без фона или выглядит как ссылка.
11:08 Здесь у каждой категории кнопки свои стили на обычное состояние при наведении, нажатии и в заблокированном состоянии.
11:14 Третья группа - это если у меня есть какие-то статусы.
11:17 Обязательно у меня есть папочка статусы, и там лежат уже все подписанные стили.
11:21 Четвертая группа - это текст.
11:23 Здесь у меня темный текст на белом фоне, белый текст на ярком фоне.
11:27 И если необходимо я добавляю какие-то там цвета с прозрачностью.
11:31 если это нужно, но знаете, там кэпшены какие-нибудь подписать.
11:34 И последний тип - пятый - это иконки.
11:36 Здесь я делаю основной цвет иконки и инвертный цвет иконки для каких-то ярких фонов.
11:42 Такое вполне себе может быть.
11:44 Вы можете уже, конечно, градацию какую-то привести.
11:46 Бывает, что иконки там в статусах, но это можно тоже отнести к статусам и описать этот статус для чего оно будет применяться.
11:52 Эти стили я, значит, раскладываю по папкам, называю семантически так, чтобы было понятно, для чего этот цвет.
11:56 У меня есть значит, это правая панелька со стилями.
11:59 Цвет там есть папка бэкграунд, в нем лежит уже стиль Айленд, ну для каких-то островков, или там бэкграунд для каких-то обводок.
12:08 И здесь обводки могут быть и для самих островков, и самостоятельные дивайдеры, и строчки таблицы, эти разделители.
12:15 Ну или, например, для кнопок папочка батн, к ней папочка праймари, и там уже стиле дефолт, ховер, активно, дизайл.
12:22 И самое главное, не бойтесь, если ваши цвета будут повторяться.
12:24 Например, акцентный цвет фона, иконки и кнопки у вас будут одинаковые.
12:28 Это вполне себе нормально и даст просто вам гибкости в управлении этих элементов.
12:32 То есть не нужно делать один цвет праймари и все.
12:34 И вот забивать его на все элементы.
12:36 Нет, он может быть с одним значением, там, например, какой-нибудь, ну, давайте, фиолетовый какой-нибудь возьмем цвет.
12:41 И он может один и тот же хекс-код присутствовать в разных стилях.
12:44 И это вполне себе будет нормально.
12:46 И если в какой-то момент вы вдруг захотите изменить цвет иконок, то вам будет достаточно поменять стиль самой иконки, которая относится к ней, и не затрагивать другие стили, там кнопок, бэкграундов и прочее.
12:59 Ну окей, мы сделали инвентаризацию, разобрались семантики цвета.
13:03 И пора уже выгружать токены.
13:04 Здесь есть несколько путей.
13:06 Первый путь - это путь в никуда.
13:07 Сложно для начального уровня.
13:09 Нужно написать ДСН с токенами самим.
13:11 Прям ручками взять, открыть какой-нибудь редактор кода, создать файлик Джон и написать ручками.
13:16 И это даже не полуавтоматизировано, поэтому путь абсолютно не наш.
13:20 Второй путь, если вы на проекте используете документацию от Зеро Хейт.
13:24 А это такой сервис, я уже о нем рассказывал, фигма френдли сервис, где одной кнопкой можно подтянуть все стили и компоненты для разработчиков, и описать их поведение и свойства.
13:33 И вот там они поддерживают как раз базовый дизайн токены.
13:36 Это цветы типа графика.
13:38 Там даже ничего писать не надо, просто нажать на кнопку выгрузить из фигмы, добавить сущность токены и он вам уже сгенерирует необходимые токены по вашим стилям.
13:47 Нам остается только отдать разработчику ссылку, и собственно все на этом.
13:50 Все заведется и все поедет.
13:52 И также, если мы там изменили дизайн, нам достаточно зайти в зерхейт, его обновить, и уже на пройде мы получим готовый результат.
13:59 И у нас есть третий путь - вполне себе настраиваемый - и это наш вариант - воспользоваться плагинами Фигме.
14:05 Здесь их два плагина: дизайн и Фигма токен.
14:08 Оба умеют выгружать базовый стиль, цвет, типографику и тени.
14:12 И здесь каждый умеет в какие-то расширенные типы, у каждого по-разному: отступы, размеры, скругления, брейк-поинты и так далее.
14:19 Но пользовался и первым.
14:21 Оба хороши, просто у кого-то есть свои плюсы, у кого-то есть свои минусы.
14:24 Сейчас я пользуюсь вторым Фигма токенс, и здесь большой плюс в том, что токены можно не только выгружать из него, но и загружать.
14:30 Например, если разработчик подправил значение токена в коде, а вы не хотите делать это руками, там лезть в фигму, залезать в стиль, то можно просто взять этот джон-файл, который разработчик подправил, и просто залить в сам плагин.
14:43 И тогда стиле автоматически применятся у вас в фигме.
14:46 И здесь еще большим плюсом является то, что с помощью этого плагина можно вести вполне себе понятную документацию к стилям.
14:52 То есть вы можете создать компонентик вашей документации, например, там какой-нибудь квадратик, знаете, с заливкой цвета, название токена, значение этого токена, там хекс, РГБ или ЧСЛ и описание.
15:03 Плагине можно прилинковать каждому слою, что это означает, и вполне себе можно вести понятную документацию.
15:08 Вот у нас есть заливка, название токена, его значение и описание.
15:11 И здесь, если мы будем что-то менять в стилях, то там по нажатию автоматически либо по нажатию кнопки апдейт все будет прилетать в эту документацию.
15:20 То есть не нужно ничего ходить, ручками править, что-то там смотреть, поменяли, не поменяли - очень вполне себе удобная штука.
15:26 Как только мы добавим в плагин со стиля, уже можно выгрузить джейсончик разрабу.
15:30 И дальше просто происходит какая-то магия.
15:32 Разработчик подкладывает джейсончик на сервер, компилирует его, токены уже превращаются в переменные под разные платформы, и наши стили из фигмы уже приобретают смысл в переменных.
15:42 Название самой переменной, ну или дизайн токена, как хотите, будет уже выглядеть следующим образом: колор, батн, праймари, дефолт, то есть первая категория, потом тип кнопка, атом, праймари и уже состояние дефолт и дальше какое-то значение или кнопка при наведении будет выглядеть абсолютно так же там колор батн праймари только в конце будет ховер вы конечно увидеть это не можете но кайус я компенсирую это все подробнейшей статьей на Хабре.
16:08 Я уже говорил об этом, еще раз скажу.
16:10 Максимально подробный путь, распишу с примерами кода.
16:13 И теперь представим ситуацию, когда у нас есть веб-сайт, веб-приложений или там несколько веб-приложений, плюс мобильное приложение, айос, андроид, и вот они все завязаны на одной дизайн-системе, да, все они наследуют какие-то стили, все они держатся на одном каком-то фундаменте.
16:28 И потом, ну, такая гипотетическая ситуация: нам нужно поменять цвет иконки или цвет праймари кнопки, и нам достаточно будет обновить стиль фигме, выгрузить его в джейсончик и разработчик просто подменят файлы.
16:40 И все цвета, которые мы изменили, автоматически перекрасятся, то есть во всех приложениях одновременно.
16:45 И тут есть еще один плюс: что при назначении перемены какому-то элементу в коде разработчику больше не нужно вспоминать, о какой стиль он использует на этом контроле, или какой стиль он использует на этой переменной.
16:56 Он знает, к чему он обращается, цвет, калор.
16:59 Он просто начинает вводить колор или шрифтовой стиль, фонд, и дальше ему просто уже редактор кода подсказывает и подсвечивает те переменные, которые ему нужны.
17:07 То есть он там помнит, что у него цвет, кнопка там колор, батан начинает только набирать первые буквы и, у него уже редактор кода ему подсказывает.
17:14 Проще выбрать, проще осознать, проще понимать вообще, что завязано у нас на проекте.
17:21 Но помимо стандартного наполнения в виде цвета типографики и теней, я уже говорил, в токен можно положить какую-то там не знаю размерную сетку либо систему отступов.
17:29 И здесь я видел несколько подходов.
17:31 Кто-то называет токены сайз 100, сайз 200, как там, знаете, цветовая схема в материал дизайн шагом 100.
17:38 Кто-то использует размеры маек типа сайз, сайзм.
17:41 Я выработал немножко другой подход, и здесь мы возвращаемся к самому первому пути, как работать с токенами, как их писать, эти токены автоматически или руками.
17:49 Здесь, ну, чисто для себя я выработал такой подход, что его нужно забить один раз.
17:53 Можно в паре с разработчиком, вы создаете токен с базовой величиной 4 пикселя.
18:01 То есть это базовый размер вашей сетки.
18:03 А дальше вы меня только дописываем цифры.
18:05 Это мы сейчас про код говорим, это не про фигму.
18:07 Дальше просто вы меня дописываете цифры и умножаете там на число какое-то.
18:11 Например, переменная сайз1 со значением базового токена сайз.
18:15 А дальше сайз-2 со значением сайз умноженным на 2.
18:18 То есть мы берем базовую величину, то есть мы берем токен с названием сайз-2, вкладываем в него базу переменную с базовой величиной и просто умножаем на 2, и так далее.
18:28 У нас получается такая размерная сетка, завязанная на названии токена.
18:32 И здесь разработчику не придется вспоминать по семантике, какой отступ обозначает 24 пикселя, с или м.
18:38 А ему в голове нужно держать только там базовую величину 4 пикселя.
18:41 Он думает так, здесь у меня должно быть 24 пикселя или сколько сайз х6, что это 6 умножить на базовую величину 4, 24.
18:48 Ну или там, типа, если он знает, что у него 24 пикселя, он просто делит на 4, получает сайз и 6, еще такой небольшой лайфхак, я на некоторых проектах цвета считаю автоматически.
18:57 То есть, я использую там модель и числ.
19:00 А вот это первое число х я забиваю одно как переменную, а дальше просто уже в переменных подменяю эти сатурэшн и лайтинг кнопки какие-то, у меня красится автоматически ну на каком-то состоянии это хорошо когда мы используем тимизацию то есть мы взяли какой-то основной цвет достаточно будет просто подложить одно число одно значение в базовую в базовое значение хью вашего цвета, и все автоматически перекрасится.
19:22 То есть было фиолетовое, стало зеленое.
19:24 Соответственно, при наведении там становятся светло-зеленой кнопки, при нажатии там темно-зеленой кнопки.
19:29 Но это такой сложный лайфхак, можно еще красить через СССР, через лайтен, дак.
19:35 Но об этом расскажу все подробно в статье, потому что на словах сейчас это не передать.
19:39 Вы мне уже, наверное, прокляли, потому что ни хрена не понимаете.
19:42 В общем, такая история.
19:43 Еще кстати на токенах можно строить целый компонент.
19:46 Такой опыт есть у Баду.
19:47 Как раз на Хабре я читал статейку.
19:49 Сам не пробовал, да, но осуждая: чем больше токенов и там переменных ваших, тем с ними сложнее работать.
19:54 То есть, вот перебирая массивы данных.
19:56 Но если так или иначе вы хотите попробовать, напишите мне, с удовольствием послушаю ваш опыт и посмотрю на процесс, возможно, где-то чем-то помогу.
20:03 Но, как мне представляется, если мы под каждый компонент будем держать свои токены, ну мы просто в какой-то момент запутаемся.
20:09 И дизайнер запутается в дизайнах своих этих и разработчик запутается, когда уже 200 переменных у тебя появляется, по своему опыту знаю, ты уже не помнишь.
20:17 Блин, а что там у тебя было-то?
20:19 Короче, такая штука, и да, и нет.
20:20 Вот, если будете пробовать, то напишите мне, пожалуйста.
20:25 Когда нужно использовать токены, то, но я уже сказал, что если вы Лундос пилите или какие-то небольшие сайтики, то они вам не нужны.
20:32 Но когда нужны-то я не сказал, если вы делаете несколько приложений и сервисов, которые должны быть консистентные и иметь какой-то единый вид, у вас есть какой-то фундамент, то, конечно же, токены вам помогут.
20:42 Если вы планируете тимизацию приложения, там светлая или темная тема, тоже очень полезно, очень хорошо будет.
20:48 И если проектируете какое-то войд лейбл решение, которое кастомизируется под каждого заказчика.
20:54 То есть, здесь не нужно там выдумывать свои ЦСС, просто подложили эти токены и там два раза покрасили.
20:59 Вот вам кастомизация.
21:00 Клиент продукт купил, клиент доволен, клиента есть свои цвета.
21:03 Вот, но и в целом подстелиться соломку лишнему уж точно не будет.
21:06 Да, и здесь важно помнить, что все эти, конечно, забавы - это должен быть обоюдный процесс, и вы должны донести до руководства непосредственно с кем вы работаете до оунера, до продукт-менеджера, и соответственно поговорить с разработкой, насколько сейчас они готовы этим заниматься.
21:22 Потому что разработчики могут не знать, им нужно погружаться в этот процесс.
21:26 В целом, процесс не очень быстрый.
21:28 Вам нужно привести интерфейсы в порядок, а там возникнут еще какие-то косячки.
21:32 Если вы инициатор этого всего, не парите горячку.
21:35 Сходите, посоветуйтесь с вашей командой и поймите, насколько это сейчас вам необходимо.
21:40 То есть дизайн токена это, конечно же, не панацея.
21:42 Всегда будут косячки, и их исправят только дизайн ревью.
21:45 Но если уж вы понимаете, что вам это необходимо сделать и это точно закроет ваши какие-то проблемы, то следуйте простым правилам.
21:54 Заручитесь поддержкой разработки, узнайте, насколько они готовы вкладываться в это.
21:57 Проведите инвентаризацию текущих макетов фигма.
22:00 Определитесь с категориями, что вы будете подвергать токенизации.
22:04 Разложите по смысловым группам стиля, приведите в порядок семантические названия.
22:07 Здесь важно еще договориться с разработкой о том, как будет понятнее всем.
22:11 Выберите необходимый инструмент: это либо простой там сервис ЗерХейт или выгрузка через плагины с дальнейшей компиляцией через какие-то библиотеки.
22:19 Выстроите максимально прозрачный путь с разработкой, чтобы вы говорили на одном языке и не путались.
22:27 Я надеюсь, что это было полезно.
22:29 Сегодня у меня такой больше технический материал, потому что я его уже готовлю, я его уже готовил, я решил все-таки отправиться в какой-то дизайн плавания с подкастами.
22:40 Все-таки наш формат на ютубе он больше подразумевает про людей.
22:44 Мы там показываем людей, рассказываем о людях.
22:46 А здесь хотелось бы больше про какие-то узкие темы.
22:49 Но как я уже сказал, что это такой пробный формат, возможно, в дальнейшем он немножечко поменяется, потому что у нас будут гости, вы не будете слушать мое монотонное мление.
22:57 Возможно, у нас появится ведущие, с кем мы будем хихикать иногда в эфире.
23:00 Всем спасибо большое.
Комментарии
Войдите, чтобы оставить комментарий.