Як працювати із зображеннями у Figma

Як додати зображення на макет і відредагувати його без «Фотошопа».

Meery Mary для Skillbox

У Figma дуже зручно працювати із зображеннями: швидко обрізати, видалити фон або скоригувати колір. А прискорити роботу над ними допоможуть вбудовані функції та плагін.

Як додати зображення на макет

Перетягніть зображення на макет з робочого столу або з папки:

Скопіюйте зображення поєднанням клавіш Ctrl (⌘) + C і вставте його в макет, натиснувши Ctrl (⌘) + V:

Також можна копіювати зображення з інтернету: натисніть правою кнопкою миші будь-яку ілюстрацію в браузері, виберіть «Копіювати зображення», потім перейдіть в Figma та натисніть Ctrl (⌘) + V:

Функцією Place Image можна автоматично поставити зображення відразу туди, де воно має бути:

• Створіть кілька довільних кадрів на макеті.
• Натисніть іконку , виберіть пункт File та натисніть на Place Image. Або затисніть клавіші Ctrl (⌘) + Shift + K.
• У меню виберіть будь-які зображення.
• По черзі додайте зображення до кадрів. На курсорі відображається мініатюра поточної ілюстрації.

За допомогою заливки можна використовувати зображення як фон кадру або фігури:

• Виберіть кадр або фігуру.
• На панелі інструментів у блоці Fill натисніть на колір і в меню у верхньому правому куті замість Solid виберіть Image.
• У цьому меню натисніть на чорно-білу картинку і виберіть будь-яке зображення на комп'ютері.

Аналогічно можна використовувати зображення як заливку обведення. Тільки замість блоку Fill потрібно заходити до блоку Stroke.

Налаштування зображення

У Figma у будь-якого зображення можна змінити властивості заливки та зробити мінімальну корекцію кольору. Щоб відкрити ці налаштування, виділіть будь-яку ілюстрацію на макеті, потім у блоці Fill натисніть її мініатюру.

Fill — зображення повністю заповнює доступний простір, в якому знаходиться.

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

Crop — обрізає зображення та фіксує його видиму частину. При зміні розміру вона може розтягнутися.

Tile — вільний простір заповнюється копіями зображення. Цю властивість дуже зручно використовувати з патернами.

Хоча в Figma можна зробити мінімальну корекцію кольору, якісно відредагувати фотографію не вийде — для цього краще йти в Photoshop.

Налаштування корекції кольору в Figma:

• Exposure - Експозиція.
• Contrast - Контраст.
• Saturation - Насиченість.
• Temperature - Температура.
• Tint - Відтінок.
• Highlights - Інтенсивність світла.
• Shadows - Інтенсивність тіні.

Маска шару

За допомогою маски шару можна надати зображенню нестандартної для Figma форми:

• Створіть будь-яку фігуру, виберіть зображення на макеті та розташуйте їх один на одному. Простежте, щоб на панелі шарів зображення було вище фігури.
• Затиснувши Ctrl (⌘), перейдіть до фігури та зображення, а потім на панелі інструментів натисніть .
• Щоб змінити відображувану частину зображення, просто виділіть її на панелі шарів і змініть розмір на полотні.

Так само зображенням можна заповнити будь-що: від кількох фігур до тексту.

Корисні прийоми

Відобразити зображення по вертикалі можна за допомогою гарячих клавіш Shift+H. По горизонталі Shift+V.

Копіювати SVG-іконку з будь-якого сайту у Figma можна через браузер:

• Зайдіть на сайт із потрібною іконкою, натисніть праву кнопку та виберіть "Подивитися код".Праворуч відкриється панель з HTML-кодом сайту.
• У вікні з кодом на панелі зверху натисніть іконку і виберіть потрібну іконку на сайті.
• У HTML-коді виділиться тег , прямо над ним буде - Натисніть на нього і скопіюйте за допомогою поєднання Ctrl (⌘) + C на клавіатурі.
• Зайдіть у Figma та натисніть Ctrl (⌘) + V — іконка стане на макет.

