0:00
Ключовим елементом кожного проєкту є фрейми,
0:03
що можуть виконувати роль екрану, який ми проєктуємо,
0:06
або бути фоном для компонентів.
0:08
Фрейм також є контейнером,
0:10
що містить усі об'єкти всередині нього, ніби групуючи їх.
0:14
Однак це не те саме, що група об'єктів.
0:17
І про це ми поговоримо пізніше.
0:19
Коли на робочій області є фрейм і ми його виділяємо,
0:22
панель дизайн праворуч змінює вміст.
0:25
Деякі налаштування є спільними для всіх об'єктів,
0:27
а інші стосуються лише фреймів.
0:29
Тут ми маємо опції вирівнювання об'єктів.
0:32
Ви можете вирівнити їх по лівому краю,
0:34
по центру, або по правому краю.
0:36
Вирівнити за найвищим об'єктом,
0:38
об'єктом по центру та найнижчим об'єктом.
0:40
Або розставити на однаковій відстані вертикально,
0:43
або горизонтально.
0:45
Кожен фрейм можна змінити на фрейм
0:47
з іншим попередньовизначеним розміром зі списку.
0:49
Поряд з варіантами фреймів можна знайти ще декілька
0:52
корисних дій та функції,
0:54
які ми більш детально розглянемо трохи пізніше.
0:56
Параметри X та Y вказують на позиці
0:58
об'єкти на осі координат.
1:00
Далі ми маємо параметр обертання,
1:02
який можна налаштовувати у градусах.
1:04
І це також змінює позицію X та Y.
1:07
Якщо ви хочете повернути фрейм на 90 градусів,
1:10
ви можете нажати на ось цю кнопку.
1:12
Якщо відзеркали по горизонталі то ось цю,
1:15
а якщо повертикалі то ось цю.
1:17
Кнопка зі стрілками підганяє розмір фрейма
1:20
під об'єкти всередині нього.
1:22
Якщо фрейм більший, він зменшиться.
1:24
І навпаки.
1:25
До фрейму можна застосувати авто-лейаут.
1:27
Але про роботу з авто-лейаутами
1:30
поговоримо пізніше.
1:31
Зараз тільки можу сказати,
1:33
що функція авто-лейаут автоматично розміщує всі елементи
1:36
всередині фрейму, згідно з обраними налаштуваннями.
1:39
Це чудовий інструмент для створення списків
1:42
та інших компонентів.
1:43
Він дозволяє вибрати напрямок елементів
1:45
і відстань між ними.
1:47
Ширина W - це ширина об'єкта,
1:49
а висота H - це його висота.
1:51
Figma не вказує конкретні одиниці виміру,
1:54
оскільки вони можуть змінюватися в залежності від платформи.
1:57
Але загалом прийнято вважати, що це пікселі.
2:00
Іконка з ланцюжком дозволяє зберігати пропорції.
2:03
Якщо вона увімкнена,
2:05
зміна одного виміру автоматично змінює інший пропорційно.
2:08
Ще одно важлива функція для фреймів - це кліп-контент,
2:11
яка обрізає все, що виходить за межі фрейму.
2:14
Якщо її вимкнути,
2:15
об'єкти, що виходять за межі фрейму, будуть видимими.
2:18
У розділі Appearance ви можете приховати,
2:21
або показати фрейм.
2:22
Також можна змінювати режим накладання в Blending Mode,
2:25
змінювати прозорість фрейму та заокруглення кутів.
2:28
Ви можете зробити об'єкт більш округлим,
2:31
а за допомогою додаткових полів,
2:33
налаштувати заокруглення для кожного кута окремо.
2:35
Існує також опція для керування вигладжування заокругленних кутів.
2:39
Розділ Fill відповідає за кольор фону для фреймів
2:42
або за заливку для інших об'єктів.
2:44
Ви можете додатувати кілька заливок використовуючи
2:47
як кольори, різні типи радієнтів, фото та в платному тарифі навіть відео.
2:52
Кожна заливка може мати свій рівень прозорості та режим змішування,
2:55
і це створює різні ефекти.
2:57
Колір можна вибирати за допомогою пипетки або коду.
3:00
Figma дозволяє переключатися між різними моделями кольорів.
3:04
За допомогою кнопки з 4 крапками,
3:06
ви можете вибирати та зберігати стилі для кольорів,
3:09
щоб редагувати їх одночасно в усіх містях, де вони використовуються.
3:13
Це дуже важлива тема і більш детально про це я розповім вам у наступних уроках.
3:17
У розділі Stroke ви можете налаштувати колір,
3:20
положення всередині, зовні, або по центру об'єкта і товщину контуру.
3:24
Є також додаткові параметри, як от наприклад,
3:27
пунктирний контур, вигляд кінців контуру та інші налаштування.
3:31
Також з'явилась можливість додавати контур тільки з якогось конкретного боку,
3:35
або з кількох боків налаштувати різну товщину.
3:38
Ефекти можна застосовувати у вигляді тіней,
3:41
внутрішніх тіней, або розмиття, які накладаються на об'єкт,
3:45
або фон позаду нього.
3:47
Коли ви вибираєте кілька об'єктів або фрейм,
3:49
відображається розділ Selection Colors.
3:51
Тут можна змінювати всі кольори, які використовуються у виброних об'єктах.
3:55
Якщо ви хочете знайти об'єкт, що має конкретний колір,
3:58
натисніть на іконку з прицілом і об'єкт підсвідеться.
4:02
Layout Grid - це сітка, яка допомагає створювати макети в межах фрейму.
4:07
В Figma є три типи сіток.
4:09
Їх можна налуштувати під свої потреби.
4:11
Остання опція - це Export.
4:13
Вона дозволяє експортувати файл у різних форматах і розмірах,
4:17
таких як PNG, JPEG, SVG та PDF.
4:20
Векторні зображення краще експортувати,
4:22
без втрати якості у SVG,
4:24
а зображення у вигляді растрових файлів PNG або JPEG.
4:27
Тут ми маємо параметр 1x.
4:29
Він означає, що файл буде експортований у поточному розмірі.
4:33
Якщо ми змінимо його на два рази, це буде рівно в двічі-більший розмір.
4:37
Далі, якщо ми хочемо, ми можемо написати тут suffix до імені файлу
4:41
і він просто буде доданий в кінці імені файлу.
4:44
Якщо я хочу побачити, як приблизно виглядатиме експорт,
4:47
ось опція, яка покаже мені, як приблизно буде виглядати мій файл.
4:51
Отже, у нас є фрейм, і якщо в середині цього фрейму ми розмістимо ще один фрейм,
4:56
з'явиться така опція, як Constraints.
4:58
Я задам цьому фрейму інший колір,
5:00
щоб він був більш помітним, а також додам до нього коло.
5:03
Тепер у нас буде краще уявлення про ситуацію.
5:06
Constraints стосується будь-якого іншого об'єкта,
5:09
які знаходиться у фреймі.
5:10
Тож, наприклад, це коло також має ці налаштування.
5:13
Але зараз ми не будемо говорити про коло.
5:16
Що стосується фрейму, то він дозволяє прив'язати об'єкт у фрейму різними способами.
5:20
У цьому випадку, фрейм можна прив'язати до верхнього,
5:23
а або лівого краю фрейму з пунктирними лініями.
5:26
Коли я змінюватиму розміру зовнішнього фрейму,
5:28
внутрішній фрейм залишатиметься на тому самому місці.
5:31
Якщо об'єкт прив'язати до нижнього правого кута, при зміні розміру фрейму він буде залишатися в цьому кутку.
5:38
Сподіваюсь, що зрозуміло і для початку більш ніж достатньо.
5:41
А детальніше ми поговоримо у наступних відео.
5:44
Ми вже розглянули більшість функції з правої панелі,
5:47
але є ще декілька про які варто пам'ятати.
5:49
Наприклад, коли у вас є коло,
5:51
з'являється опція, яка дозволяє змінювати його форму за допомогою спеціального інструмента.
5:56
Так можна створити ось такого пекмена.
5:59
Ви можете налаштувати його початковий і кінцевий кути,
6:02
а так розробити його схожим на літеру "с".
6:05
Якщо вибрати багатокутник, то як я вже згадувала раніше,
6:08
тут можна змінювати кількість кутів до моменту, коли він почне нагадувати коло.
6:12
А у випадку із зірочкую можна налаштувати кількість її кінцівок,
6:16
так кут нахилу трикутників, які утворюють зірку.
6:19
Сподіваюсь, цей матеріал кув корисним.
6:21
Якщо так, поставте лайк і до зустрічі в наступному матеріалі.
6:24
Якщо ви ще не бачили попереднього, обов'язково перегляньте його.