Переходим к реализации Flexbox-модели в нашей дизайн-системе и создаём компонент Flex. Пошагово формируем набор пропсов: направление, отступы между эле...

Когда сложные выражения пробрасываются прямо внутрь объекта, код теряет ритм и структуру. Это противоречит принципу ритма и структуры — RSP (cantfailco...

Разбираем основу дизайн-системы: как формируются базовые стили и зачем нужны дизайн-токены. Показываю устройство токенов из Material Design 3, работу с ...

С базовой логикой мы уже познакомились. Но самое интересное начнётся позже — при сборке компонентов. Именно там станет видно, как всё это объединяется в...

Нейминг — это основа всего. Если выбранное название перестало подходить под реальность проекта — не бойтесь делать рефакторинг и переименовывать. Прави...

Из одного базового цвета можно вырастить целую систему: десятки цветовых токенов. В видео разбираем иерархию токенов и зачем нужны группы вроде surface...

Разбираем базовый компонент Container и превращаем его в универсальный строительный блок интерфейса. Создаём обёртку для других компонентов, добавляем ...

Обсуждаем, как генерировать цветовые токены: можно прописать все значения вручную (работает, но почти невозможно поддерживать), можно собирать систему и...

Приводим компонент текста в «боевое» состояние: учим его понимать расширенный типографический токен (включая вес), добавляем семантические теги для вали...

На примере прототипа UI-компонента показываю, как цветовые токены управляют темой элемента. Фон, обводка, текст остаются сбалансированными и читаемыми ...

Собираем первый прототип компонента на практике: применяем типографические и цветовые токены к блоку с заголовком и подзаголовком и сразу получаем аккур...

Сегодня делаем быстрый «скелет» текстового компонента и проверяем, как он живёт в коде. Главная идея — общаться с UI на языке токенов: без ручных классо...

Смотрим на практике, как применяются только что созданные типографические токены. Категория, грейд и другие настройки. Проверяем, как выглядит вся раск...

Смотрим, как дизайн-токены начинают работать на практике. На простом примере собираем типовой UI-блок с заголовком, текстом, фоном и обводкой — полность...

Сильные архитектурные решения не берутся из теории. Они появляются через практику: проекты с нуля, ошибки, легаси и переписывание кода. Со временем на...

Переходим от теории к практике и начинаем «щупать» токены прямо в верстке. Применяем типографический токен (например, Headline) и смотрим, как работают ...

Хороший старт — это не про идеальную архитектуру, а про точку входа. Когда вы доводите до логического завершения текущую задачу — оставьте то, с чего вы...

Переходим от настроек к реальной имплементации. Закладываем базовый текстовый компонент и начинаем собирать типографические токены: роли, грейды, веса ...

Вопрос «как правильно разложить файлы и папки» возникает почти в каждом проекте. FSD и другие подходы могут быть полезны, но универсального рецепта не с...

Разбираем базовую теорию дизайн-токенов: что это такое, зачем они нужны и как помогают выстраивать масштабируемые дизайн-системы. Смотрим, как Material ...