Як зберегти файл у Фігмі: докладна інструкція у форматах PNG, JPG та PDF

Збереження файлу – важливий етап у роботі над будь-яким проектом. Особливо якщо йдеться про такий популярний інструмент, як Figma. Зручний інтерфейс та хмарне зберігання – це, звичайно, здорово. Але іноді потрібна локальна копія. Як експортувати зображення, креслення, макети із Figma на комп'ютер? У цій статті ми докладно розберемо всі основні формати та варіанти збереження файлів.

Розділ 1. Основи збереження у Figma

Figma, на відміну багатьох інших графічних редакторів, використовує хмарне зберігання даних. Це означає, що всі файли автоматично зберігаються на серверах Figma в режимі реального часу. Тому немає необхідності постійно натискати клавіші CTRL+S після кожної дії, як ми звикли робити у Photoshop або Illustrator.

Однак іноді трапляються ситуації, коли потрібно зберегти файл локально на комп'ютері. Наприклад:

• Нестабільне інтернет-з'єднання
• Перенесення файлів на інший комп'ютер
• Створення архівної копії проекту
• Передача файлів замовнику

Давайте розберемо основні способи збереження файлів у Figma.

Версії та історія правок

Figma зберігає не лише поточний стан вашого проекту, а й усі попередні версії. Щоб переглянути історію змін, виберіть меню File > Version history.

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

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

Збереження локальної копії

Щоб зберегти файл Figma на комп'ютері, у меню File виберіть пункт Save As. та вкажіть потрібну папку. Файл буде збережено у спеціальному форматі FIG.

Таку локальну копію можна завантажити назад у Figma за допомогою кнопки Import. Це зручно при перенесенні файлів між пристроями або для резервування даних.

Запрошення для спільної роботи

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

У меню Share виберіть потрібний рівень доступу:

• Перегляд тільки для перегляду
• Коментування – можна залишати коментарі
• Редагування – повний доступ до зміни файлу

Потім скопіюйте запрошення і відправте колезі.

Розділ 2. Експорт зображень із Figma

Крім збереження вихідних файлів FIG, Figma можна експортувати різні елементи в растрові або векторні формати. Це потрібно для передачі зображень розробникам, використання презентацій, публікації в Інтернеті.

Растрові та векторні формати

Растрові формати (JPG, PNG, TIFF) зберігають зображення як набір пікселів. При збільшенні растрової графіки сильно втрачається якість.

Векторні формати (SVG, PDF) використовують математичний опис фігур. Їх можна масштабувати без втрати якості.

Для логотипів, іконок, схем найкраще підходить векторний SVG. А фотографії та деталізовані макети – в растровому PNG або JPG.

Налаштування експорту

Щоб експортувати з Figma, виділіть потрібний шар чи групу та натисніть кнопку + Export у правій панелі.

Тут можна налаштувати:

• Формат (JPG, PNG, SVG)
• Розмір у пікселях або відсоткове співвідношення
• Дозвіл у PPI для растрових зображень
• Колірний профіль sRGB або RGB

