Constraints в Figma
У цій статті розглянемо щоо таке Constraints та навіщо вони потрібні.
Блок налаштувань Constraints у Figma відповідає за поведінку та розташування елементів дизайну, при зміні розмірів батьківського блоку.
Батьківський блок - це блок, всередині якого знаходиться ваш елемент. Це може бути фрейм, компонент або група (також може бути булінова група)
Щоб побачити блок Constraints, треба виділити будь-який елемент вашого дизайну та подивитися на праву бокову панель . Блок зоражено «хрестиком», в якому ви задаєте значення для позиціонування вашого елемента.
Значення Constraints
Елемент можна вирівнювати щодо ширини чи висоти батьківського блоку.
Можливі різні комбінації. За замовчуванням встановлено значення Left, Top — це означає, що при зміні розміру батьківського блоку, ваш об'єкт перебуватиме у лівому верхньому кутку, а також матиме фіксовану ширину та висоту.
Щоб задати «гумова» ширину/висоту, треба вибрати або значення Scale, або Left&Right(Top&Bottom)
Scale означає, що розмір елемента буде змінюватися пропорційно до зміни розміру батьківського блоку.
Left&Right - у свою чергу, фіксує лівий і правий край, а ширина елемента змінюється. Відмінно підходить для створення полів введення, що тягнуться.
Наприклад, ви розтягуєте тло у кнопки, тобто дочірній елемент та батьківський будуть одного розміру. У цьому випадку немає різниці між scale та left&right
💁♂️ Tip. При затиснутій клавіші Shift, в хрестику constraints можна вибрати подвійні значення, наприклад Top Bottom і Left Right (не відкриваючи селект, що випадає)
Галочка «Fix position when scrolling» фіксує позицію елемента при скролінг батьківського блоку. Елемент, позначений цією галочкою, виноситься на верх у списку шарів, і потрапляє в блок FIXED. З'являється блок SCROLLS, куди потрапляють усі скрольовані елементи макету.
💁♂️ Tip. Fix position when scrolling — можна використовувати для демонстрації роботи елементів із фіксованою позицією: «залипаючих меню», онлайн-чатів, попереджень про використання кукіс, кнопок автоскрола на початок сторінки тощо.
Подивитися, як це працює можна в режимі презентації, натиснувши кнопку «Play» у верхньому правому кутку вікна Figma (поряд з кнопкою Share)
Застосування Constraints
Кнопки
Із кнопками все досить просто. У нас є два (іноді три) елементи. Перший - це фон, який розтягується на всю ширину і висоту кнопки, і текст, який має однакові відступи праворуч і ліворуч, а саме текстове поле займає всю ширину, за винятком цих відступів
Фон - Left & Right, Top & Bottom
Текстове поле - Left & Right, Center
Tip. Чому ширина текстового поля Left&Right? Та тому так простіше підганяти ширину кнопки під інший текст.
Форми
З полями форм схожа ситуація, як і з клавішами, але елементів у нас на один більше (залежить від дизайну).
Фон - Left & Right, Top & Bottom
Підкреслення в полі - Left & Right, Bottom
Текстове поле - Left & Right, Center
Іконка (маркер списку) — Right, Center
Шапка сайту
Ось тут уже складніше. Наприклад, я взяла шапку, яка складається з 4 блоків: фон, логотип по центру, ліва частина з меню, права частина з кошиком та іконкою авторизації.
З фоном все просто, зробимо так само як і з полем форми:
Фон - Left & Right, Top & Bottom
Лінія знизу - Left & Right, Bottom
Елементи, які повинні позиціонуватися по лівому краю, ми «завертаємо» в окремий кадр усередині нашої шапки і виставляємо значення constraints — Left, Center (на випадок, якщо захочемо міняти висоту шапки, якщо ні, то можна вибрати — Top)
Теж саме проробляємо з елементами, які повинні позиціонуватися праворуч, і виставляємо значення — Right, Center
Якщо ви задумали шапку, що «залипає» при скролінгу, не забудьте встановити галочку Fix position when scrolling.
Картка товару
З карткою товару все індивідуально. У моїй картці є фотографія, назва товару та його ціна, назва виробника, дві іконки: купити, sale. Іконку «відсоток» я зробив із підписом, щоб трохи ускладнити приклад.
Давайте розумітися. Картку у нас може змінити ширину та висоту, при цьому розміри можуть змінитися пропорційно чи ні.
Іконка купити завжди буде праворуч і внизу, відповідно вибираємо в constraints — Right, Bottom
Назва виробника - праворуч і вгорі - Right, Top
Назва товару може бути коротшою або довшою за поточний. Тому ми розтягуємо текстове поле на всю ширину плашки, за вирахуванням бічних відступів. Так ми покажемо хлопцям, які верстати, який розмір має бути біля рядка з назвою товару. Відповідно виставляємо значення - Left & Right, Bottom
Щоб наша фотографія товару розтягувалася пропорційно до зміни розміру картки виставляємо їй значення — Left & Right, Top & Bottom
І, насамкінець, залишилася іконка відсотка з підписом. Щоб вона завжди перебувала на перетині білої області та фотографії, ставимо їй позиціонування — Right, Bottom, і такі самі значення для підпису sale.
Перевірено!
Якщо не лінуватися і встановлювати значення Constraints для елементів дизайну, то згодом це заощадить ваш час при створенні адаптиву сайту.
💁♂️ One more Tip. При зміні розміру батьківського об'єкта затисніть Cmd (Ctrl для Windows), і значення constraints будуть ігноруватися. Часто використовую зміни розміру висоти сторінки.