Переходим к реализации Flexbox-модели в нашей дизайн-системе и создаём компонент Flex. Пошагово формируем набор пропсов: направление, отступы между элементами, выравнивание по осям, реверс, перенос строк, размеры. Отдельно обсуждаем нейминг и сознательные отхождения от HTML-спецификации ради семантики и удобства использования в кросс-платформен....
Когда сложные выражения пробрасываются прямо внутрь объекта, код теряет ритм и структуру. Это противоречит принципу ритма и структуры — RSP (cantfailcode.ru). Я стараюсь выносить логику выше — делать небольшую экстракцию, чтобы сам объект оставался чистым и понятным. Так проще поддерживать систему: если в будущем логика усложнится, можно буде....
Разбираем основу дизайн-системы: как формируются базовые стили и зачем нужны дизайн-токены. Показываю устройство токенов из Material Design 3, работу с цветами и типографикой, а также создаю первый компонент Text. Объясняю, как применять токены на практике, что такое цветовой контекст и как он влияет на интерфейс. Всё с реальными примерами и о....
С базовой логикой мы уже познакомились. Но самое интересное начнётся позже — при сборке компонентов. Именно там станет видно, как всё это объединяется в реальную систему. Всё, что разбирается в коде, напрямую вытекает из правильной организации дизайна. Хорошая дизайн-система возможна только тогда, когда дизайнер грамотно продумывает структуру т....
Нейминг — это основа всего. Если выбранное название перестало подходить под реальность проекта — не бойтесь делать рефакторинг и переименовывать. Правильные имена должны отражать семантику и природу сущностей. Переменные, токены, компоненты — всё должно называться так, чтобы по названию было понятно, зачем это существует. Например, я переимено....
Из одного базового цвета можно вырастить целую систему: десятки цветовых токенов. В видео разбираем иерархию токенов и зачем нужны группы вроде surface, outline и reactions — чтобы любые UI-элементы автоматически получали согласованные и читаемые цвета. #дизайнсистема #дизайнтокены #цветовыетокены #ui #ux #productdesign #figma #frontend #css #....
Разбираем базовый компонент Container и превращаем его в универсальный строительный блок интерфейса. Создаём обёртку для других компонентов, добавляем паддинги, скругления, обводку, состояния и интерактивность. Показываю, как из простых сущностей «контейнер + текст» получается полноценная кнопка с hover/press/active. Параллельно говорим про н....
Обсуждаем, как генерировать цветовые токены: можно прописать все значения вручную (работает, но почти невозможно поддерживать), можно собирать систему из референсных палитр (надежнее, но трудоемко), а можно рассчитывать автоматически — с допущениями и возможными погрешностями по контрасту. Для практичных задач часто хватает простого подхода: см....
Приводим компонент текста в «боевое» состояние: учим его понимать расширенный типографический токен (включая вес), добавляем семантические теги для валидной разметки и SEO, вводим базовые пропсы для управления отображением. По ходу — наводим порядок в стилях, обсуждаем где лучше держать логику (классы или инлайн-стили) и добавляем полезные утил....
На примере прототипа UI-компонента показываю, как цветовые токены управляют темой элемента. Фон, обводка, текст остаются сбалансированными и читаемыми даже при смене темы. Дальше двигаемся к подходу, где UI собирается не из div-ов, а из семантических компонентов. Это превращает верстку в «сборку» и делает поддержку и масштабирование дизайн-си....
Собираем первый прототип компонента на практике: применяем типографические и цветовые токены к блоку с заголовком и подзаголовком и сразу получаем аккуратную, сбалансированную панель без ручной настройки стилей. #дизайнтокены #дизайнсистема #frontend #типографика #ui #webdev #shorts.
Сегодня делаем быстрый «скелет» текстового компонента и проверяем, как он живёт в коде. Главная идея — общаться с UI на языке токенов: без ручных классов, стилей и постоянного подбора значений, а через понятные семантические роли. По пути обсуждаем, почему важнее понимать суть подхода, чем конкретный фреймворк или синтаксис, и куда всё это даль....
Смотрим на практике, как применяются только что созданные типографические токены. Категория, грейд и другие настройки. Проверяем, как выглядит вся раскладка типографии. Даже для небольшой системы важно правильно подобрать все параметры, чтобы типографика работала гармонично. #типографика #дизайнсистемы #токены #frontend #разработка #UX #UI #w....
Смотрим, как дизайн-токены начинают работать на практике. На простом примере собираем типовой UI-блок с заголовком, текстом, фоном и обводкой — полностью на основе готовых токенов, без ручного подбора размеров, шрифтов и цветов. Показываю ключевую идею: благодаря токенам можно изменить внешний вид всего компонента, поменяв всего один параметр, ....
Сильные архитектурные решения не берутся из теории. Они появляются через практику: проекты с нуля, ошибки, легаси и переписывание кода. Со временем накапливается опыт, который позволяет закладывать более устойчивые и осознанные основы в проектах. #frontend #архитектура #программирование #разработка #опытразработки #frontenddeveloper #techdebt....
Переходим от теории к практике и начинаем «щупать» токены прямо в верстке. Применяем типографический токен (например, Headline) и смотрим, как работают градации Large / Medium / Small и вся раскладка текстовых стилей. Разбираем, почему самое сложное — подобрать правильные соотношения размеров, line-height и letter-spacing так, чтобы типографика....
Хороший старт — это не про идеальную архитектуру, а про точку входа. Когда вы доводите до логического завершения текущую задачу — оставьте то, с чего вы начнете в следующий раз. Это должны быть небольшие простые действия. Так мозгу проще включиться в работу и продолжить с того места, где остановился. Маленькие, понятные шаги снижают порог вход....
Переходим от настроек к реальной имплементации. Закладываем базовый текстовый компонент и начинаем собирать типографические токены: роли, грейды, веса и принципы комбинирования. Дальше — самое сложное и интересное: цветовые токены. Разбираем иерархию, неймспейсы, статические и семантические цвета, состояния (hover, press, active) и подход к а....
Вопрос «как правильно разложить файлы и папки» возникает почти в каждом проекте. FSD и другие подходы могут быть полезны, но универсального рецепта не существует. База — это принципы: здравый смысл, ясные правила и понимание задачи проекта. Архитектура должна подстраиваться под контекст, а не наоборот — особенно когда речь идёт о масштабировани....
Разбираем базовую теорию дизайн-токенов: что это такое, зачем они нужны и как помогают выстраивать масштабируемые дизайн-системы. Смотрим, как Material Design предлагает работать с типографическими и цветовыми токенами, какие роли у текста и цветов в интерфейсе и почему семантика важнее конкретных значений. Закладываем фундамент перед практическ....
