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

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

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

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

Групи

Виконуючи домашнє завдання з минулого уроку, ви обов'язково зіткнулися з проблемою управління прошарками. Наприклад, будь-яка кнопка складається з прямокутника (визначає межі) та тексту (який пояснює, що ця кнопка робить). Щоб перемістити кнопку, вам доведеться спочатку виділити кожну її складову. А якщо ви захочете перемістити верхню частину сайту з навігаційним меню, яке складається з 5 текстових елементів? Це вже займе більше часу. З такими мікро-завданнями будете зустрічатись постійно.

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

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

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

Створення та видалення групи

Припустимо, що нам потрібно об'єднати кілька примітивів, що складають кнопку у групу. Для цього:

  1. Скористаємося прийомом з минулого уроку, затиснувши ліву кнопку миші зверху ліворуч і потягнувши її в нижній правий кут, тим самим виділимо всі примітиви, з яких побудована кнопка. На панелі зліва підсвічуються виділені прошарки;
  2. Натискаємо праву кнопку миші над будь-яким із компонентів кнопки і з меню обираємо Group Selection. Доступна і комбінація гарячих клавіш для швидкого об'єднання: Command + G у MacOs або Control + G у Windows;
  3. Зверніть увагу, що в панелі прошарків замість двох виділених примітивів з'явився один прошарок з новою іконкою та назвою Group 1 – це і є наша кнопка;
  4. Тепер ви можете працювати з кнопкою, як зі звичайним прошарком: переміщувати, масштабувати, дублювати і так далі без необхідності виділяти кожен прошарок окремо;
  5. Щоб розбити кнопку назад на складові, потрібно виділити групу і в контекстному меню вибрати Ungroup або натиснути Shift+Command+G у MacOs або Shift+Control+ G у Windows;



Згортання та розгортання групи

Як ви помітили, після створення групи вміст автоматично приховується. Цей стан називається згорнутою групою. Щоб показати вміст, потрібно розгорнути групу:

  1. Підвести курсор до панелі прошарків. Зліва напроти кожної групи з'явиться маленька трикутна стрілочка, що вказує вправо;
  2. Клацаєм на стрілочку і вміст групи стане видимим. Стрілка повернеться донизу, сигналізуючи про розгорнутий стан;
  3. Щоб знову згорнути вміст, ще раз натисніть на стрілку.



Вкладені групи

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

Навіщо це може знадобитися? Все з тією ж метою: для зручної та швидкої роботи. Розглянемо приклад. Кілька кнопок та логотип з підкладкою можуть бути об'єднані в так звану шапку сайту (англійською – header, читається хедер) – елемент дизайну, який повторюється на всіх сторінках і зазвичай містить засоби швидкої навігації. В очах Figma це просто група з іншими вкладеними групами.

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




Перегрупування

Інколи може знадобитись перемістити прошарок з однієї групи до іншої або доповнити групу новими прошарками.

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




Виділення прошарків

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

Вибираємо вкладений прошарок

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

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

Подвійне клацання прискорює виділення під час роботи з вкладеними прошарками та значно швидше за розгортання груп вручну. Але що якщо рівнів вкладеності більше одного? Адже доведеться робити кілька подвійних клацань. Щоб виділити об'єкт на нижньому рівні вкладеності, достатньо затиснути Command у MacOs або Ctrl у Windows і зробити клацання по об'єкту – це називається глибоке виділення (deep selection).




Вибираємо кілька прошарків (новий спосіб)

Затисніть кнопку Command у MacOs або Ctrl у Windows та клацайте на прошарки один за одним на панелі ліворуч. Затисніть клавішу Shift та об'єднайте об'єкти клацанням або рамкою в робочій області. Кожне нове виділення буде об'єднуватися з попереднім. Цей спосіб дуже зручний при створенні груп та у комбінації з глибоким виділенням.




Вибираємо діапазон прошарків

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




Вибираємо перекритий прошарок

Інколи трапляються ситуації, коли прошарок повністю перекритий іншим і його неможливо виділити у робочій області. Залишається тільки копатися у панелі прошарків. У такому випадку достатньо клацнути правою кнопкою миші по області, де знаходиться невидимий прошарок і з випадаючого меню обрати Select Layer, а потім клацнути по назві потрібного вам прошарку.

