Урок 6. Фрейми. Сітки. Направляючі. Компоненти

У третій частині по основам Figma навчимося працювати з фреймами, сторінками та файлами, щоб не заблукати у структурі великого проєкту. Подивимося, наскільки потужні можливості приховує у собі фрейм, як сітки та колонки допомагають розподілити об'єкти та виставити відступи. Навчимося користуватися направляючими. Вперше познайомимося з обмежувачами (constraints) і компонентами.

Ви станете на один крок ближче до роботи з великим та серйозними проєктами.

• Фрейми. Порівняння з групами
• Створення фрейму. Змінюємо розмір та заливку
• Як розмістити об'єкти всередині фрейму
• Проста маска – обрізаємо вміст фрейму
• Додавання сітки
• Додавання колонок та рядів
• Направляючі та лінійка
• Приклади використання фреймів
• Поведінка вмісту фрейму при зміні розміру
• Перше знайомство з компонентами
• Види обмежувачів (Constraints)
• Як підігнати розмір фрейму під вміст
• Змінюємо орієнтацію фрейму
• Сторінки та файли
• Організація сторінок
• Ієрархія проекту
• Домашнє завдання
• Висновки

Фрейми. Порівняння з групами

Фрейми в інших програмах називаються артбордами (artboard). Але у Figma пішли своїм шляхом і вигадали унікальну назву. І цілком резонно, тому що фрейми мають більші можливості та гнучкість, ніж артборди, наприклад у Sketch неможливо помістити один артборд усередині іншого.

Frame з англійської перекладається як рамка, каркас, скелет. Якщо спростити, то фрейми можна порівняти з полотном художника або робочою областю. Зазвичай фрейм (артборд) містить дизайн однієї сторінки у певному розмірі. Наприклад, дизайнер може розмістити поруч кілька фреймів з однією сторінкою для екрана ноутбука, планшета і смартфона.

У минулих уроках, малюючи цілі сторінки, ми через незнання використовували групи замість фреймів. Давайте виправимо цей недолік. Тепер працюючи з дизайном сторінки/екрану будемо розміщувати всі елементи всередині фрейму.

Групи дозволяють об'єднувати примітиви та створювати логічні одиниці всередині фрейму, значно полегшуючи роботу з проектом. Фрейми схожі на групи, але мають ряд унікальних можливостей:

• Фрейм має розмір і може мати заливку кольором. У групах розмір визначається автоматично, на основі розміру всіх об'єктів, що знаходяться всередині. Ця відмінність дозволяє експортувати зображення з відступами з обох боків, що корисно при збереженні іконок. У налаштуваннях фрейму можна знайти великий список шаблонів розмірів від усіляких екранів пристроїв (популярних смартфонів, розумних годинників і планшетів) і навіть до історії Instagram або посту Facebook;
• Кожен фрейм має свою систему координат. Координати об'єктів усередині будуть відраховуватися щодо верхнього лівого краю межі фрейму;
• Фрейм може обрізати свій вміст, який виходить за його межі його рамок. Тобто все, що знаходиться поза фремом, буде ховатися, якщо опція Clip content увімкнена. Така можливість називається маскою;
• Фрейм може відображати розмітку макета, а саме сітку, вертикальні та горизонтальні колонки, а також включати в себе направляючі. Ці інструменти призначені для точного розташування та вирівнювання об'єктів макета;
• При зміні розмірів фрейму можна вказати, як поводитимуть себе об'єкти. Наприклад, кнопка може прилипнути до верхньої частини екрана і розтягуватися по ширині. Ця можливість називається обмежувачами (constraints).

Створення фрейму. Змінюємо розмір та заливку

Процес створення фрейму нічим не відрізняється від прямокутника. Крім того, що вам потрібно вибрати інструмент із зображенням решітки або натиснути F. Далі затискаємо ліву кнопку на робочій області та тягнемо мишку. Відпускаємо ліву кнопку мишки, щоб встановити розміри.