Швидко вирізати об'єкт допоможе плагін Remove BG, що автоматично видаляє фон.

Як встановити плагін Remove BG:

• Зайдіть на сторінку плагіна та встановіть його, натиснувши Install.
• Зареєструйтесь на сайті remove.bg.
• На сайті натисніть на іконку профілю та зайдіть у панель керування.Ключ API», потім ― на кнопку «Показати» та скопіюйте отриманий код.
• Зайдіть у Figma, натисніть на іконку , перейдіть, потім у Remove BG, натисніть на Set API key. У вікно, що з'явилося, вставте ключ, який ви взяли з сайту, і натисніть OK.
• Додайте на макет будь-яку ілюстрацію, натисніть на неї правою кнопкою миші, перейдіть до Plugins → Remove BG → Run.Фон з ілюстрації видаляється.

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

Більше цікавого про дизайн у нашому телеграм-каналі.

Більше про Figma

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

Figma: ТОП-18 питань, як зберегти, вставити, вирізати та багато іншого

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

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

№ 1. Як завантажити Фігму, встановити та налаштувати її?

Desktop додаток Фігма знаходиться у відкритому доступі та поширюється безкоштовно. Щоб встановити, спочатку потрібно зареєструватися. Для цього переходимо на офіційний сайт figma.com та виконуємо такі дії:

1. Натискаємо Sign Up, клацаючи по кнопці в шапці;
2. Вводимо свій email та пароль;
3. Вказуємо дані, такі як прізвище та ім'я;
4. Відповідаємо на запитання "навіщо планується використовувати сервіс?" і в списку, що розкривається, вибираємо відповідь. Якщо ви збираєтеся використовувати для дизайну, залишаємо “Design”.
5. Після виконання всіх пунктів переходимо на головну сторінку, натискаємо на своє ім'я та опиняємось у профілі, тут є три вкладки: Teams, Plugins та Settings. У нашому випадку вибираємо другу вкладку та натискаємо посилання “Download the latest desktop app”. Приклад усіх дій показаний на скріншоті нижче:

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

Операційна система (ОС)

Десктопна програма запускається залежно від встановленої системи. Наприклад, якщо це Windows, переконайтеся, що версія не старше 8.1. У випадку, коли на комп'ютері стоїть MacOS, то тут вимоги – версія не старша за 10.10 (Yosemite).Linux – допустима будь-яка версія.

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

• Google Chrome – ver 58+
• Mozilla FireFox – ver 57+
• Safari 11+
• Microsoft Edge – 16+

Технічні характеристики ПК

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

Після того, як користувач успішно пройшов реєстрацію, його може зацікавити наступне питання.

№ 2. Як налаштувати Фігму?

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

Є ще функції оновлення плану, створення профілю спільноти, встановлення установок, пов'язаних із повідомленням.

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

№ 3. Як зробити фігму російською мовою?

Сервіс не підтримує мультимовність, тому доведеться розбиратися власними силами. В інтернеті достатньо інформації та навчального контенту від різних авторів. Якщо терміново потрібно отримати переклад, тут допоможе Google перекладач. Інші функції можна дізнатися в різних джерелах, включаючи форуми та інтернет-спільноти, наприклад, figma.community.

Коли виникли питання або потрібна порада щодо встановлення плагіна для виконання певних завдань, слід звернутися на форум.Сам по собі онлайн-сервіс наділений мінімальним набором інструментів, тому не потрібно глибоких знань англійської, щоб розібратися, як працювати в Фігма.

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

№ 4. Як встановити у фігмі плагін?

Насамперед створимо новий проект. На головній сторінці клацніть +New, знаходиться це посилання в правому верхньому кутку, потім нас перекине в редактор. Натискаємо на гамбургер-меню і вибираємо з списку, що розкривається, пункт Plugins, нас цікавить Manage. Саме там знаходяться всі утиліти, які дають нові функції.

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

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

