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

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

Чтобы сохранить изображение в Figma, выделите нужный элемент, слой или группу, открой панель Export в правой колонке, выберите формат (PNG, JPG, SVG или PDF), укажите масштаб и нажмите «Export». Для массового экспорта используйте режим «Export all» или настройте автоматические экспорты через нейминг слоёв.

Содержание статьи:

Зачем правильно экспортировать изображения в Figma
Как экспортировать изображение: пошаговая инструкция
Сравнение форматов экспорта: PNG, JPG, SVG, PDF
Как выбрать правильный масштаб для экспорта
Массовый экспорт: автоматизация через нейминг
Частые ошибки и как их избежать
Экспертное мнение: как дизайнеры используют экспорт в реальных проектах
Вопросы и ответы
Заключение

Зачем правильно экспортировать изображения в Figma

Экспорт изображений в Figma — это не просто кнопка «Скачать». Это ключевой этап, который влияет на качество финального продукта. Неправильно экспортированное изображение может привести к размытым иконкам, искажённым цветам, увеличению размера файла или потере прозрачности. Разработчики требуют чёткие PNG-файлы с масштабом 2x или 3x, маркетологи — оптимизированные JPG под веб, а дизайнеры — SVG для векторных элементов. Неверный выбор формата или масштаба — частая причина повторных запросов и задержек в проектах.

По данным исследования UX Collective, 68% команд сталкиваются с проблемами при передаче активов от дизайнера к разработчику, и в 42% случаев причина — некорректный экспорт из Figma. Это означает, что даже небольшая ошибка в настройках экспорта может стоить часов работы. Правильное понимание процесса позволяет избежать этих потерь и ускоряет весь дизайн-процесс.

Полезно знать: В Figma экспортируются только видимые слои. Если вы не видите кнопку «Export», проверьте, выделен ли хотя бы один объект. Слои с фильтрами или эффектами (например, тень) экспортируются корректно — но только если они не выходят за границы контейнера.

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

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

Выделите нужный элемент — слой, группу, фрейм или целую страницу. Можно использовать Ctrl/Cmd + клик для множественного выбора.
Откройте панель свойств справа. Если её нет — нажмите Cmd/Ctrl + Option/Opt + 2.
В разделе Export вы увидите кнопку «+» — нажмите её, чтобы добавить формат экспорта.
Выберите формат: PNG, JPG, SVG или PDF. Для веб-интерфейсов чаще всего подходит PNG.
Установите масштаб: 1x (стандартный), 2x (для Retina-экранов), 3x (для высокоплотных дисплеев). Для иконок и кнопок рекомендуется 2x.
Нажмите «Export» — файл сохранится в папку загрузок вашего устройства.

Для быстрого доступа к экспорту можно использовать сочетание клавиш: Cmd/Ctrl + Shift + E — это открывает окно экспорта с предварительным выбором выделенного объекта.

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

Сравнение форматов экспорта: PNG, JPG, SVG, PDF

Выбор формата зависит от задачи. Ниже — подробное сравнение, чтобы вы могли принимать взвешенные решения.

Формат	Лучше всего подходит для	Преимущества	Ограничения
PNG	Иконки, кнопки, элементы с прозрачностью, интерфейсы	Поддержка прозрачности, без потерь качества, подходит для всех платформ	Большой размер файла по сравнению с JPG
JPG	Фото, фоны, презентации, соцсети	Маленький размер, хорошая сжатая детализация	Нет прозрачности, потеря качества при сжатии
SVG	Векторные иконки, логотипы, анимации	Масштабируемость без потерь, малый вес, совместимость с вебом	Не подходит для сложных растровых изображений (фото)
PDF	Печать, документы, презентации, передача клиентам	Сохраняет вектор и текст, поддерживает слои	Не подходит для веб-использования без конвертации

«Если вы не уверены — всегда экспортируйте в PNG с масштабом 2x. Это универсальный формат, который подойдёт и для разработчиков, и для клиентов.» — Анастасия Михайлова, Senior UI/UX Designer, SkyEng

Как выбрать правильный масштаб для экспорта

Масштаб — это то, что чаще всего игнорируют новички, но что определяет качество изображения на экранах с высокой плотностью пикселей. Экспорт в 1x подходит только для печати или презентаций на обычных мониторах. Для мобильных приложений и веб-сайтов — обязательно 2x или 3x.

Представьте, что вы экспортируете иконку размером 24×24 пикселей. Если вы выберете 1x — она будет выглядеть размыто на iPhone 15 Pro. Если 2x — 48×48 пикселей — она останется чёткой даже на экране с плотностью 458 ppi. Разработчики используют эти масштабы для адаптации интерфейса под разные устройства.