Ще один варіант: затисніть Ctrl і натисніть праву кнопку миші на область перекриття прошарку. Замість контекстного меню відразу з'явиться список прошарків, що значно швидше за попередній спосіб.

Ці способи виділення працюють і для заблокованих прошарків, але не для невидимих!




Знімаємо виділення

Щоб зняти виділення у робочій області, натисніть Shift і клацніть по потрібному об'єкту або скористайтеся рамкою.

Щоб зняти виділення з об'єкта через панель прошарків, натисніть на виділений об'єкт із затиснутою клавішею Command у MacOs або Ctrl у Windows.




Робота з прошарками

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

Блокування та приховування прошарків

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

  1. Виділіть потрібні прошарки;
  2. Наведіть курсор на виділені об'єкти в робочій області або панелі прошарків;
  3. Викличте контекстне меню правою кнопкою миші;
  4. Виберіть Lock/Unlock, щоб заблокувати або Show/Hide, щоб приховати прошарок;
  5. Якщо навести курсор на прошарок у панелі прошарків, то праворуч від нього з'являться іконки дій: натисніть замок, щоб заблокувати/розблокувати або на око, щоб приховати/показати прошарок;
  6. Але краще користуватися гарячими кнопками: заблокувати – Shift+Command+L у MacOs або Shift+Control+L у Windows; приховати – Shift+Command+H у MacOs або Shift+Control+H у Windows;
  7. Розблокування та показ прихованих прошарків виконуються аналогічно, але виділяти їх слід, зрозуміло, на панелі прошарків.


Копіювання, вирізання та вставка прошарку

Для копіювання об'єкта виділіть його та натисніть Command + C у MacOs або Ctrl + C у Windows.

Щоб вирізати об'єкт, виділіть його та натисніть Command + X у MacOs або Ctrl + X у Windows.

Для вставки виберіть об'єкт або зовсім приберіть виділення та натисніть Command + V у MacOs або Ctrl + V у Windows.

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

  • Якщо нічого не вибрати, то вставка відбудеться в тому ж місці, де знаходився скопійований об'єкт;
  • Якщо вибрати групу або примітив всередині групи, то вставка відбудеться у центрі цієї групи;

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

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




Вставка в позицію іншого об'єкта

Позицією будь-якого об'єкта Figma вважається його верхній лівий кут. Щоб зробити позицію вставки більш передбачуваною, достатньо після копіювання або вирізання вибрати об'єкт і натиснути Shift+Command+V у MacOs або Shift+Ctrl+V у Windows. Новий об'єкт буде вставлено акуратно у лівому верхньому куті виділеного прошарку.




Назви прошарків

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

Перейменування прошарків

Щоб перейменувати прошарок треба:

  1. Вибрати потрібний об'єкт на робочій області або панелі прошарків і натиснути Command + R у MacOs або Ctrl + R у Windows;
  2. Змінити назву прошарку;
  3. Натиснути Enter, щоб зберегти зміни;
  4. Також можна зробити подвійний клацання по назві прошарку на панелі прошарків, щоб увійти в режим редагування.

Щоб перейменувати групу прошарків потрібно:

  1. Вибрати кілька прошарків;
  2. Натиснути Command + R у MacOs або Ctrl + R у Windows;
  3. У полі Rename to вписати нову назву та натиснути Enter.



Задавайте змістовні назви

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

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

Ось невеликий список типових назв прошарків, щоб у вас було уявлення:

  • Header
  • Footer
  • button_cta
  • modal-export
  • Icon_Reload
  • img_banner

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

Імпорт зображень

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

Референси та мудборди

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

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

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

Мудборд

Імпорт із буфера обміну

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

  1. Знайти будь-яке зображення у браузері;
  2. Клацнути правою кнопкою миші по ньому, щоб викликати контекстне меню;
  3. Вибрати команду Copy Image, що змусить браузер скопіювати зображення у буфер обміну;
  4. Перейти назад у Figma;
  5. Натиснути Command + V у MacOs або Ctrl + V у Windows, щоб вставити зображення з буфера;
  6. Зверніть увагу, що якщо зображення виявиться великим, то при його вставці воно перекриє всю робочу область. Не варто цього лякатися, достатньо зменшити картинку;
  7. Далі із зображенням можна працювати, як із прямокутником: змінювати положення, розміри тощо.