Коли потрібно вирішити конкретне завдання, то перш за все слід шукати plugin під завдання в інтернеті.

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

№5. Як включити у фігмі сітку та лінійку?

Цей інструмент знаходиться у властивостях кадру, у правому вікні, називається "Layout Grid". Натиснувши плюсик, у вас уся область покриється червоними лініями. Колір можна відрегулювати та встановити, наприклад, помаранчевий. Все це робиться в налаштуваннях Grid. Там вибираються такі параметри, як Колонки (Columns) і Ряди (Rows).

Крім того, може знадобитися лінійка, вона стане в нагоді для вирівнювання по лінії. Щоб на екрані з'явилася лінійка, потрібно включити її, для цього перейдіть в меню view->Rulers, як показано на картинці.

З'являться дві смужки з цифрами, вертикальна та горизонтальна, щоб додати лінію, потрібно клацнути мишкою по лінійці та утримуючи перемістити на frame, потім на області з'явиться “line”. Надалі line можна перемістити на зручну позицію. Тут ми дали відповідь, як зробити у фігмі сітку та розташувати об'єкти.

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

І тому існує зумер. Пункти з налаштування масштабування, відповідно, знаходяться в меню у розділі View.

Щоб віддалити або наблизити, скористаємося першими двома кнопками Zoom In та Zoom out, гарячі клавіші "+" та "-". Коли потрібно “наблизити до 100 %”, то включаємо третій параметр.Якщо повністю показати дизайн, то активуємо четвертий пункт. П'ятий, selection, відображає лише виділений контейнер. Наприклад, якщо вибрати rectangle і потім натиснути Zoom to selection, то камера сконцентрується на квадраті, те саме і з будь-яким іншим контейнером.

Збільшувати можна, використовуючи коліщатко миші. Коли прокручуватимете, утримуйте клавішу CTRL.

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

• Shift+Tab – переходить до наступного контейнера, попередній має бути обраний заздалегідь мишкою.
• Enter – щоб провалитися всередину та відібрати весь вміст, натисніть “Введення”. Пам'ятайте, що frame має бути обраний.
• Shift+Enter – це зворотний спосіб. Він дозволяє піднятися на рівень догори і зробити відзначеним головну область. Запам'ятайте, що в цьому випадку один або кілька блоків потрібно вибрати.
• Main menu->Edit->Select All - відзначає всі об'єкти. Якщо раптом потрібно відібрати лише з однаковим кольором заливки, то в цьому випадку “same fill”.

№6. Як зробити текст у Фігмі?

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

Клацніть по області та починайте вписувати назву. Іноді може знадобитися урізноманітнити шрифти, тому слід завантажити додаткові fonts (шрифти).Працюючи в десктопній версії програми на ПК, у вас автоматично піде підвантаження всіх вбудованих на комп'ютері шрифтів. Коли мова заходить про те, як встановити шрифт у Фігму, то в цьому випадку достатньо скачати потрібний font, знайти спеціальну папку на ПК (скориставшись пошуком), і туди скинути нові текстові стилі.

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

Як додати шрифт до Фігми ?

Тут немає нічого складного: переходимо в панелі Settings облікового запису користувача і шукаємо кнопку "Download installer to enable local fonts". Приклад усіх дій показаний на скріншоті:

Почнеться завантаження, файл exe, що виконується, потрібно запустити. З'явиться повідомлення, що локальні шрифти завантажені. На офіційному сайті є плагін Font Awesome Icons, він у спливаючому вікні показує набір іконок. Щоб скористатися ним, необхідно встановити plugin у браузері. Пояснення, як поставити плагін, написано вище.

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

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

№ 7. Як вставити у Фігмі картинку?

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

Інший варіант скористатися командою “Place Image (Ctrl+Shift+K)”.

У вікні вибираємо мишкою підходящі файли, утримуючи при цьому Shift, натискаємо відкрити. Файли прикріпляться до курсора, після кожного натискання на frame, вони будуть розміщені. Можна скористатися Place All для швидкого додавання.

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