Далі найцікавіше. У правій панелі, подібно до прямокутника вже буде заданий колір заливки фону (розділ Fill). Ви можете змінювати розмір кадру старими способами, потягнувши за край або поставивши точний розмір у полях W (Width) та H (Height). Але тепер у нас є нове меню, що випадає, з шаблонами розмірів у лівому верхньому куті панелі властивостей – Frame. Перегляньте, які шаблони там є і спробуйте застосувати хоча б кілька з них.

Як розмістити об'єкти всередині фрейму

Є кілька простих способів:

• Виділити та перетягнути всі об'єкти всередину меж фрейму;
• Виділити, вирізати потрібні об'єкти (Command + X на macOs або Ctrl + X на Windows) і вставити (Command + V на macOs або Ctrl + V на Windows) після того, як виділили фрейм.

Після цих маніпуляцій об'єкти будуть всередині фрейму, що буде видно по панелі шарів, адже вставлені об'єкти будуть відображатися зі зміщенням (як і в групах). Спробуйте виділити об'єкт усередині фрейму, зверніть увагу на значення координат X та Y – вони змінилися, адже тепер верхній лівий кут кадру – це новий початок координат.

Проста маска – обрізаємо вміст фрейму

Використовуючи опцію Clip content на панелі властивостей, можна обрізати вміст фрейму по його прямокутній межі, яка залежить від ширини (параметр W – Width) і висоти кадру (параметр H – height). Такий прийом називається маскою. Таким чином, можна приховати частину об'єктів використовуючи форму іншого об'єкта, в нашому випадку це фрейм і прямокутна форма. Ось вам аналогія: вирізавши квадратний отвір у папері та наклавши її на фотографію ви отримаєте приклад використання маски у реальному світі.

Додавання сітки

Фрейми дозволяють відображати допоміжні сітки, які можна гнучко налаштовувати для полегшення вирівнювання та позиціонування об'єктів. Для цього:

1. Виділяємо фрейм;
2. Клікаємо по плюсику + навпроти розділу Layout Grid – відобразиться сітка зі стандартними налаштуваннями червоного кольору з кроком 10 пікселів;
3. Натискаємо на іконку ліворуч від напису Grid (10px), щоб налаштувати сітку. У вікні, що випадає, можемо задати крок сітки (Size), колір ліній (Color) і прозорість;
4. Сітку можна тимчасово приховати або видалити, натиснувши іконку ока або мінус відповідно праворуч;
5. Можна додати кілька сіток різних кольорів усередині одного фрейму за потреби.
6. Щоб тимчасово приховати сітки на всіх кадрах, натисніть Ctrl + G. Повторіть комбінацію клавіш, щоб показати їх знову.

Сітку можна використовувати як помічник для малювання форм, банерів, ілюстрацій. Її головна перевага полягає в тому, що при переміщенні об'єктів вони як би "приклеюються" до ліній сітки, тим самим допомагаючи вам встановити об'єкт у потрібній позиції. З масштабуванням така ж історія – межі об'єкта прилипають до направляючих сітки.

Загалом сітки використовуються досить рідко. А ось колонки, про які йтиметься далі – постійно.

Додавання колонок та рядів

Вертикальні колонки часто використовуються в дизайні веб-сторінки. Їх налаштування трохи складніше сітки:

1. Виділяємо фрейм;
2. Клікаємо по плюсику + навпроти розділу Layout Grid – відобразиться така сама стандартна сітка;
3. Натискаємо на іконку ліворуч від напису Grid (10px). У вікні, що випадає, натискаємо на Grid у лівому верхньому кутку;

