Как сохранить изображение с фигмы

Сохранить изображение с Figma можно несколькими способами: через экспорт в панели инструментов, использование команды Export, скачивание отдельных слоёв или целых страниц, а также через ссылку-экспорт. Главное — правильно выбрать формат (PNG, JPG, SVG, PDF), разрешение и настройки сжатия.

Figma — это мощный инструмент для совместной работы над дизайн-проектами, который используется миллионами дизайнеров, разработчиков и продуктовых команд по всему миру. Одна из ключевых задач при работе в Figma — это корректное извлечение графических материалов для дальнейшего использования: будь то передача верстальщику, публикация в соцсетях или вставка в презентацию. Однако новички часто сталкиваются с трудностями: где кнопка сохранения, как экспортировать с прозрачным фоном, почему картинка получается низкого качества. В этой статье мы детально разберём все способы, как сохранить изображение с Figma, избежать типичных ошибок и использовать скрытые возможности платформы.

Экспорт через панель инструментов

Наиболее простой и часто используемый способ — экспорт через правую панель свойств. После выделения любого слоя, фрейма или группы в проекте в правом боковом меню появляется блок «Export». По умолчанию он может быть скрыт, если не заданы параметры экспорта.

Чтобы начать, кликните на «+» рядом с надписью Export. Это добавит новый профиль экспорта. Вы можете создавать несколько профилей под разные нужды: например, один для веба (PNG 1x), второй для мобильных экранов (PNG 2x), третий — векторный (SVG).

После настройки формата, масштаба и имени файла достаточно нажать «Export» внизу панели. Figma предложит сохранить файл локально. При этом можно экспортировать как весь выделенный фрейм, так и отдельные вложенные элементы, если они помечены как exportable.

Для точного экспорта только нужной области используйте функцию «Slice Tool» (инструмент «Слайс»). Он позволяет обвести произвольную зону, после чего в панели появится возможность экспортировать именно этот участок, игнорируя остальное содержимое.

• Выделите объект или используйте Slice Tool для обозначения области.
• Перейдите в правую панель → раздел Export.
• Добавьте профиль экспорта, выбрав формат и масштаб.
• Нажмите «Export» и сохраните файл на компьютер.

Где найти кнопку экспорта?

Кнопка «Export» находится строго в правой панели свойств. Она активируется только при наличии хотя бы одного профиля экспорта. Если вы её не видите — значит, ни один слой не настроен на экспорт. Не путайте с кнопкой «Share» в верхнем правом углу — это генерация ссылки, а не скачивание файла.

Режимы экпорта: что выбрать?

Figma поддерживает четыре основных формата экспорта: PNG, JPG, SVG и PDF. Каждый из них имеет свои особенности и сценарии использования.

Выбор формата зависит от цели. Например, для сайта лучше использовать PNG или SVG, чтобы сохранить чёткость на всех устройствах. Для печати подойдёт PDF с высоким DPI, хотя Figma экспортирует PDF в 72 ppi по умолчанию — это важно учитывать.

Масштаб экспорта — ещё один критически важный параметр. Возможные значения: 1x, 2x, 3x, 4x. Чем выше множитель, тем больше разрешение. Например, 2x означает удвоенную ширину и высоту исходного объекта. Это нужно для Retina-экранов и других дисплеев с высокой плотностью пикселей.

Как задать кастомный размер при экспорте?

Figma не позволяет напрямую указать размер в пикселях при экспорте — масштаб работает относительно исходного размера слоя. Чтобы получить изображение нужного размера, сначала измените сам фрейм или объект до требуемых габаритов, затем экспортируйте в 1x.

Пакетный экспорт: экономия времени

Если вам нужно скачать сразу несколько элементов — например, всю иконку из набора — ручной экспорт каждого станет утомительным. Figma предлагает решение: пакетный экспорт через структуру слоёв.

Откройте левую панель слоёв (Layers Panel). Найдите группу или фрейм, содержащий нужные элементы. Убедитесь, что каждый внутренний слой помечен значком экспорта (иконка стрелки вниз в глазури слоя). Это можно сделать как вручную, так и через контекстное меню: клик правой кнопкой → «Create Export for Selection».

Затем выделите родительский фрейм и перейдите в панель экспорта. Теперь при нажатии «Export» вы увидите опцию «Include child exports». Активируйте её — и Figma автоматически соберёт все вложенные exportable-элементы в один архив .zip.

Этот метод особенно полезен для:

• Передачи компонентов разработчику;
• Подготовки медиакитов и брендбуков;
• Создания библиотек иконок и кнопок.

Автоматизация с помощью Auto Layout и компонентов