Зараз створимо logo готелю, для цього візьмемо потрібне фото в інтернеті і приберемо background, залишимо тільки будинок.

№ 8. Як вирізати у Фігмі об'єкт?

Щоб відобразити лише будівництво, потрібно застосувати Tools Pen. Перо підходить, оскільки здатне забезпечити високу точність. Починаємо прокладати лінії довкола будівлі.

Якщо подивитися на вкладку Layers, то видно, що у нас вийшов "Vector 1". Скористайтеся параметром Fill у правій панелі, щоб зробити заливку.

Vector1, який відображається у шарах – це маска, за допомогою неї ми видалимо background та залишимо тільки будівлю. Перетягнемо маску, щоб вона відображалася на верхньому щаблі і не закривала "готель". Клацнімо на vector1 у шарах і застосуємо Use to mask (Ctrl+Alt+M).

Нам удалося приховати background. Іноді веб-дизайнер може зіткнутися із ситуацією, коли об'єкт вирізаний нерівно і частина прихована під маскою.І тут можна застосувати одну хитрість. Додати на лінії "вектора" вусики, за які можна потягнути та зрушити кордон. Робиться це так. Насамперед слід закрити основну картинку від редагування, повісивши замок. Після того як зображення заблоковане, подвійним клацанням натискаємо на Vector1. Відобразиться нова панель редагування.

Вибираємо перо, як показано вище, і додаємо вусик, клацаючи по межі вектора, і малюємо у напрямку всередину картинки. Щоб закріпити, тиснемо двічі мишкою або на кнопку “Done”.

Далі вистачаємо крапку і рухаємо у потрібному напрямку, налаштовуючи вирівнювання. Коли вдалося додати Mask, потрібно з'єднати усі шари.

№ 9. Як об'єднувати у Фігмі?

Для цих цілей існує угруповання, щоб її зробити, потрібно виділити обидва об'єкти та натиснути комбінацію клавіш CTRL+G. Інший варіант – скористатися контекстним меню, натиснувши правою кнопкою миші Group Selection.

Щоб розгрупувати елементи, клацаємо на об'єднаному об'єкті та CTRL+SHIFT+G. У контекстному меню з'явиться новий пункт Ungroup, він також використовується для роз'єднання. Іноді потрібно створити компоненти. Вони потрібні, щоб додавати велику кількість шаблонів з однаковими властивостями, але зміненими деякими складовими.

Прикладом може бути кнопка, у якої проставлені однакові розміри, але колір та ім'я повинні відрізнятися. Для об'єднання в компонент виберемо два блоки і натиснемо CTRL+ALT+K або на верхній панелі відповідну кнопку, там також є список, що розкриває, де пропонується використовувати Create Multiple Components. Він дозволяє створити компоненти з усіх зазначених об'єктів.

Зараз застосуємо угруповання (CTRL + G) і об'їмо будівлю з "маскою". Тепер створимо логотип реклами "готелю".Щоб будівля відображалась у колі. Намалюємо еліпс та заповнимо його кольором.

Розташуйте його нижче Group 1, зробіть копію та перетягніть поряд. Ctrl+C та Ctrl+V.

До другої групи знову застосуємо маску.

Краї, що виступають, у першої групи (Group1) слід прибрати, а саме зрізати кути.

№10. Як обрізати у фігмі картинку?

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

У результаті вийшло два контейнери, тепер один слід накласти на інший.

Таким чином, використовуючи маски та зрізи можна створювати logo для компанії, кінцевий результат:

У вільному просторі еліпса можна написати назви готелю.

№11. Як зробити у Фігмі фон чи прибрати його взагалі?

Іноді дизайнеру потрібно залишити деякі предмети, а background видалити чи замінити. Зрозуміло, підійде варіант, описаний вище, спосіб за допомогою пера та маски, але є більш дієвий спосіб. Для цього існує plugin, який називається Remove BG. Він працює на нейронних мережах та вміє автоматично вирізати фон. Щоб швидко його знайти, вбиваємо назву в Google і переходимо на веб-сайт.

