TDS 019 — Container + Flex + Text — основная триада для большей части компонентов

Описание: Разберем, как из базовых контейнеров и Flex-модели собрать первый прикладной компонент для интерфейса — простой Header.

Соберем структуру «слева заголовок, справа действие», создадим прототип кнопки и посмотрим, какие настройки нужны, чтобы элементы встали на свои места.

Отдельно зафиксируем важный принцип: UI-компоненты по высоте бывают двух типов — по контенту и со статической высотой. Для хедера чаще нужна фиксированная высота, чтобы элемент занимал стабильное место в интерфейсе. Зададим типичное значение и отметим, что размеры должны опираться на систему, а не выбираться случайно.

Дальше настроим внутренние отступы: при статической высоте часто достаточно горизонтальных паддингов (например, 0 и 16), чтобы сохранить аккуратную компоновку без лишней «вертикали». Закрепим выравнивание через flex и доведем прототип до рабочего вида.

Затронем семантику контейнеров и паттерн слотов (start / center / end): как нейминг и структура помогают не запутаться в компоненте, быстрее считывать замысел дизайнера и удобнее верстать.

В конце обсудим, стоит ли делать абстрактные layout-компоненты в дизайн-системе и почему нейминг — это смысл, от которого зависит целесообразность таких заготовок.

#uiдизайн #uxдизайн #дизайнсистемы #frontend #верстка #figma #интерфейсы #flexbox #productdesign #uidesign