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

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

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

Основные шаги экспорта изображения из Figma

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

Процесс экспорта начинается с выбора объекта. Это может быть фрейм, группа, фигура, текст или даже целая страница. После выделения объекта в правой панели свойств появляется секция Export (Экспорт). По умолчанию она может быть скрыта, поэтому, если её нет, прокрутите вниз до соответствующего блока.

Здесь вы можете добавить один или несколько профилей экспорта. Каждый профиль задаёт параметры: формат файла, масштаб и дополнительные опции. Чтобы начать, нажмите кнопку + Add. После настройки нажмите Export — и файл будет загружен на ваш компьютер.

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

Пошаговая инструкция: как сохранить изображение

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

Если вы работаете с командой, полезно заранее договориться о стандартах экспорта: какие форматы использовать, в каком масштабе и где хранить ассеты. Это ускоряет процесс и снижает количество ошибок при передаче материалов.

Форматы для сохранения: PNG, JPG, SVG, PDF — что выбрать?

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

Рассмотрим каждый формат подробнее.

Когда использовать PNG

PNG (Portable Network Graphics) — идеальный выбор для графики с прозрачным фоном. Он поддерживает альфа-канал, что позволяет сохранять мягкие тени, градиенты и полупрозрачные элементы. Файл имеет относительно большой размер, но качество остаётся высоким.

Подходит для:

• Логотипов и брендинговых элементов;
• Иконок и пиктограмм;
• UI-компонентов (кнопок, карточек);
• Экспорта макетов для демонстрации.

Когда использовать JPG

JPG (или JPEG) использует сжатие с потерями, что делает его подходящим для фотографий. Однако он не поддерживает прозрачность, а резкие границы и текст могут «плыть». Использование JPG для интерфейсов не рекомендуется.

Применяется для:

• Фотобаннеров;
• Скриншотов с реальными изображениями;
• Печатных материалов, где важен малый вес файла.

Когда использовать SVG

SVG (Scalable Vector Graphics) — векторный формат, который масштабируется без потери качества. Отлично подходит для современной вёрстки, особенно на Retina-экранах и мобильных устройствах. Размер файла может быть очень малым при простой графике.

Идеален для:

• Адаптивных интерфейсов;
• Анимированных иконок;
• Логотипов, которые будут использоваться на разных носителях.

Когда использовать PDF

PDF сохраняет векторные данные и поддерживает многостраничность. Часто используется для передачи макетов клиентам, презентаций и печатной продукции. В веб-разработке применяется реже.

Где полезен:

• Презентация проекта заказчику;
• Передача технической документации;
• Экспорт нескольких страниц сразу.

Настройки экспорта: масштаб, прозрачность, границы и срез

Помимо формата, важно правильно настроить параметры экспорта. Доступные опции зависят от выбранного формата, но есть общие настройки, влияющие на конечный результат.

Масштаб (Scale): 1x, 2x, 3x

Масштаб определяет разрешение экспортируемого изображения. Значение 1x соответствует исходному размеру, 2x — удвоенному (для Retina-экранов), 3x — утроенному.

• 1x — подходит для экранов с низким DPI, черновых вариантов;
• 2x — стандарт для большинства современных устройств (iPhone, MacBook);
• 3x — для высококачественных экранов (например, некоторых Android-устройств).

Прозрачность фона

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

Чтобы задать фон:

1. Перед экспортом создайте прямоугольник нужного цвета под элементом.
2. Сгруппируйте его с основным объектом.
3. Экспортируйте группу.

Или используйте плагины (например, «Export with Background»), которые позволяют задавать цвет фона при экспорте.

Обрезка и границы (Trim)

Figma автоматически обрезает изображение по границам выделенного объекта. Однако иногда вокруг остаётся лишнее пространство. Чтобы контролировать этот процесс:

• Убедитесь, что объект плотно вписан в фрейм;
• Используйте авто-фреймы (Auto Layout), чтобы границы подстраивались автоматически;
• Проверьте, нет ли невидимых элементов за пределами холста.

Как сохранить часть макета: фрейм, слой или группу?

Figma позволяет экспортировать не только целые страницы, но и отдельные компоненты. Правильный выбор объекта влияет на точность и удобство экспорта.

Экспорт фрейма

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

Рекомендации:

• Используйте именованные фреймы (например, «Header», «Card-Product»);
• Настройте авто-фреймы для динамических блоков;
• Не забывайте про padding и margin — они влияют на итоговый размер.

Экспорт группы

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

Совет: перед экспортом группы временно заключите её в фрейм или проверьте границы через Outline Mode (Ctrl+Alt+O).

Экспорт слоя

Отдельный слой (например, фигура или текст) можно экспортировать напрямую. Подходит для иконок, шрифтовых глифов или простых элементов.

Массовый экспорт: как быстро сохранить несколько элементов?

