Как в фигме сохранить картинку

Фигма — мощный инструмент для дизайна интерфейсов, прототипирования и коллаборации. Одной из ключевых задач при работе в ней является экспорт готовых элементов, особенно изображений. Независимо от того, работаете ли вы над логотипом, баннером или компонентом интерфейса, важно знать, как правильно сохранить картинку с нужным качеством, форматом и размером. Процесс может показаться простым, но множество настроек экспорта и различий между типами объектов часто вызывает путаницу даже у опытных пользователей.

Основные методы экспорта картинок

В Figma существует несколько способов сохранить изображение, и выбор зависит от типа объекта, цели использования и требований к качеству. Основной принцип один: каждый слой, фрейм или группа может быть настроен на экспорт. Для этого используется панель свойств справа, где находится блок «Export».

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

Каждый профиль позволяет указать формат, масштаб и имя файла. Можно добавить несколько профилей одновременно — например, экспортировать один и тот же элемент в PNG 1x и 2x сразу. Это удобно для подготовки ресурсов под разные экраны.

Пошаговый алгоритм экспорта

1. Выделите нужный слой, фрейм или группу в рабочей области.
2. Перейдите в правую панель и найдите блок «Export».
3. Нажмите «+», чтобы добавить параметры экспорта.
4. Выберите формат: PNG, JPG, SVG или PDF.
5. Укажите масштаб: 1x, 2x или 3x (или кастомное значение).
6. При необходимости измените имя файла (по умолчанию — имя слоя).
7. Нажмите «Export» и выберите место для сохранения на компьютере.

Если вы работаете с артбордом, экспортируется только его содержимое. При экспорте группы — все элементы внутри неё, включая невидимые, если они не скрыты явно. Также можно использовать сочетание клавиш Ctrl+Shift+E (Cmd+Shift+E на Mac), чтобы быстро открыть окно экспорта.

Форматы для сохранения картинок: PNG, JPG, SVG, PDF

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

PNG — лучший выбор для графики с прозрачным фоном, иконок, логотипов и элементов интерфейса. Это растровый формат с потерями, поддерживающий альфа-канал. Подходит для веба и мобильных приложений.

JPG — оптимален для фотографий и изображений с плавными градиентами. Занимает меньше места, но не поддерживает прозрачность. Используйте его, когда важен размер файла, а фон всегда будет однотонным.

SVG — векторный формат, идеален для адаптивного дизайна. Сохраняет чёткость при любом масштабировании, поддерживает анимацию и стилизацию через CSS. Подходит для иконок, логотипов и интерактивных элементов на сайте.

PDF — универсальный формат для печати и обмена документами. Позволяет сохранить несколько страниц, слоёв и векторную графику. Часто используется для презентаций дизайна заказчикам.

Настройка параметров экспорта: масштаб, качество, фон

Figma позволяет гибко настраивать процесс экспорта. Помимо формата, ключевыми параметрами являются масштаб (resolution) и имя файла. Масштаб определяет плотность пикселей: 1x — стандартное разрешение, 2x — вдвое больше пикселей по каждой оси, 3x — для Retina-экранов.

При экспорте в JPG можно регулировать качество сжатия. Хотя в интерфейсе Figma нет ползунка, качество автоматически оптимизируется под 80–90%, что обеспечивает хороший баланс между размером и чёткостью. Для точной настройки рекомендуется использовать внешние инструменты после экспорта.

Цвет фона при экспорте PNG и JPG определяется контекстом. Если элемент находится на белом артборде, но имеет прозрачный фон, в итоговом файле фон будет прозрачным — при условии, что в настройках экспорта не указан иной режим. Убедитесь, что включена опция «Transparent background» (это поведение по умолчанию).

Как задать кастомный масштаб

• Figma поддерживает кастомные значения масштаба. Например, введите «1.5x» для промежуточного разрешения.
• Это полезно при работе с нестандартными устройствами или специфичными требованиями разработчиков.
• Кастомный масштаб особенно актуален при создании спрайтов или ассетов для игр.

Сохранение частей дизайна и целого артборда

Иногда нужно экспортировать не весь артборд, а только его фрагмент. Figma предлагает два пути: выделение части слоёв или создание временного фрейма. Последний метод предпочтительнее, так как он даёт точный контроль над границами.

Чтобы экспортировать часть дизайна:

• Создайте новый фрейм (Frame) поверх нужной области.
• Настройте его размеры точно под элемент.
• Добавьте параметры экспорта и скачайте.

Этот подход гарантирует, что в файл попадёт только то, что нужно, без лишних отступов или обрезанных краёв. Альтернатива — использовать маску (mask), но она менее надёжна при экспорте.

При экспорте всего артборда достаточно выделить его в слоях или кликнуть по нему в рабочей области. Все видимые элементы будут включены. Если артборд содержит скрытые слои — они игнорируются.

Работа со сложными объектами: группы, фигуры, текст

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

Текст при экспорте в PNG или JPG преобразуется в пиксели. В SVG он остаётся векторным, но может терять шрифтовые особенности, если шрифт не встроен. Рекомендуется конвертировать текст в кривые (Outline Stroke) перед экспортом в SVG, если важна точность отображения.

Фигуры, особенно с эффектами (тенями, размытием), экспортируются корректно, но могут увеличивать размер файла. Сложные тени и blur лучше тестировать на разных устройствах.

Автоматический экспорт через плагины

Для массового экспорта ассетов Figma предлагает плагины. Самые популярные — Content Repeater, Batch Export, Zeplin for Figma и Avocode. Они позволяют экспортировать десятки элементов за один клик, назначать правила именования и форматов.

Например, плагин Batch Export:

• Позволяет выбрать несколько фреймов или компонентов.
• Назначает единые настройки экспорта (формат, масштаб).
• Автоматически генерирует имена на основе имён слоёв.
• Сохраняет всё в одну папку.

Это особенно полезно при подготовке дизайн-системы, иконок или библиотек компонентов. Автоматизация экономит часы рутинной работы.

Частые ошибки и как их избежать

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

• Забытый фон под прозрачным элементом. Перед экспортом проверьте, нет ли скрытого прямоугольника под логотипом или иконкой.
• Неправильный масштаб. Экспорт в 1x вместо 2x приводит к размытости на современных экранах.
• Обрезка краёв. Происходит, если фрейм слишком мал. Всегда оставляйте небольшой отступ для теней и эффектов.
• SVG с неподдерживаемыми эффектами. Размытие и некоторые градиенты не всегда корректно отображаются в браузерах.
• Несоответствие имён файлов. Используйте понятные имена, избегайте пробелов и кириллицы в названиях.

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

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

— Елена Смирнова, руководитель дизайн-студии «PixelFlow», 12 лет в UX/UI

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

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

Заключение

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

• Всегда проверяйте наличие прозрачного фона при экспорте PNG и SVG.
• Используйте масштаб 2x или 3x для ретина-экранов.
• Для массового экспорта применяйте проверенные плагины.
• Тестируйте SVG в браузерах перед использованием на сайте.
• Соблюдайте единые правила именования файлов.