Натискаємо Install, тепер, якщо перейти до веб-сервісу, з'явиться Remove Bg, там є два пункти Run і Set Api Key. Спочатку перейдемо до Set Api Key. З'явиться інструкція з двох кроків, вибираємо посилання та переходимо на веб-сайт, щоб пройти реєстрацію.

Відвідуємо сайт і реєструємось, у верхньому лівому куті тиснемо кнопочку Login/Sign Up. Переходимо у вкладку та заповнюємо даними, вказуємо поштову адресу та пароль.Є дві галочки, перша обов'язкова, друга – це запит “надсилати повідомлення, розсилки про нові функції та пропозиції”.

Після заповнення клацаємо по Sign up, на пошту прийде лист із активацією. Якщо не прийшло, перевірте папку "Спам", іноді помилково пошта потрапляє туди. Переходимо за посиланням та активуємо обліковий запис, тепер можна користуватися функціоналом. Зайдемо в My Dashboard і попрямуємо до Api Key, потім натискаємо на Show, з'явиться ключ Api.

Копіюємо ключ і повертаємося в плагін, відкриваємо вікно і вставляємо key, потім клацаємо по save:

Щоб протестувати, як працює Remove BG, знайдемо потрібну картинку в інтернеті, наприклад, “Люди”.

Застосуємо до фото plugin->Run і подивимося результат, в результаті має вийти фотографія дівчини без зайвих об'єктів. Тепер зробимо background, наприклад, офіс і накладемо на картинку. При цьому робіть так, щоб шар office знаходився нижче шарів, щоб не перекривав фото дівчини. Приклад:

Таким чином, за допомогою плагіна накладається та забирається фон. Досить зручний інструмент Remove BG, тому що немає потреби вирізати окремі об'єкти за допомогою "пера", все робить утиліта автоматично.

Кожен прототип зазвичай супроводжується кнопками. Вони створюються за допомогою звичайних примітивів: квадратів, еліпсів і відповідно зверху накладається напис. Створимо контейнер із назвою button1. Колір та інші параметри можна призначити у Design. Робимо поєднання в компонент, вигадуємо назву.

Далі можна копіювати кілька разів, змінювати налаштування та додавати нові параметри, один з яких може бути gradient.

№ 12. Як зробити у Фігмі градієнт?

Крім заливки на палітрі кольору є такий параметр як gradient.Щоб додати його, потрібно вибрати стиль у списку, що розкривається: Solid, Linear, Radial, Angular і Diamond. Нижче під списком можна виявити колірний повзунок, на ньому позначаються кольори, які допоможуть надати інший відтінок лініям.

Для наочності нижче показано і підписано, як виглядатиме кожен градієнт окремо.

Обговоримо деякі питання, які цікавлять користувачів Figma.

№13. Як видаляти у фігмі?

Виділяємо будь-який контейнер та натискаємо клавішу на клавіатурі del або delete.

№14. Як скопіювати у фігмі?

Щоб зробити відразу кілька копій, потрібно зробити дію на вибраному суб'єкті CTRL+C.

№15. Як вставити у фігмі?

Коли елемент скопійований, його потрібно вставити, для цього є швидкий спосіб CTRL+V.

№16. Як скасувати у фігмі останню дію?

Щоб зробити крок назад, використовуються комбінації клавіш CTRL+Z.

№17. Як зберігати у фігмі?

Після завершення проектних робіт потрібно зробити збереження. У системі вже заздалегідь передбачено autosave, всі копії зберігаються в історії. Щоб занести до історії ще копію, натисніть Ctrl+Alt+S.

№ 18. Як експортувати з Фігми?

Коли потрібно зробити Export конкретного jpg файлу або групи з декількох image, у цьому випадку в правій панелі потрібно скористатися опцією Export, натиснути плюсик, і вибрати формат збереження, після цього натиснути Export Group.

У верхньому лівому є додаткові пункти для збереження та показу історії версій копій (Show Version History).

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