В крупных проектах приходится экспортировать десятки иконок, карточек или модулей. Делать это вручную — долго и утомительно. Figma предлагает несколько решений для массового экспорта.

Экспорт нескольких фреймов одновременно

Вы можете выделить несколько фреймов (удерживая Shift) и в панели экспорта добавить профиль. При экспорте Figma сохранит каждый фрейм как отдельный файл, используя имя фрейма в качестве названия файла.

Использование компонентов и вариантов

Если вы используете компоненты (Components), можно экспортировать все варианты сразу. Для этого:

• Создайте главный компонент с вариантами (например, кнопки: primary, secondary, disabled);
• Выделите инстанс компонента;
• Добавьте профиль экспорта;
• При экспорте Figma предложит сохранить все состояния.

Плагины для массового экспорта

Существуют специализированные плагины, автоматизирующие процесс:

• Batch Export — позволяет выбрать несколько слоёв и экспортировать их с заданными параметрами;
• Zeplin for Figma — интеграция с системой передачи макетов разработчикам;
• Avocode — альтернатива Zeplin с расширенными возможностями экспорта.

Типичные ошибки при экспорте и как их исправить

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

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

Проблема возникает, если в дизайне используется эффект «Multiply» или наложены тёмные слои. Решение:

• Проверьте наличие невидимых слоёв с режимом наложения;
• Убедитесь, что фоновый слой не является частью экспортируемой группы;
• Временно скройте все слои, кроме нужных, и повторите экспорт.

Текст экспортируется как картинка, а не вектор

При экспорте в SVG текст остаётся векторным, но только если он не был конвертирован в кривые. Если текст «сломался» — возможно, он был преобразован через Outline Stroke.

Совет: не используйте Outline для текста, если планируете экспортировать в SVG.

Файл слишком большого размера

Особенно актуально для PNG и PDF. Причины:

• Высокий масштаб (3x вместо 1x);
• Большое количество слоёв в одном объекте;
• Наличие вложенных групп с эффектами.

Оптимизация:

• Экспортируйте только необходимые элементы;
• Используйте 1x для черновых версий;
• Упрощайте группы перед экспортом.

Как экспортировать изображение с фоном или без него?

Частый вопрос: как сделать так, чтобы при экспорте был белый фон, а не прозрачный? Figma по умолчанию сохраняет прозрачность, но это можно изменить.

Способ 1: Добавление фона вручную

1. Создайте прямоугольник нужного цвета (например, #FFFFFF);
2. Поместите его под экспортируемый объект;
3. Сгруппируйте оба элемента;
4. Экспортируйте группу.

Способ 2: Использование плагина

Плагины вроде «Export with Background» позволяют выбрать цвет фона прямо в окне экспорта. Установите плагин, выделите объект, запустите его и укажите цвет.

Способ 3: Через страницу

Если вы экспортируете всю страницу, установите цвет фона страницы (в правой панели, в разделе Background). При экспорте страницы цвет будет сохранён.

Автоматизация экспорта: плагины и инструменты

Figma поддерживает API и сторонние плагины, которые значительно упрощают работу с ассетами. Автоматизация особенно полезна при регулярной передаче макетов разработчикам.

Популярные плагины

• Icons Generator — создаёт иконки в нескольких форматах и размерах;
• Image Exporter — расширенные настройки экспорта, включая переименование и папки;
• Figma to React — генерирует код компонентов с автоматическим экспортом изображений.

Интеграция с внешними сервисами

Через Figma API можно настроить автоматическую выгрузку ассетов в облачные хранилища (Google Drive, Dropbox) или системы управления цифровыми активами (DAM).

Пример использования:

• При каждом обновлении компонента — автоматическая перезагрузка PNG и SVG в папку для разработчиков;
• Синхронизация с Jira для прикрепления макетов к задачам.

Особенности экспорта для верстальщиков и разработчиков

Разработчики ожидают от дизайнеров не просто красивые картинки, а структурированные, правильно подготовленные ассеты. Неправильный экспорт может замедлить верстку и вызвать недопонимание.

Рекомендации для дизайнеров

• Используйте единые имена файлов (например, button-primary.svg);
• Предоставляйте ассеты в нескольких форматах (SVG + PNG 2x);
• Группируйте связанные элементы (все иконки — в одну папку);
• Добавляйте Readme с описанием компонентов.

Что любят разработчики

1. SVG для иконок и логотипов;
2. Чёткие имена без пробелов и спецсимволов;
3. Отсутствие лишних слоёв и групп;
4. Доступ к оригинальному Figma-файлу для извлечения свойств.

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

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

Заключение

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

• Всегда выбирайте формат в зависимости от цели: SVG для веба, PNG для иконок, JPG для фото.
• Контролируйте масштаб: 1x для черновиков, 2x для Retina-экранов.
• Используйте фреймы для точного выделения экспортируемой области.
• Автоматизируйте массовый экспорт с помощью плагинов.
• Согласуйте стандарты экспорта с командой разработки.