Auto Layout у Figma — одна з тих фіч, з якими більшість дизайнерів "знайомі", але насправді використовують на 20% потенціалу. Типовий сценарій: компонент виглядає ідеально з моковим текстом, але розсипається коли розробник підставляє реальний контент із 3 рядків замість одного.
Проблема не в Auto Layout — проблема в тому, як ми думаємо про компоненти.
Фундаментальний принцип: компонент = контейнер + вміст
Кожен компонент складається з двох незалежних систем: контейнер (розміри, padding, border, background) і вміст (текст, іконки, зображення). Auto Layout відповідає за те, як контейнер адаптується до вмісту — або навпаки.
Налаштування "Hug contents" означає: контейнер обіймає вміст. "Fixed" означає: контейнер фіксований, вміст обрізається або переносить рядки. "Fill container" — елемент розтягується на доступний простір.
Три типи поведінки, які треба розуміти
Hug × Hug — компонент стискається до мінімального розміру вмісту. Підходить для бейджів, тегів, чіпів. Небезпека: якщо текст занадто довгий — компонент розтягнеться.
Fixed × Fixed — компонент завжди однакового розміру незалежно від вмісту. Підходить для аватарів, іконок, кнопок з фіксованою шириною. Небезпека: текст може overflow.
Fill × Hug — ширина підлаштовується під батьківський контейнер, висота — під вміст. Це найуживаніша комбінація для cards, list items, form fields.
Головне правило: перш ніж налаштовувати розміри компонента — вирішіть, хто контролює ширину: сам компонент чи його батько. Від цього залежить все решта.
Min/max width: недооцінений інструмент
Min і max width — це те, що перетворює "статичний мокап" на "живий компонент". Кнопка з min-width: 120px не стане завузькою при короткому тексті. Картка з max-width: 480px не розтягнеться на весь екран у десктопі.
В Figma min/max width доступні в налаштуваннях розміру — переконайтесь, що ви їх виставляєте для ключових компонентів, не тільки покладаєтесь на "Hug".
Spacing: абсолютний vs відносний
Auto Layout дозволяє задавати spacing двома способами: фіксований px або "Auto" (рівномірний розподіл). "Auto" spacing корисний для navigation bars і toolbar — де елементи мають рівномірно заповнити простір. Для більшості компонентів — фіксований spacing із токенів.
Nested Auto Layout: коли і як
Реальні компоненти завжди є деревом Auto Layout-контейнерів. Card може містити header (горизонтальний AL) → title + subtitle (вертикальний AL) → footer (горизонтальний AL). Кожен рівень незалежно контролює свій напрям і spacing.
- Уникайте більше 4–5 рівнів вкладеності — це сигнал, що компонент треба розбити
- Давайте кожному вкладеному фрейму зрозумілу назву (не "Frame 432")
- Перевіряйте компонент при резайзі батьківського контейнера від 320px до 1440px
Чекліст перед тим як передати компонент у розробку
- Чи працює компонент з текстом у 1 рядок і в 5 рядків?
- Чи не ломається при відсутньому вмісті (empty state)?
- Чи коректно поводиться при ширині 320px і 1440px?
- Чи всі spacing і розміри — із токенів, а не хардкод?
- Чи немає прихованих fixed-розмірів там де треба Hug або Fill?
Компонент що правильно масштабується — це компонент, розробнику якого не потрібно дзвонити дизайнеру кожного разу, коли контент виходить за межі макету.