4. У меню, що випадає, вибираємо Columns. Відразу після цього крім кольору та прозорості з'явиться ряд нових параметрів:

   • Count – кількість колонок;
   • Type – тип побудови колонок. Можна обрати одну з опцій: Left – колонки розміщуються по лівому краю, Right – праворуч, Center – вирівнюються по центру, Stretch – розтягуються по всій ширині кадру;
   • Width – ширина колонки у пікселях. Цей параметр прораховується автоматично, якщо тип колонок виставлений у Stretch;
   • Offset – відступ зліва якщо тип колонок виставлений у Left. Для типу колонок Right це відступ праворуч. Для типу Stretch це відступ з обох боків. Цей параметр автоматично прораховується для типу колонок Center;
   • Gutter – відстань між колонками.

Давайте налаштуємо одну популярну сітку з фреймворку Bootstrap, яку часто використовують розробники під час верстки веб-сторінок. Для цього нам знадобиться фрейм шириною в 1440 пікселів і висотою в 900 пікселів, що відповідає розмірам екрану типового ноутбука. Сама сітка завширшки становить 1140 пікселів і складається з 12 колонок. Ширина кожної колонки – 65 пікселів, а відстань між ними – 30 пікселів.

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

Крім колонок є можливість задавати ряди. Для цього достатньо вибрати Rows у меню, що випадає. Усі параметри ідентичні колонкам, лише Width (ширина) замінено Height (висота). Мені не доводилося використовувати цей вид сітки, але, можливо, в окремих випадках він може бути корисним.

Направляючі та лінійка

Усілякі види сіток полегшують роботу дизайнера, але існує ще корисніший інструмент – направляючі. Це вертикальна чи горизонтальна лінія, яку дизайнер може виставити у довільному місці. Таких ліній може бути багато і ви можете відтворити будь-яку сітку, використовуючи лише направляючі. До цих ліній прилипатимуть об'єкти, як і до сіток. Щоб створити напрямну:

1. Виділяємо фрейм, якщо вам потрібна лінія саме всередині фрейму;
2. Включаємо лінійку за допомогою комбінації клавіш Shift + R. Вона з'являється зверху та ліворуч по краях робочої області та показує межі виділених об'єктів у пікселях. Запам'ятайте, що направляючі відображаються лише з увімкненою лінійкою;
3. Клікаємо та затискаємо ліву кнопку миші всередині верхньої або лівої лінійки, щоб створити горизонтальну або вертикальну направляючу відповідно;
4. Тягнемо курсор до центру екрана. Як тільки ви вийдете за межі лінійки на робочій області, з'явиться направляюча. Тягніть її в потрібну вам точку;
5. Відпускаємо ліву кнопку миші, щоб зафіксувати позицію направляючої;

Щоб змінити положення направляючої, перетягніть її на нову позицію.

Щоб видалити направляючу, потрібно її виділити, клацнувши по ній. Виділена лінія забарвиться у синій колір. Далі натискаємо кнопку Delete на клавіатурі. Також можна просто перетягнути направляючу область лінійки і вона теж буде видалена.

Щоб тимчасово приховати всі направляючі, приховайте лінійку за допомогою клавіш Shift + R.

А тепер важливий момент. Як ви пам'ятаєте з попереднього уроку, попередньо виділивши будь-який об'єкт і затиснувши кнопку Option у MacOs або Alt у Windows можна побачити точну відстань у пікселях, підвівши курсор до іншого об'єкта. Так от цей же прийом працює і для направляючих, що буває дуже доречним. Давайте подивимося, як це виглядає на практиці (приклеювання об'єктів до направляючих та підказки про відстань до них):

Приклади використання фреймів

На цьому перелік можливостей фреймів не закінчується, але перш ніж продовжити, давайте подивимося кілька типових прикладів їх використання. Отже, фрейми часто використовуються як контейнери для:

• Дизайну веб-сторінок різних пристроїв (настільний пк, ноутбук, смартфон);
• Дизайну екранів мобільних додатків для планшетів, смартфонів, розумного годинника;
• Набору базових кольорів;
• Набору компонентів інтерфейсу (кнопки, перемикачі, іконки, слайдери, картки, шапка, підвал сайту тощо);
• Набору шрифтів (різні накреслення та розміри);
• Матеріалів соціальних мереж (сторі, пости, банери, ілюстрації, інфографіка).