Після налаштування натисніть Export [ім'я шару] та збережіть файл на комп'ютері.

Експорт шарів та груп

Figma дозволяє гнучко налаштовувати структуру проекту за допомогою шарів та груп. Це також впливає на експорт.

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

Також можна робити комбінований експорт у декілька форматів одночасно.

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

Якщо потрібно експортувати одразу багато елементів, можна скористатися опцією Export All. Вона викликається гарячими клавішами ⌘⇧E.

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

Експорт в PNG з прозорим фоном

PNG - один із найкращих форматів для збереження прозорості. Він часто використовується у веб-дизайні.

Щоб експортувати зображення з Figma з прозорим тлом:

1. Виділіть потрібний об'єкт
2. У налаштуваннях експорту виберіть формат PNG
3. Переконайтеся, що прозорість увімкнена
4. Натисніть Export та збережіть файл

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

Передача файлів замовникам

Окремо варто сказати про експорт для замовників та підрядників. За допомогою Figma можна легко генерувати всі потрібні вихідні засоби для розробки сайту або мобільного додатка.

Наприклад, для верстальника знадобляться:

• Макети сторінок у JPG
• Логотип та іконки у SVG
• Шрифти та текстури

У такий спосіб можна оптимізувати передачу графічних активів та прискорити роботу над проектом.

Переваги векторних форматів

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

Це дозволяє ефективно використовувати їх у таких випадках:

• Логотипи та фірмові знаки
• Іконки та ілюстрації
• Схеми та діаграми
• Креслення та карти

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

Втрата якості при експорті в JPG

Основний недолік растрових форматів - втрата якості зображення під час стиснення. Особливо це помітно в JPG через застосований алгоритм стиснення з втратами.

Чим вище ступінь стиснення JPG, тим менше розмір файлу, але тим більше візуальних артефактів та шумів. Це важливо враховувати під час експорту з Фігми.

Для якісних макетів найкраще використовувати PNG. Для фотографій допустимо JPG з помірним стиском до 80%.

Порівняння растрових та векторних форматів

Для наочності наведемо порівняння основних форматів, які використовуються під час експорту з Фігми:

Оптимізація SVG перед експортом

Формат SVG є одним із найефективніших способів зберігання векторної графіки. Однак іноді файли виходять занадто великими.

Щоб зменшити розмір SVG, який експортується з Фігми, рекомендується:

• Спростити складні градієнти
• Об'єднати кілька шляхів
• Видалити шари, що не використовуються.
• Звести кількість вузлів у кривих

Таку оптимізацію SVG краще проводити у спеціальних редакторах на кшталт Inkscape. Але частково її можна зробити у Фігмі перед експортом.

Автоматизація експорту

Якщо потрібно регулярно експортувати графіку з Фігми до певних форматів, це можна автоматизувати.

Існують спеціальні плагіни для таких завдань. Наприклад, Autosave чи Figma to File. Вони дозволяють налаштувати експорт за розкладом або зміни файлу.

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

Експорт із Фігми на мобільні пристрої

Існує кілька способів експорту файлів з Фігми на мобільні пристрої, такі як смартфони та планшети:

1. Використовувати хмари: Google Диск, Dropbox і т.д. Експортувати туди з Фігми, а потім завантажити на мобільний пристрій.
2. Підключити мобільний пристрій до комп'ютера та скопіювати файли безпосередньо.
3. Надіслати файли по email та відкрити вкладення на смартфоні.
4. Скористайтеся сервісами для обміну файлами на кшталт WeTransfer.

Головна перевага таких способів – універсальність. Вони дозволяють експортувати з Фігми будь-які файли та відкривати їх на будь-яких мобільних пристроях.

Посібник з роботи із зображеннями у Figma

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

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

Через меню

Це може здатися очевидним, але, щоб почати працювати із зображеннями у Figma, вам потрібно спочатку імпортувати їх у свій файл дизайну. Ви можете зробити це з меню, перейшовши в File, потім натисніть Place Image. Ви також можете знайти цю ж опцію в нижній частині списку Shape Tools або натиснувши зручну комбінацію клавіш Shift + Command + K. Потім відкриється файловий браузер, що дозволяє вибрати кілька зображень. Звідси ми не просто кидаємо їх абияк на полотно. Натомість Figma дозволяє вам додавати їх по одному, натискаючи або перетягуючи. Це дає вам набагато більший контроль над розміщенням та навіть розміром зображень при імпорті. Це може здатися простою річчю, але насправді вона досить потужна, особливо якщо врахувати, як обробляються зображення у Figma. Дозвольте мені швидко пояснити чому. У Figma ми не розглядаємо зображення як окремий тип об'єкта, натомість ми розглядаємо їх як заливку. Коли ви імпортуєте зображення, ми створюємо прямокутник з такими ж розмірами * і застосовуємо до нього заливку зображення. Якщо ви знайомі з CSS, подумайте про це як про встановлення зображення у властивості background елемента div. Це значно спрощує обрізання, зміну розміру та заміну зображення в процесі роботи над дизайном. Отже, повернемось до імпорту. Як я вже сказав, коли ви використовуєте метод Place Image, ви маєте можливість додати кілька зображень по одному.Круто те, що оскільки зображення обробляються як заливка, ви можете використовувати цей метод для додавання вибраних зображень до вже існуючих фігур. Один із варіантів використання цього – швидке додавання зображень профілю до трьох різних дизайнів (круг, квадрат та прямокутник із закругленими кутами), які ви хочете перевірити.

За допомогою перетягування

Другий спосіб імпорту – перетягування. З вашого робочого стола або папки на комп'ютері ви можете просто перетягнути одне або кілька зображень у Figma. За допомогою цього методу ми розміщуємо їх на полотні рівними рядами по десять. Ви можете швидко скористатися нашими новими функціями Smart Selection. Просто виберіть всі зображення, які ви імпортували, а потім налаштуйте інтервал. Або якщо ви хочете стати по-справжньому модним, ви можете швидко створити сітку, а потім поміняти їх місцями, як у справжньому фотофіді. Бажаєте більше дізнатися про Smart Selections? Ознайомтеся з нашою довідкою та статтею у блозі Ці два методи імпорту – імпорт за допомогою place image або перетягування – є надзвичайно універсальними, але вони вимагають, щоб у вас вже були зображення, завантажені на ваш комп'ютер. Отже, що, якщо ви хочете швидко перевірити купу ідей, не займаючи дорогоцінного місця на жорсткому диску? Не турбуйтеся, Figma допоможе вам.

За допомогою методу копіювати + вставити

Третій спосіб імпортувати зображення – це просто скопіювати їх та вставити в документ. Коли ви знайшли ідеальне зображення в Інтернеті, просто клацніть правою кнопкою миші на зображенні і виберіть «Копіювати». (Це має працювати у будь-якому браузері). Повернувшись до Figma, можна вставити скопійоване зображення у ваш файл.Хоча цей метод працює тільки з одним зображенням за раз, це швидкий спосіб випробувати купу ідей плюс не потрібно зберігати зображення на жорсткому диску.

Маніпулювання зображеннями у Figma

Тепер, коли у вас є зображення Figma, ви можете редагувати їх за своїм бажанням. Незважаючи на те, що ми не стверджуємо, що Figma є інструментом редагування фотографій, ми надаємо можливість зробити кілька швидких змін, таких як налаштування експозиції або контрасту. За замовчуванням зображення налаштовані так, щоб заповнити будь-яку фігуру, але ми надаємо повний контроль над цим. Якщо ви натиснете параметр заливки на панелі властивостей, ви побачите спливаюче вікно. У верхній частині цього вікна ви знайдете невеликий список, що випадає, який дозволяє перемикатися між Fill, Fit, Crop і Tile.

Fill

Fit

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

Crop

Tile

Поради та прийоми

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

Швидке кадрування (Quick Crop)

Чи потрібно швидко обрізати зображення? Виберіть шар зображення, а потім натисніть кнопку кадрування на верхній панелі інструментів.Або, якщо ви є шанувальником поєднань клавіш (що і повинно бути), просто натисніть і утримуйте клавішу option і двічі клацніть на зображенні, щоб відкрити налаштування кадрування.

Зображення як стилі

Чи знаєте ви, що ви можете створити стиль зі свого зображення, а потім опублікувати його у вашій командній бібліотеці? Для цього просто виберіть зображення, натисніть кнопку «Створити стиль» та дайте йому ім'я. Звідси ви можете або зберегти стиль локально для файлу, в якому ви працюєте, або опублікувати його у бібліотеці.

Шари заливки та режими накладання

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

Копіювання шарів заливання

Одна хитрість, яку я виявив у Figma, яка заощадила мені багато часу, полягає в тому, що ви можете копіювати і вставляти шари заливки (це також відноситься і до шарів Stroke і Effect). Продовжуючи наведений вище приклад, це дозволяє швидко взяти цей чорно-білий шар заливки і застосувати його до додаткових зображень за допомогою поєднання клавіш command+c і command+v.

Зображення як контур

Хоча може бути не так багато варіантів використання зображення як контур, корисно знати, що Figma підтримує це. J Як я вже казав, зображення є важливою частиною процесу проектування. Незалежно від того, чи працюєте ви з ними щодня або тільки коли вам потрібно оновити аватар у Twitter, ви не можете їх ігнорувати. Отже, від пошуку кращого методу імпорту для прискорення процесу проектування з використанням стилів зображень, сподіваюся, цей посібник був корисним. Чи є якісь додаткові поради та рекомендації, які я, можливо, упустив? Обов'язково дайте мені знати у Twitter! * Зверніть увагу, що роздільна здатність зображень, розмір яких перевищує 4000 пікселів, буде зменшено для забезпечення продуктивності. * Всі зображення в цьому посібнику взяті з unsplash.com та diverseui.com. Переклад статті Josh Dunsterville

ЯК У ФІГМІ ЕКСПОРТУВАТИ ВСЕ 1М ФАЙЛОМ

Для експорту всіх артбордів в один файл Figma потрібно зберегти їх як сторінку.

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

Потім потрібно натиснути кнопку "Експорт", вибрати потрібний формат, наприклад, PNG, SVG, JPG і налаштувати потрібні параметри.

Після цього Figma створить та завантажить zip-архів, що містить усі вибрані артборди в одному файлі.

Тепер можна завантажити цей файл та використовувати у своїх проектах.

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

#24 Figma Tutorial: Importing & Exporting. Як правильно експортувати та зберігати файли у Фігмі.

ФІГМА ЯК ЕКСПОРТУВАТИ ШАРИ В ОДИН ФАЙЛ PDF

Як зберегти проект у Figma

FIGMA: ЯК ЗБЕРІГАТИ У PDF — Експорт презентацій, документів, проектів, фреймів - Уроки фігма

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

💡 Figma - Як експортувати зображення в один PDF-файл без втрати якості? Найпростіший спосіб

[NEW] 🔥 Панель експорту та мегакрутецький лайфхак. Урок 19

Export Multiple Pages as a Single PDF File from Figma - No plugin - Built-In Feature

Відео-урок з Figma. Як експортувати файли