Auto Layout в фигме: адаптивный виджет как у Ozon

Auto Layout в фигме: собираю адаптивный виджет как у Ozon — три вложенных блока, кнопка и переполнение текстом. Показываю резиновую вёрстку, которая тянется по ширине и не ломается на узких экранах. Вы узнаете, как раскладывать реальный интерфейс на вложенные автолейауты, отделять переменные данные от постоянного текста, настраивать сокращение в три точки, выравнивание по бейзлайну и концентричные скругления. Сверяемся с настоящей HTML-вёрсткой Ozon через инспектор браузера — вложенные дивы работают по той же логике, что и автолейауты в Figma. Один момент с переполнением текста у строки с иконкой я так и не решил — если знаете как, жду в комментариях. Таймкоды: 00:00 — Разбор виджета Ozon: структура блоков 01:20 — HTML-вёрстка Ozon в инспекторе браузера 02:12 — Первая строка: переменные и текст 05:58 — Серый блок: три строки в контейнере 06:50 — Адаптивность: Fill Container, авто-gap, три точки 08:26 — Выравнивание по бейзлайну 09:38 — Блок «Оплачено» и кнопка 11:51 — Собираем виджет: отступы и концентричные скругления 14:25 — Проверка адаптивности Остались вопросы по Figma — пишите в комментариях, сниму на них отдельный ролик. Смотрите дальше — плейлист с Figma-туториалами    • Figma с нуля   ━━━━━━━━━━━━━━━━━━━━━━━ 🧑‍💻 Я — СЕРГЕЙ БУЛАТОВ. UX/UI и продуктовый дизайнер. Помогаю дизайнерам начать работать с AI без страха и без хайпа. Обучаю дизайнеров и команды. Telegram: https://t.me/pravkisdelal По вопросам сотрудничества и обучения — https://t.me/sergey_bulatov ━━━━━━━━━━━━━━━━━━━━━━━ 🎓 ОБУЧЕНИЕ ДЛЯ КОМАНД Провожу воркшопы и лекции для дизайн-команд: — Как внедрить AI в рабочий процесс дизайнера — Figma + нейросети: практические кейсы — Vibecoding для продуктовых команд Запрос → https://t.me/sergey_bulatov ━━━━━━━━━━━━━━━━━━━━━━━ 📂 ПЛЕЙЛИСТЫ    • AI-инструменты для дизайнеров      • Вайбкодинг для дизайнеров: прототипы и при...      • Как дизайнеру научиться презентовать      • Публичные выступления о дизайне      • Figma с нуля      • Интервью с дизайнерами   С уважением, Сергей Булатов ━━━━━━━━━━━━━━━━━━━━━━━ #figma #autolayout #фигма #адаптивныйдизайн #uxдизайн