Як зберігати у Фігмі: формати JPG, PNG, PDF, SVG, FIG

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

• JPG – найпопулярніший формат. Підходить для збереження будь-яких зображень, фотографій, макетів тощо.
• PNG — формат підходить для картинок із прозорим фоном.
• SVG – векторний формат. Підходить для експорту іконки, ілюстрації, логотипи і т.д.
• PDF — якщо потрібно створити документ або презентацію.
• FIG — внутрішній формат Figma для збереження на комп'ютері.
• Масовий експорт - підійде, якщо потрібно зберегти відразу багато картинок, фото, іконок або інших елементів у представлених форматах вище.

Примітка: робити дії, щоб постійно зберігати роботу у фігмі немає необхідності. Усі ваші роботи автоматично зберігаються на серверах Фігми. Ця інструкція потрібна, якщо ви хочете зберегти дизайн макет для портфоліо або експортувати будь-який елемент для інших цілей.

Швидка інструкція з експорту файлів у Фігмі

Будь-яке зображення, зображення, фото, кадр, макет, файл або проект можна експортувати за допомогою функції експорту. Виберіть потрібний елемент і натисніть навпроти напису «Export» іконку «+». Після цього ви зможете вибрати потрібний формат.

Натиснувши напис «Prewie», ви можете зробити попередній перегляд елемента, що експортується. Щоб зберегти елемент на комп'ютер, натисніть кнопку «Export НАЗВА ВИБРАНОГО ЕЛЕМЕНТА».

Зміна масштабу експортованих файлів

Якщо хочете зберегти проект розмірами в 2 рази менше, варто вибрати інший масштаб. Спочатку коштує 1X - це означає, що ваш проект буде зберігатися один до одного.

Якщо для макету розмірами 1920 x 1000 px, поставити значення 0.5X, то масштаб збереженого файлу буде вдвічі меншим (960 x 500 px). Аналогічно об'єкт збільшиться вдвічі, якщо поставити 2X.

Зберегти проект або картинку Figma у форматі JPG

Формат JPG – це растровий формат. Елементи зберігаються з розширенням ".jpg".

Формат JPG підходить для збереження:

• Фото.
• Малюнок.
• Зображення.
• Дизайн макетів.

Інструкція з експорту з Figma до JPG на комп'ютер:

Щоб зберегти будь-який об'єкт, проект або дизайн макет у Figma виділіть його. Наприклад візьмемо перший екран Landing Page. У правій панелі натисніть іконку плюсика навпроти напису «Export». Виберіть зі списку формат JPG. Після цього натисніть кнопку експорту та виберіть місце для збереження на комп'ютері.

Збереження з фігми файлів у форматі PNG

PNG – це растровий формат зображень. Відмінність PNG від JPG полягає в тому, що цей формат підходить для збереження зображень із прозорим фоном.

Інструкція як зберігати у фігмі в PNG на комп'ютер:

Виберіть зображення або зображення для експорту. Для наочності візьмемо зображення жінки, що у колі. Натисніть плюс поряд із написом «Export» у правій панелі та виберіть формат PNG зі списку.

Якщо натиснемо на експорт і зробимо перегляд натиснувши на напис «Prewie», то буде видно, що навколо зображення з'явився фон у вигляді шахівниці. Це означає прозорість.

Експорт у форматі SVG

SVG – це векторний формат зображень. Векторний формат відрізняється від растрового тим, що в ньому немає пікселів. Якщо ви збільшите JPG або PNG, то з'являтиметься зернистість у вигляді пікселів. Із форматом SVG цього не відбувається.

Надалі ви зможете редагувати ці зображення в інших графічних редакторах, таких як Adobe Illustrator, Inkscape, Affinity Designer, Inscape та інших.

Формат SVG підходить, якщо потрібно зберегти:

• Значки.
• Прості фігури створені у Figma за допомогою інструментів Shape tools (прямокутники, круги, лінії, багатокутники)
• Ілюстрації.
• Елементи створені за допомогою пера або олівця у фігмі.

Як зберігати у фігмі в SVG:

Щоб зберегти елементи з фігми у форматі SVG, виберіть елемент. У правій панелі натисніть + навпроти "Export" і натисніть кнопку експорту. Виберіть місце для збереження на робочому столі або комп'ютері.

Як зберегти у Фігмі у форматі PDF

PDF підходить для експорту різних документів чи презентацій.

Щоб зберегти елементи з фігми у форматі PDF, є 2 варіанти — експортувати кожен елемент окремо, або створити 1 файл з безліччю сторінок. Розглянемо кожен із цих варіантів окремо.

Експорт із фігми в PDF з безліччю сторінок.

Формат PDF підходить якщо ви хочете створити:

• презентацію.
• Будь-який документ у форматі A4.
• Книжка.
• Брошура.
• Маркетинг кіт.
• Комерційна пропозиція.

Покрокова інструкція щодо створення PDF файлів:

Наприклад експортуємо кілька моїх робіт і створимо невелике портфоліо (підійде для відправки замовнику).

