Ключовим елементом кожного проєкту є фрейми, що можуть виконувати роль екрану, який ми проєктуємо, або бути фоном для компонентів. Фрейм також є контейнером, що містить усі об’єкти всередині нього, ніби групуючи їх. Однак це не те саме, що група об’єктів. І про це ми поговоримо пізніше.
Основні налаштування фреймів
Коли на робочій області є фрейм і ми його виділяємо, панель дизайн праворуч змінює вміст. Деякі налаштування є спільними для всіх об’єктів, а інші стосуються лише фреймів.
- Вирівнювання об’єктів: Ви можете вирівняти їх по лівому краю, по центру, або по правому краю. Вирівняти за найвищим об’єктом, об’єктом по центру та найнижчим об’єктом. Або розставити на однаковій відстані вертикально або горизонтально.
- Зміна розміру фрейму: Кожен фрейм можна змінити на фрейм з іншим попередньовизначеним розміром зі списку.
- Позиція та обертання: Параметри X та Y вказують на позицію об’єкта на осі координат. Далі ми маємо параметр обертання, який можна налаштовувати у градусах. Якщо ви хочете повернути фрейм на 90 градусів, ви можете натиснути на відповідну кнопку. Також є кнопки для відзеркалення по горизонталі та вертикалі.
- Підгонка розміру фрейму: Кнопка зі стрілками підганяє розмір фрейму під об’єкти всередині нього.
- Авто-лейаут: Функція авто-лейаут автоматично розміщує всі елементи всередині фрейму, згідно з обраними налаштуваннями. Це чудовий інструмент для створення списків та інших компонентів.
- Ширина та висота: Ширина W - це ширина об’єкта, а висота H - це його висота. Іконка з ланцюжком дозволяє зберігати пропорції.
- Кліп-контент: Обрізає все, що виходить за межі фрейму. Якщо її вимкнути, об’єкти, що виходять за межі фрейму, будуть видимими.
- Appearance: Ви можете приховати або показати фрейм, змінювати режим накладання в Blending Mode, змінювати прозорість фрейму та заокруглення кутів.
- Fill: Відповідає за колір фону для фреймів або за заливку для інших об’єктів. Ви можете додавати кілька заливок, використовуючи кольори, різні типи градієнтів, фото та в платному тарифі навіть відео.
- Stroke: Ви можете налаштувати колір, положення всередині, зовні або по центру об’єкта і товщину контуру. Є також додаткові параметри, як пунктирний контур, вигляд кінців контуру та інші налаштування.
- Ефекти: Можна застосовувати у вигляді тіней, внутрішніх тіней або розмиття, які накладаються на об’єкт або фон позаду нього.
- Selection Colors: Відображається, коли ви вибираєте кілька об’єктів або фрейм. Тут можна змінювати всі кольори, які використовуються у вибраних об’єктах.
- Layout Grid: Це сітка, яка допомагає створювати макети в межах фрейму. В Figma є три типи сіток, які можна налаштувати під свої потреби.
- Export: Дозволяє експортувати файл у різних форматах і розмірах, таких як PNG, JPEG, SVG та PDF.
Constraints
Отже, у нас є фрейм, і якщо в середині цього фрейму ми розмістимо ще один фрейм, з’явиться така опція, як Constraints. Constraints стосується будь-якого іншого об’єкта, який знаходиться у фреймі. Наприклад, фрейм можна прив’язати до верхнього або лівого краю фрейму з пунктирними лініями. Коли я змінюватиму розмір зовнішнього фрейму, внутрішній фрейм залишатиметься на тому самому місці. Якщо об’єкт прив’язати до нижнього правого кута, при зміні розміру фрейму він буде залишатися в цьому кутку.
Додаткові функції
Ми вже розглянули більшість функцій з правої панелі, але є ще декілька, про які варто пам’ятати. Наприклад, коли у вас є коло, з’являється опція, яка дозволяє змінювати його форму за допомогою спеціального інструмента. Так можна створити ось такого пекмена. Ви можете налаштувати його початковий і кінцевий кути, а також зробити його схожим на літеру “С”. Якщо вибрати багатокутник, то тут можна змінювати кількість кутів до моменту, коли він почне нагадувати коло. А у випадку із зірочкою можна налаштувати кількість її кінцівок та кут нахилу трикутників, які утворюють зірку.
Сподіваюсь, цей матеріал був корисним. Якщо так, поставте лайк і до зустрічі в наступному матеріалі. Якщо ви ще не бачили попереднього, обов’язково перегляньте його.