У Figma є обмеження на вставку великих растрових зображень: якщо ширина або висота зображення перевищує 4096 пікселів, то вставлений об'єкт буде автоматично відмасштабований до вказаних величин.




Імпорт із файлу

Іноді графічні ресурси надсилають в архівах або файли вже знаходяться на вашому комп'ютері. Достатньо перетягнути файл зображення на робочу область Figma, як показано у відео. Позиція вставленого зображення залежатиме від того, де ви відпустите ліву кнопку миші після перетягування – центр картинки опиниться під курсором.




Інструмент піпетка

Піпетка або Eyedropper Tool або Color Picker – дозволяє зчитати колір з будь-якого примітиву та призначити його вибраному об'єкту. Дуже корисний для вибору кольорової гами на основі зображень. Ми вже знаємо, як скопіювати значення кольору з одного об'єкта та вставити його в інший. Але є і швидший спосіб.

Швидке привласнення кольору

Для швидкого копіювання кольору достатньо:

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



Привласнення кольору пікселів зображення

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




Точне позиціонування

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

  1. Виділіть об'єкт, який ви хочете точно підігнати;
  2. Затисніть кнопку Option у MacOs або Alt у Windows;
  3. Підведіть курсор до іншого об'єкта, щоб побачити відстань у пікселях;
  4. Одночасно змінюйте положення виділеного об'єкта за допомогою кнопок-стрілок.



Як поділитись проєктом

Давайте домовимося, що надалі усі домашні завдання ви будете відправляти у вигляді посилання. Для цього у Figma є кнопка Share у верхньому правому кутку. Інструкція:

  1. Натисніть Share;
  2. Натисніть на Only people invited to this file;
  3. У списку, що випадає, виберіть Anyone with the link, щоб зробити файл доступним для кожного за посиланням;
  4. Клацніть Copy link, щоб скопіювати посилання у буфер обміну;
  5. Тепер надішліть посилання людині, з якою хочете поділитися вашим файлом. Доступ буде лише для перегляду: всі, хто перейде за посиланням, не зможуть нічого змінити.



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

Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.

За реквізитами пишіть в дірект Інстаграму @frusia.pro
Курс і уроки залишаються безкоштовними.

Домашні завдання більше не перевіряються для громадян росії.


  1. Поверніться до файлу з першим та другим завданням з минулого уроку та наведіть там порядок: згрупуйте та перейменуйте прошарки (придумайте змістовні назви), щоб у них було легко орієнтуватись;
  2. Зайдіть на сайт Behance (тут дизайнери діляться своїми роботами), прокручуйте сторінку доки не знайдете ілюстрації (не плутати з фотографіями). Ілюстрації (дивіться приклад у відео з попереднього розділу «Як поділитися проєктом») нам ідеально підходять, тому що з них простіше виділити основні кольори. Скопіюйте собі п'ять картинок, які вам подобаються (щоб стала доступна команда Copy Image, потрібно попередньо натиснути на роботу, вона збільшиться). Для кожної картинки намалюйте 4-8 кружків однакових розмірів та пофарбуйте їх у ключові кольори ілюстрації (використовуйте піпетку);
  3. Введіть у пошуковому рядку Behance запит "UI web app". Намагайтеся знайти простенький дизайн сайту і перемалюйте його якомога детальніше, наскільки у вас вийде (ігноруйте те, що поки не можете відтворити). Ілюстрації та фото замініть своїми, шукайте їх на сайті Unsplash;
  4. Тренуйте надивленність. Заходьте на сайт Awwwards і переглядайте розміщені там сайти не менше 10 хвилин на день – тут зібрані найкращі приклади веб-дизайну. Ви можете також використовувати цей сайт для попереднього завдання;
  5. Завдання підвищеної складності (за бажанням). Намалюйте по одній сторінці з будь-яких двох сайтів, які ви знайдете на Behance або Awwwards.

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

Висновки

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

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

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

Stay tuned!