1. Щоб зробити експорт у PDF з безліччю сторінок, натисніть на меню «гамбургер» зліва, зверху.
2. Виберіть "File" -> "Export Frames to PDF" і збережіть на робочий стіл.

Важлива примітка: у цьому випадку нічого не потрібно виділяти. Експортуються всі створені вами раніше кадри у вашому проекті.

Експорт у PDF вибраних елементів:

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

Як зберегти проект у Фігмі у форматі FIG (внутрішній формат)

Щоб зберегти файл у внутрішньому форматі фігми з розширенням ".fig" зверху натисніть на вкладку "File" і виберіть пункт "Save As .fig ...".

Імпорт файлів у Figma у форматі ".fig"

Файл у форматі ".fig" можна завантажити у фігму, якщо перейти у всі ваші проекти розділ "Drafts" і перетягнути до інших проектів. Також є іконка "Import" зверху, праворуч.

Масовий експорт з Figma

Якщо у багатьох елементів вже був натиснутий плюсик експорту, то можна масово їх експортувати, натиснувши на поєднання гарячих 3 клавіш «Ctrl+Shift+E». З'явиться спеціальне вікно експорту.

Як називати файли, щоб зберегти їх у різні папки під час експорту

Якщо ви зберігаєте файли для розробки сайтів, краще називати їх англійською мовою. Наприклад "Woman", "Illustration" і т.д.

Якщо хочете зберегти файл в окрему папку, то перейменуйте шар таким чином:

Файли зберігаються в окремих папках на вашому комп'ютері з назвами «1», «2», «3».

Далі поговоримо про формати та для яких елементів вони підходять.

Важливе доповнення:

Якщо ви хочете передати макет вашому замовнику, то немає потреби зберігати все на комп'ютер і відправляти (це минуле століття). Простіше поділитися посиланням на ваш проект. Це можна зробити натиснувши кнопку зверху, праворуч «Share» (1) і скопіювавши посилання (2).

Також можна поділитись вашим проектом у режимі презентації. Для цього натисніть на іконку Play, зверху, праворуч. Потім натисніть кнопку "Share prototype" і скопіюйте посилання натиснувши на "Copy link"

P.S.У цій статті ви дізналися про те, як зберігати файли у Figma у різних форматах.

Бажаєте отримати бонусний урок швидкого створення дизайн макетів Landing Page у Figma? Натисніть на це посилання та отримайте 24 розділи для прототипування та дизайну Landing Page у Figma.

P.S. Проект та автор не пов'язаний з компанією Figma (Not affiliated with Figma).

Як експортувати зображення з Figma

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

Експорт одного зображення

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

У налаштуваннях експорту ви можете вибрати його розмір та формат файлу: PNG, JPG, SVG або PDF. Фото з прозорістю зберігають зазвичай у форматі PNG, без прозорості – у JPG, з векторними формами (логотипи, іконки) – у форматі SVG.

Експорт або збереження зображення з макета виконується натисканням на кнопку Export photo (замість photo ви побачите назву шару із зображенням або групи шарів).

Зверніть увагу на зображення на скріншоті. Для нього доданий ефект тіні, який залишиться при збереженні зображення під час експорту і який краще додати за допомогою css-властивості box-shadow. Щоб вимкнути ефект накладання тіні, перейдіть до блоку Effects вище за блок Export і натисніть на іконку у вигляді вічка.

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

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

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

Експорт кількох зображень

Найпростіший варіант експорту кількох зображень - це, коли вони лежать у одній групі (фрейме) як низки послідовних шарів. Тут досить просто виділити всі необхідні шари в панелі шарів із затиснутою клавішею Shift, або якусь частину з них із затиснутою клавішею Ctrl та експортувати відразу zip-архів з усіма зображеннями.

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

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

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

Декілька потрібних шарів у Figma можна виділити з клавішею Shift та експортувати їх у вигляді zip-архіву у потрібному форматі. На скріншоті вибрано експорт у форматі PNG.

У тому випадку, коли потрібно експортувати всі шари як єдине зображення, потрібно створити з них групу, натиснувши клавіші Ctrl+G, і виконати експорт для неї, виділивши її в панелі шарів. У цьому випадку ви завантажите zip-архів, але в ньому буде одне зображення.

Експорт одного зображення-групи з Figma

Експорт вихідного зображення, використаного як заливка

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

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

При експорті ми отримаємо зображення такого виду:

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

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

Експорт кадрів Figma у PDF-формат

У випадку, якщо вам потрібно надіслати документ у PDF-форматі клієнту або використовувати всі файли для відкриття у Photoshop, така функція також передбачена у Figma.

Для цього вам необхідно виділити потрібні фрейми, клацнути на іконку Figma у лівому верхньому кутку та в меню File вибрати пункт Export Frames to PDF. Після цього вам потрібно буде просто зберегти PDF-файл на комп'ютері, якщо це не відбувається автоматично у вашому браузері.