Auto Layout у Figma: як працює і як ним користуватися

Вправа 1

Кнопка, яка росте разом із текстом

Напишіть текст «Записатися», виділіть його й натисніть Shift + A або Add auto layout у правій панелі. Figma загорне текст у фрейм з автолейаутом. Додайте фон, радіус кутів і задайте padding — відступ від краю фрейму до вмісту, наприклад 12 px зверху й знизу та 24 px з боків. Тепер змініть текст на «Записатися на консультацію»: кнопка має розширитися сама.

• •прибрати автолейаут: Option + Shift + A (Mac) або Alt + Shift + A (Windows);
• •padding можна задати однаковим з усіх боків, окремо по вертикалі й горизонталі або для кожного боку;
• •у полі padding можна ввести скорочений запис як у CSS: «12, 24, 12, 24» — це верх, право, низ і ліво.

Вправа 2

Напрямок, gap і вирівнювання

Додайте в кнопку іконку зліва від тексту. Тепер у фреймі два елементи, і важливі ще три налаштування. Напрямок (flow): Horizontal ставить елементи в ряд, Vertical — у стовпчик, Grid — у рядки й колонки. Gap — відстань між елементами: число, наприклад 8 px, або Auto, коли елементи розподіляються по всій ширині. Вирівнювання задається для всього фрейму у квадраті з дев'ятьма позиціями в правій панелі.

• •Auto gap має варіанти Between, Evenly й Around — як space-between, space-evenly і space-around у CSS;
• •клікніть квадрат вирівнювання й керуйте стрілками; W, A, S, D притискають вміст до краю;
• •у горизонтальному й вертикальному автолейауті окремий елемент вирівняти не можна — лише весь вміст фрейму (у Grid елемент вирівнюють у його клітинці).

💡 Вправа: зберіть верхню панель застосунку — кнопка «назад», заголовок, іконка меню. Поставте Gap на Auto: якщо кнопка й іконка однакової ширини, заголовок опиниться посередині без жодних ручних розрахунків.

Вправа 3

Hug contents, Fill container і Fixed

Це налаштування, через яке найчастіше «розлазяться» макети. Для кожного елемента окремо по ширині й висоті можна обрати поведінку:

• •Hug contents — фрейм обіймає свій вміст і змінюється разом із ним; доступно лише для фреймів з автолейаутом;
• •Fill container — елемент заповнює все вільне місце в батьківському фреймі; доступно лише для елементів усередині автолейауту;
• •Fixed — розмір не змінюється, хоч би що відбувалося навколо;
• •Min / Max width і height — межі, наприклад кнопка не вужча за 120 px.

💡 Вправа: зробіть картку товару завширшки 320 px (Fixed) з фото, назвою, ціною й кнопкою. Назві та кнопці поставте Fill container по ширині. Змініть ширину картки: усе всередині має підлаштуватися. Подвійний клік на краю рамки виділення ставить Hug contents, з Option / Alt — Fill container.

Вправа 4

Вкладені автолейаути, Wrap і Grid

Справжня сила автолейауту — у вкладеності: кожен фрейм має власні напрямок, gap і padding. Екран зазвичай — це вертикальний автолейаут, у якому лежать горизонтальні рядки, картки й списки. Зберіть так сторінку каталогу: верхня панель, рядок фільтрів, список карток.

• •для рядка фільтрів-«таблеток» увімкніть Wrap: елементи, що не вмістилися, переносяться на новий рядок;
• •для сітки карток спробуйте напрямок Grid: задайте кількість колонок і рядків, а картки можуть займати кілька клітинок (span);
• •для бейджа «-20%» у куті фото увімкніть Ignore auto layout: елемент лишається у фреймі, але не бере участі в розкладці, і для нього знову працюють constraints.

💡 Grid в автолейауті і layout guide — різні речі: перший реально розкладає вміст, другий — лише візуальні напрямні для вирівнювання.

Вправа 5

Розтягніть екран і виправте те, що зламалося

Візьміть екран каталогу з попередньої вправи й змініть ширину фрейму: з 375 px до 768 px, потім до 1280 px. Подивіться, що відбувається, і виправте:

• •текст вилазить за межі або накладається — ймовірно, у текстового шару фіксований розмір; Figma радить уникати фіксованих текстових блоків в автолейауті;
• •картки не розтягуються — перевірте Fill container у них і в їхнього батьківського фрейму;
• •кнопка на всю ширину на десктопі — додайте їй Max width;
• •в інстансі компонента не вдається переставити чи додати шар — це роблять лише в головному компоненті, а видалення в інстансі тільки ховає шар.

💡 Для практики візьміть офіційний файл Auto layout playground з Figma Community. А свій екран покажіть у спільноті й спитайте: «Що станеться, якщо назва товару буде у три рядки?»