Если вы используете Auto Layout и компоненты, можно настроить единый шаблон экспорта. Например, создайте компонент «Icon», задайте ему экспорт в SVG и 1x. Все экземпляры этого компонента будут автоматически доступны для экспорта без дополнительных настроек.

Особенности экспорта SVG и PDF

Экспорт в векторные форматы требует особого внимания. SVG — идеален для веба, но имеет ограничения. Figma экспортирует SVG с поддержкой градиентов, теней и эффектов, однако некоторые браузеры могут некорректно отображать сложные стили.

Перед экспортом SVG рекомендуется:

• Упростить пути (flatten shapes);
• Избегать сложных эффектов вроде blur или noise;
• Проверить, нет ли текста, который не был переведён в кривые (в Figma текст остаётся текстом, что может вызвать проблемы шрифтов на сайте).

Для PDF ситуация аналогична. Figma экспортирует страницу или фрейм как PDF-документ с сохранением слоёв. Однако:

• PDF не поддерживает прозрачность так же гибко, как PNG или SVG;
• Анимации и интерактивные элементы теряются;
• Шрифты могут не встраиваться автоматически — убедитесь, что они доступны или заменены.

Как минимизировать размер SVG?

Figma не оптимизирует SVG «из коробки». Экспортированный файл может содержать лишние метаданные, комментарии и несжатые пути. Используйте внешние инструменты:

• SVGOMG (https://jakearchibald.github.io/svgomg/) — онлайн-редактор для минификации SVG;
• Figma-плагин «SVG Cleaner» — автоматически очищает код при экспорте.

Плагины для упрощённого экспорта

Figma поддерживает более 10 000 плагинов, многие из которых упрощают экспорт. Вот топ-3, которые стоит использовать:

1. Exporter — позволяет задавать правила экспорта для всей страницы: например, «все слои с префиксом “icon” → экспортировать в SVG 1x».
2. Batch Export+ — расширенная версия пакетного экспорта с поддержкой фильтров, переименования и выбора форматов.
3. Image Export Optimizer — сжимает PNG и JPG без потери качества, экономя до 60% места.

Установка плагина:

• Откройте панель плагинов (нижний правый угол → квадрат с плюсом);
• Найдите нужный плагин через поиск;
• Нажмите «Run» и следуйте инструкциям.

Когда использовать плагины, а когда — встроенные средства?

Встроенные инструменты Figma отлично справляются с базовым экспортом. Плагины нужны, когда:

• Требуется автоматизация (например, еженедельная выгрузка макетов);
• Нужна оптимизация файлов (сжатие, переименование);
• Работаете с большими проектами (100+ экранов).

Типичные ошибки и как их избежать

Даже опытные пользователи допускают ошибки при экспорте. Вот самые распространённые:

• Экспорт всей страницы вместо фрейма — результат: файл содержит лишние элементы и большой размер. Решение: всегда выделяйте конкретный фрейм или используйте Slice.
• Забытый масштаб 1x/2x — картинка слишком мелкая или, наоборот, огромная. Решение: проверяйте масштаб перед экспортом.
• Экспорт текста как растра — если текст не был переведён в кривые, в SVG он может отображаться с другим шрифтом. Решение: для критичных случаев конвертируйте текст в фигуры (Ctrl+Shift+O).
• Отсутствие прозрачности в JPG — попытка сохранить логотип с прозрачным фоном в JPG приведёт к белому фону. Решение: используйте PNG или SVG.

Почему изображение экспортируется с чёрным фоном?

Это происходит, если в слое есть эффекты (вроде background blur) или наложение с другими объектами. Figma экспортирует только сам слой, но не его визуальные последствия в композиции. Решение: используйте Slice Tool, чтобы захватить и фон, и объект вместе.

Экспертное мнение

Анна также отмечает, что всё чаще компании отказываются от ручного экспорта в пользу систематического подхода: использование компонентов с предустановленными export-правилами, автоматизация через плагины и интеграция с Notion или Jira для документирования ассетов.

Вопросы и ответы

Заключение

Сохранение изображений из Figma — это не просто «скачивание картинки», а часть продуманного workflow. От правильного выбора формата, масштаба и структуры слоёв зависит качество продукта, скорость разработки и восприятие клиента. Знание всех режимов экспорта, умение использовать плагины и избегать типичных ошибок делает вас не просто пользователем Figma, а профессионалом.

• Всегда экспортируйте через выделенный фрейм или Slice Tool.
• Используйте PNG для прозрачности, SVG — для вектора, JPG — для фото.
• Применяйте пакетный экспорт с архивацией в .zip для групп элементов.
• Оптимизируйте SVG и PNG с помощью плагинов или внешних инструментов.
• Создайте чек-лист экспорта для вашей команды.