Экспорт ассетов из Figma: какой формат, какой масштаб, что проверить
Экспорт кажется простым: выбрал слой, нажал плюс, выбрал PNG 2x. Проблемы начинаются, когда иконка выходит с обрезанными краями, картинка в 3 раза больше нужного, а SVG весит больше растровой версии.
Разберём настройки по порядку — от того, что именно выделено, до DPI и пакетной выгрузки.
Что вообще можно выгрузить
Документация перечисляет объекты:
- слои, фреймы, компоненты, группы и секции;
- область канваса через инструмент Slice;
- весь канвас страницы (для этого нужно снять выделение со всего).
Плюс важное условие про доступ: экспортировать может любой, у кого есть доступ на просмотр, если владелец файла не ограничил копирование и экспорт. Если раздела Export нет — попробуйте обновить страницу, а если не помогло, значит ограничение включено владельцем.
Форматы: что для чего
- PNG — иконки, интерфейсные картинки, всё, где нужна прозрачность.
- JPG — фотографии и большие фоны без прозрачности.
- SVG — векторные иконки и логотипы для веба.
- PDF — печатные макеты и документы для передачи.
Тонкость, о которой забывают: SVG и PDF в Figma экспортируются только в 1x. Множитель 2x или 3x для них не работает — если нужен крупнее, меняйте формат или масштабируйте сам объект.
Масштаб: три способа задать размер
В настройках экспорта можно указать:
- Множитель — 1x, 2x, 3x и так далее.
- Ширину — например,
512w(результат будет шириной 512 px). - Высоту — например,
512h.
Документация отдельно фиксирует базовое разрешение: по умолчанию 72 DPI. При 2x получается 144 DPI, при 3x — 216 DPI.
Практика:
- Иконка для веба — SVG, без множителя.
- Иконка, если SVG не подходит, — PNG 2x или 3x под ретину.
- Изображение в карточке —
512w, если в макете ширина плавает. - Превью для документации — 1x PNG, чтобы файл не раздувался.
Настройки SVG: что реально меняет результат
Для SVG доступны опции:
- Ignore overlapping layers — игнорировать перекрывающиеся слои;
- Include bounding box для текста;
- Include «id» — сохранять идентификаторы слоёв;
- Outline text — перевести текст в кривые;
- Simplify stroke — упростить обводки.
Как этим пользоваться:
Outline text включайте, если SVG пойдёт туда, где нет ваших шрифтов (внешний подрядчик, чужой сайт). Минус — текст перестаёт быть текстом и не индексируется.
Include «id» полезно, когда разработчик анимирует части иконки и ему нужны стабильные имена.
Simplify stroke помогает уменьшить вес, но на тонких линиях может изменить вид — проверяйте глазами, а не по размеру файла.
Ignore overlapping layers для Slice работает иначе: если опция включена, а слайс находится внутри фрейма или группы, Figma выгрузит только контент из того же контейнера, что и слайс, и визуально попавший в его границы.
Slice вместо фрейма
Slice нужен, когда ассет не совпадает с границами слоя: например, нужна часть иллюстрации или область между двумя фреймами.
Порядок:
- Инструмент Slice находится в выпадающем списке Region tools на панели.
- Обведите нужную область.
- Двигайте и меняйте размер слайса как обычный объект.
- Задайте конфигурации экспорта — так же, как для слоя.
Помните: экспортируется только контент внутри границ слайса. Если слой «наполовину снаружи», он обрежется.
Несколько конфигураций на один объект
К одному выделению можно добавить сколько угодно конфигураций: например, PNG 1x, PNG 2x и SVG одновременно. Тогда при экспорте вы получите три файла с разными расширениями и суффиксами.
Это удобно для иконок: одна кнопка «экспорт» даёт полный набор. Минус — легко забыть, что на объекте висит пять конфигураций, и получить лишние файлы.
Пакетный экспорт
Пакетная выгрузка работает по «списку экспорта» — всем выделениям, к которым применены настройки:
- Главное меню → File → Export.
- Горячие клавиши: Shift + Cmd + E на macOS, Shift + Ctrl + E на Windows.
- В модальном окне отметьте нужные ассеты.
- Для каждого видно масштаб, формат и размеры.
В окне экспорта можно снять галочки с ненужного — это быстрее, чем удалять конфигурации по одному.
Порядок действий перед выгрузкой
- Проверить, что имена слоёв осмысленные — они попадут в имена файлов.
- Убедиться, что экспортируете фрейм/компонент, а не группу с лишними отступами.
- Для векторных иконок выбрать SVG и проверить его в браузере.
- Для растровых — выставить множитель или ширину, а не «на глаз».
- Прогнать пакетный экспорт и сравнить количество файлов с ожидаемым.
- Проверить один файл из пачки: размер, прозрачность, отсутствие обрезки.
Частые ошибки
Экспорт фрейма с тенью. Тень выходит за границы фрейма и обрезается. Решение — слайс или фрейм с запасом.
2x для SVG. Не сработает: SVG только 1x.
Экспорт группы вместо компонента. В группу легко затащить лишний слой с прозрачностью 0 %, и он появится в файле.
Имя вида «Frame 427». Файл Frame 427@2x.png потом невозможно найти.
Экспорт с ограниченным доступом. Если раздел Export не виден, дело не в Figma, а в настройках файла.
FAQ
Почему SVG экспортируется только в одном размере?
Потому что Figma поддерживает экспорт SVG и PDF только в 1x. Для другого размера нужен иной формат или масштабирование самого объекта.
Что означает 512w в настройках экспорта?
Это указание ширины результата: изображение будет экспортировано шириной 512 пикселей. Аналогично 512h задаёт высоту.
Какой DPI у экспорта по умолчанию?
72 DPI. При множителе 2x — 144, при 3x — 216.
Зачем нужен Slice?
Чтобы выгрузить произвольную область канваса, а не целый слой или фрейм. Слайс получает свои настройки экспорта.
Как выгрузить сразу все ассеты?
Через File → Export (Shift+Cmd+E или Shift+Ctrl+E): в окне будут все выделения, у которых есть конфигурации экспорта.