Вирівнювання

Вирівнювання одного об'єкта відносно іншого

Вирівнювання можна виконувати й вручну, але щоб підвищити швидкість роботи Figma надає спеціальні інструменти. Щоб вирівняти об'єкти, потрібно:

Виділити обидва прошарки з об'єктами. Зверніть увагу, що менший об'єкт буде вирівнюватись відносно більшого у тому випадку, якщо виконується вирівнювання по краю (лівому, правому, верхньому, нижньому). Якщо робити вирівнювання по центру (горизонтально або вертикально, обидва об'єкти можуть зміститись);
На правій панелі клацнути по одному з типів вирівнювання. Вони знаходяться зверху панелі властивостей відразу під вкладкою Design. Розглянемо кожен вид вирівнювання та гарячі клавіші:

Align Left – вирівняти з лівого краю більшого об'єкта. Option + A в MacOS. Alt + A у Windows;
Align Horizontal Centers – вирівняти горизонтально по центру більшого об'єкта. Option + H у macOs. Alt + H у Windows;
Align Right – вирівняти праворуч відносно більшого об'єкта. Option + D у macOs. Alt + D у Windows;
Align Top – вирівняти по верхньому краю більшого об'єкта. Option + W в MacOS. Alt + W у Windows;
Align Vertical Centers – вирівняти по верхньому краю більшого об'єкта. Option + W в MacOS. Alt + W у Windows;
Align Bottom – вирівняти по нижньому краю більшого об'єкта. Option + S у macOs. Alt + S у Windows.

Зверніть увагу, що гарячі клавіші для вирівнювання виставлені в такому ж порядку, як і кнопки-стрілочки. Ще одна аналогія для геймерів – гарячі клавіші вирівнювання аналогічні до переміщення в будь-якому 3D-шутері, наприклад Counter-Strike (AWSD).
Одразу після клацання об'єкти будуть миттєво переставлені в нове місце, координати зміняться. Ви можете продовжувати натискати на інші типи вирівнювання, спостерігаючи, як оновлюється положення.

Вирівнювання кількох об'єктів відносно іншого

Тут послідовність дій така сама, як і в попередньому випадку, але вибрати потрібно більше двох об'єктів. Вирівнювання буде відбуватися відносно найбільшого.

Зверніть увагу, що об'єкти, які вирівнюються, змінюють своє положення один відносно іншого (оскільки вони різного розміру). Щоб уникнути цього, необхідно попередньо згрупувати об'єкти, що показано в наступному розділі.

Вирівнювання групи відносно об'єкта зі збереженням позиції

Звучить суперечливо, але після перегляду інструкції нижче все стане на свої місця.

Отже, попереднє групування дозволяє зберегти відносні позиції прошарків, що вирівнюються, що іноді стає в нагоді. В іншому випадку без групування при застосуванні кількох вирівнювань усі об'єкти можуть перемішатися в купу, що і сталося на початку відео.

Вирівнювання відокремлених об'єктів

Якщо виділені об'єкти розташовані окремо (без великого об'єкта, який перекриває за розмірами інші, як у попередніх прикладах), то вирівнювання відбуватиметься щодо меж усіх виділених об'єктів. На практиці це виглядає так (після кожного вирівнювання застосовується скасування останньої дії Cmd+Z або Ctrl+Z):

Вирівнювання одного об'єкта всередині фрейму

Якщо виділити лише один об'єкт усередині кадру, він вирівнюватиметься за межами останнього:

Як бачите, залежно від контексту інструмент вирівнювання працює по-різному. Переконайтеся, що ви розумієте, як буде вирівняно об'єкти в залежності від ситуації. Привчайтесь до гарячих клавіш.

Рівномірний розподіл

Ще один дуже корисний інструмент для розміщення об'єктів. Уявіть собі ситуацію: у вас є кілька прямокутників (кнопок), але відстані між ними є різними, а вам потрібні однакові. Звичайно, можна самому все розставити, але інструмент Tidy Up зробить це за вас. Для цього вибираємо усі об'єкти та натискаємо Ctrl+Alt+T у macOs або Ctrl+Alt+Shift+T у Windows. Клацаємо по полю, що з'явилося, і кнопками-стрілками (вгору і вниз) підбираємо відповідну відстань між елементами або вписуємо значення і натискаємо Enter.

Є ще два схожі інструменти – Distribute Vertical Spacing (Ctrl+Alt+V у macOs та Ctrl+Alt+Shift+V у Windows) та Distribute Horizontal Spacing (Ctrl+Alt+H у macOs та Ctrl + Alt + Shift + H у Windows). Вони мають дві відмінності:

Вони розподіляють виділені об'єкти всередині своїх кордонів, тобто після перерозподілу об'єктів, вони займатимуть той самий простір, що й до застосування операції. Інструменту Tidy Up навпаки начхати на те, скільки в результаті простору займуть об'єкти на нових позиціях;
Вам потрібно вказати, у якому напрямку розподіляти об'єкти (горизонтально або вертикально). Tidy Up робить це автоматично.

На практиці це виглядає так:

Не забуваємо, що розподіл можна застосовувати разом з вирівнюванням. Це дозволяє швидко впорядкувати велику кількість неточно розставлених об'єктів.