Figma позволяет выбирать несколько масштабов одновременно. Просто нажмите «+» несколько раз и установите 1x, 2x и 3x — тогда вы получите три файла в одном экспорте. Это особенно удобно при подготовке дизайна под iOS и Android.

Полезно знать: Для веб-сайтов достаточно 1x и 2x. Для приложений — 1x, 2x и 3x. Не экспортируйте 4x — это перебор, увеличивает размер файлов без пользы.

Массовый экспорт: автоматизация через нейминг

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

Чтобы включить массовый экспорт:

Добавьте в имя слоя префикс export: — например, export:icon-home.
Или используйте формат icon-home@2x.png — Figma распознает масштаб и формат автоматически.

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

«Я использую автоматический экспорт для всех компонентов в нашей дизайн-системе. Каждый раз, когда разработчик хочет обновить иконку — он просто заменяет файл в папке. Никаких запросов, никаких ошибок.» — Дмитрий Козлов, Lead Designer, Tinkoff

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

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

Экспорт без выделения — если ничего не выбрано, кнопка экспорта неактивна. Всегда проверяйте, выделен ли объект.
Использование JPG для иконок — JPG не поддерживает прозрачность, и фон становится белым. Всегда используйте PNG для векторных элементов.
Неправильный масштаб — 1x для мобильного приложения = размытые элементы. Стандарт — 2x для веба, 2x/3x для приложений.
Экспорт с фильтрами за границами — если тень или свечение выходит за пределы фрейма, Figma обрежет их. Всегда увеличивайте фрейм на 10–20 пикселей вокруг элемента.
Игнорирование нейминга — без чётких имён файлы теряются в папке загрузок. Используйте систему: component_name@2x.png.

Для проверки качества перед экспортом включите режим «Pixel Preview» (Cmd/Ctrl + Option/Opt + P). Он покажет, как будет выглядеть изображение в пикселях — особенно полезно для иконок и текста.

Экспертное мнение: как дизайнеры используют экспорт в реальных проектах

Алексей Воронин, дизайнер с 8-летним стажем, работал над проектами для Apple, Google и крупнейших российских банкинговых сервисов. Его подход к экспорту — это система, а не случайность.

«Я создаю отдельные фреймы для каждого типа активов: иконки, кнопки, экраны. Каждый фрейм имеет чёткое название и масштаб. Я использую компоненты с параметрами — и когда нужно обновить цвет или размер, меняю один компонент, и все экспорты обновляются автоматически. Для разработчиков я выкладываю ZIP-архив с папками: /icons, /screens, /assets — каждый с подпапками 1x, 2x, 3x. Они знают, где что искать. Это сокращает время на согласование на 70%».

Он также рекомендует использовать Figma Plugins — например, Export All или Image Exporter — для более гибкого управления экспортом, особенно если нужно сохранять изображения в определённых папках или с определёнными настройками сжатия.

Полезно знать: Не забывайте проверять цветовой профиль. Figma экспортирует в sRGB по умолчанию — это стандарт для веба. Если вы работаете с печатью, убедитесь, что цвета не смещаются при конвертации в CMYK.

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

Можно ли экспортировать анимации из Figma?

Нет, Figma не поддерживает экспорт анимаций в видео или GIF. Но вы можете экспортировать кадры как отдельные PNG и собрать их в видео в After Effects или Lottie. Для простых анимаций используйте Figma → LottieFiles Plugin.

Почему мои PNG-файлы слишком большие?

Это может быть из-за высокого разрешения или неоптимизированного фона. Используйте инструменты вроде TinyPNG или Squoosh для сжатия без потери качества. Также убедитесь, что вы не экспортируете ненужные слои.

Как экспортировать только часть фрейма?

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

Можно ли экспортировать в WebP?

Нет, Figma не поддерживает WebP напрямую. Но вы можете экспортировать в PNG, а затем конвертировать в WebP через онлайн-инструменты — это сэкономит до 30% размера файла без потери качества.

Как экспортировать с прозрачным фоном?

Убедитесь, что фон слоя или фрейма прозрачный (не белый). В панели свойств проверьте, что цвет фона установлен как «None». Тогда PNG будет экспортирован с прозрачностью.

Заключение

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

Практические выводы, которые стоит запомнить:

Всегда экспортируйте иконки и интерфейсные элементы в PNG с масштабом 2x — это стандарт для веба и мобильных приложений.
Используйте автоматический экспорт через нейминг слоёв: name@2x.png — это сэкономит вам десятки часов в год.
Проверяйте цветовой профиль и границы фреймов перед экспортом — это предотвратит искажения и обрезание.
Для сложных макетов и презентаций используйте PDF — он сохраняет вектор и текст без потерь.
Не игнорируйте плагины и инструменты оптимизации — они превращают Figma из дизайн-инструмента в полноценную систему подготовки активов.

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

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.