Поведінка вмісту фрейму при зміні розміру

Якщо об'єкт знаходиться всередині фрейму, ви можете вказати, як йому поводитися при зміні розмірів фрейму. Ця можливість називається constraint (читається констрейнт), що перекладається як обмежувач. Він задає поведінку при зміні розміру фрейму:

• Дозволяє закріпити позицію об'єкта по вертикальній або горизонтальній стороні фрейму. У такому разі при розтягуванні фрейму він збереже свій розмір;
• Або розтягне об'єкт за шириною та/або висотою фрейму.

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

Виникає резонне питання: навіщо ця можливість потрібна? Адже можна зробити кілька кадрів різних розмірів екранів для однієї і тієї ж сторінки і таким чином показати, як поводитиметься вміст. Користь цієї функції в повній мірі проявляється при використанні компонентів.

Перше знайомство з компонентами

Компоненти – це спеціальний вид об'єктів, які створюються на основі фреймів для побудови елементів інтерфейсу, що часто використовуються. Звучить складно, але насправді за допомогою компонентів створюють шаблони кнопок, випадаючих меню, навігації та іншого. Щоб надалі не малювати кожного разу, наприклад, кнопку, ви копіюєте компонент кнопки, виставляєте потрібний розмір та колір, змінюєте текст – і все готово! Набори таких компонентів у термінології Figma називаються бібліотекою компонентів. А у дизайнерів вони називаються UI Kit (читається юай кіт).

Навіщо ж так все ускладнювати? Насправді компоненти здатні заощадити десятки годин роботи. Уявіть собі ситуацію: у вас є 50 екранів веб-програми. На кожному є кнопки. Раптом вам прилітає правка "заокруглити всі кнопки". Якщо дизайн створювався за допомогою компонентів, то вам достатньо змінити лише батьківський компонент (шаблон кнопки), а решта змін відбудуться автоматично. Якщо все робилося без компонентів, то вам доведеться вручну змінити кожну кнопку.

У цьому й полягає вся міць компонентів. А обмежувачі (Constraints) грають тут одну із ключових ролей.

Компонентам у нас буде присвячений окремий матеріал, не варто лякатися їхньої складності. Більше того, у компонентів є й інші особливості, які ми поступово зачіпатимемо. Наразі ми лише готуємо фундамент для подальшої роботи. А поки що, щоб зрозуміти користь компонентів, подивіться на приклад нижче. Зверху знаходиться батьківський компонент (шаблон), а внизу три дочірніх компоненти, які успадковують його властивості. У самому низу знаходиться кнопка, зроблена на основі звичайного фрейму. Змінюючи батьківський компонент, ми автоматично змінюємо всіх дочірні.

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

Поки ви не вмієте створювати компоненти, тому що потрібно спочатку повністю зрозуміти, як працюють обмежувачі всередині фрейму. Тому повертаємось до них.

Види обмежувачів (Constraints)

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

• Вертикальні обмежувачі:

  • Top – об'єкт прилипає до верхнього краю фрейму;
  • Center – об'єкт центрується за висотою фрейму;
  • Bottom – об'єкт прилипає до нижнього краю фрейму.

• Горизонтальні обмежувачі:

  • Left – об'єкт прилипає до лівого краю фрейму;
  • Center – об'єкт центрується за шириною фрейму;
  • Right – об'єкт прилипає до правого краю фрейму.

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

Існує ще кілька видів обмежувачів:

• Left & Right – вид горизонтального обмежувача. Примушує лівий край об'єкта прилипнути до лівого боку фрейму, а правий край – до правої сторони фрейму. Дозволяє розтягувати об'єкт по ширині з фіксованими відступами ліворуч і праворуч;
• Top & Bottom – вид вертикального обмежувача. Примушує верхню грань об'єкта прилипнути до верхнього боку фрейму, а нижню грань – до нижньої сторони фрейму. Дозволяє розтягувати об'єкт по висоті з фіксованими відступами зверху та знизу;
• Scale – об'єкт розтягується пропорційно фрейму по ширині та/або висоті. У цьому випадку відступи до фрейму не фіксуються, а змінюватимуться пропорційно до його розміру.

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

Як підігнати розмір фрейму під вміст

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

Змінюємо орієнтацію фрейму

Фрейм можна швидко виставити на портретну або альбомну орієнтацію. Іншими словами ви можете присвоїти висоті фрейму значення ширини або навпаки:

Сторінки та файли

Крім фреймів у Figma існують структурні одиниці вищого порядку:

• Сторінки – містять фрейми всередині себе;
• Файли – складаються зі сторінок;

Весь цей час ми працювали всередині єдиної сторінки одного файлу. Щоб створити нову сторінку:

• Клікаємо на назву поточної сторінки Page 1 у верхньому правому куті лівої панелі, щоб показати список усіх сторінок;
• Клікаємо на плюс +, щоб створити нову сторінку;
• Вводимо назву нової сторінки;
• Натискаємо Enter, щоб зберегти назву.

Тепер можна працювати з новою сторінкою, перейти на іншу сторінку, клікнувши на назву або приховати панель сторінок, клікнувши на назву вибраної сторінки у верхньому правому куті лівої панелі. Крім того, натиснувши правою кнопкою миші на назву сторінки, можна:

• Copy Link to Page – скопіювати посилання на сторінку в буфер обміну, щоб поділитися;
• Duplicate Page – зробити копію;
• Delete Page – видалити. Ця команда доступна тільки якщо у вас є хоча б дві сторінки;
• Rename Page – перейменувати сторінку. Як і із шарами, працює подвійний клік.

Подивимось, як виглядає робота зі сторінками на практиці:

Щоб створити новий файл, потрібно:

1. Перейти до списку файлів, натиснувши на іконку головного меню у верхньому лівому куті в браузерній версії Figma, а потім вибравши перший пункт у меню Back to Files;

2. Опинившись на головному екрані ліворуч, ви побачите список розділів:

   • Ваше ім'я – перший пункт зверху. Тут ви можете налаштувати свій профіль: змінити ім'я, поштову адресу та пароль. Інші налаштування зараз не важливі;
   • Search – пошук за проектами за назвою. Якщо у вас буде багато файлів, цей розділ може виявитися корисним;
   • Recent – Нещодавно відкриті файли. Все впорядковано у хронологічному порядку. Зверху нещодавно використані файли;
   • Community – напрацювання спільноти: шаблони, плагіни та інші корисності. Про них поговоримо в наступних уроках, ще зарано;
   • Drafts – повний список всіх файлів, з якими ви працювали.
3. Клікаємо по розділу Drafts. З'явиться список усіх файлів;
4. Натискаємо плюс + у верхньому правому куті або навпаки Drafts. Буде створено новий файл Untitled;
5. Зробіть подвійний клік на поточну назву файлу зверху по центру, введіть нову назву та натисніть Enter, щоб підтвердити;
6. Готово! Ви створили новий файл.

Щоб вибрати інший файл, достатньо назад перейти до списку файлів у розділі Drafts і вибрати файл, що цікавить, у правій панелі.

Організація сторінок

Давайте подивимося, з чого складається типовий проект. На початку це єдина Page 1, але в міру розростання з'являються сторінки з такими назвами:

• User flow name – назва користувач флоу/сценарія. Тобто, кожен окремий сценарій розміщується на окремій сторінці. У деяких випадках можна розмістити кілька сценаріїв на одній сторінці, якщо вони схожі (наприклад, сценарії реєстрації, скидання пароля, входу на сайт);
• References/Moodboards – референси від клієнта та створені на їх основі мудборди. Також тут може бути інформація по проекту;
• Thumbnail – сторінка з обкладинкою проекту, яка відображається на превью в розділі Drafts/Recent. Щоб її застосувати потрібно створити фрейм розміром в 1920х960 пікселів, відмалювати саму обкладинку і у випадаючому меню з правого кліку на кадрі вибрати Use as Thumbnail;
• Components – сторінка із компонентами, що ви використовуєте. Часто доводиться імпортувати цілі бібліотеки компонентів, у такому разі пишеться назва бібліотеки та її версія. Наприклад, Ant Design UI Kit (1.2) (ant.design v4 update) (Light Theme);

У кожного дизайнера свої правила та звички іменування та структурування сторінок, строгих догм тут немає. Я лише показала, як це виглядає у деяких випадках у мене. Інший приклад: створюють сторінку UI з купою екранів (фреймів) фінального дизайну та UX – для всіх вайрфреймів.

Ієрархія проєкту

Зазвичай вистачає одного файлу, але на великих проектах іноді окремі файли розподіляють дизайн по платформах. Наприклад: Web, Mobile, Desktop. Іноді в окремий файл виносять бібліотеку компонентів, але врахуйте, що вам знадобиться платна підписка.

Для новачка буде достатньо одного файлу на проект. З досвідом у якийсь момент ви самі зрозумієте, що вам тісно і копання в десятках сторінок забирає багато часу.

Домашнє завдання

1. Оберіть сайт на свій розсуд і намалюйте його шапку (хедер), підвал (футер) або будь-яку іншу його частину з використанням обмежувачів (Constraints). Ваше завдання налаштувати вміст фрейму таким чином, щоб частина елементів прилипала до лівої сторони, а інша частина до правої. Наприклад, логотип може використовувати обмежувачі Top та Left. Правильно виконане завдання має містити фрейм для кожної частини сайту (окремий фрейм для хедера, окремий фрейм для футера і так далі). А вже всі ці фрейми повинні знаходитися всередині ще одного фрейму (дизайну сайту);

2. Створіть 9 кнопок і налаштуйте обмежувачі таким чином, щоб вони повторювали поведінку, як на першому відео у розділі Види обмежувачів (Constraints) цього уроку. Щоб перевірити, виділіть усі 9 фреймів і змінюйте розмір, як на відео. Використайте комбінації обмежувачів включаючи top, center, bottom, left, right. Кожна кнопка повинна являти собою окремий фрейм та містити як мінімум заливку та текст;
3. Намалюйте форму зворотного зв'язку. Там мають бути поля «Ім'я», «Email», «Повідомлення» та кнопка «Надіслати». Поля повинні тягнутися разом із формою, коли ми змінюємо її ширину. Підказка: знадобиться обмеження Left and right. Форма зворотного зв'язку має знаходитись в окремому фреймі.

Щоб перевірити цю домашку, мені знадобиться доступ до файлу Figma з можливістю вносити правки, щоб подивитися на структуру фреймів і виставлені обмежувачі. Для цього переконайтеся, що ви вибрали опцію can edit напроти Anyone with the link. Далі натискаємо на Copy link і надсилаємо мені в дірект. Будь ласка, надалі всі домашні завдання надсилайте з такими налаштуваннями. Якщо забули, про те, як поділитися файлом писала в цьому уроці.

Висновки

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

Матеріал дуже складний, особливо щодо компонентів і обмежувачів. Перечитайте за кілька днів, потренуйтеся. Це не засвоюється на 100% з першого разу. Наступні уроки будуть коротшими, але я спробую писати їх частіше.

Підписуйтесь на мене в Instagram – @frusia.pro – будьте в курсі анонсів нових уроків, дивіться перевірки домашніх завдань у сторіс, ставте питання, а також на вас чекає безліч корисних постів про дизайн.

Продовжити навчання