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

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

Разберем, как из базовых контейнеров и Flex-модели собрать первый прикладной компонент для интерфейса — простой Header. Соберем структуру «слева заголовок, справа действие», создадим прототип кнопки и посмотрим, какие настройки нужны, чтобы элементы встали на свои места. Отдельно зафиксируем важный принцип: UI-компоненты по высоте бывают двух типов — по контенту и со статической высотой. Для хедера чаще нужна фиксированная высота, чтобы элемент занимал стабильное место в интерфейсе. Зададим типичное значение и отметим, что размеры должны опираться на систему, а не выбираться случайно. Дальше настроим внутренние отступы: при статической высоте часто достаточно горизонтальных паддингов (например, 0 и 16), чтобы сохранить аккуратную компоновку без лишней «вертикали». Закрепим выравнивание через flex и доведем прототип до рабочего вида. Затронем семантику контейнеров и паттерн слотов (start / center / end): как нейминг и структура помогают не запутаться в компоненте, быстрее считывать замысел дизайнера и удобнее верстать. В конце обсудим, стоит ли делать абстрактные layout-компоненты в дизайн-системе и почему нейминг — это смысл, от которого зависит целесообразность таких заготовок. #uiдизайн #uxдизайн #дизайнсистемы #frontend #верстка #figma #интерфейсы #flexbox #productdesign #uidesign