Как экспортировать слой: по шагам
Настройки экспорта хранятся в самом слое: формат, масштаб и суффикс задаются в разделе «Экспорт» вкладки «Дизайн» и остаются в файле. После правок экран выгружается заново с теми же настройками.
Выделите слой
Выберите фрейм, слой или несколько слоёв на холсте или в панели «Слои».
Добавьте настройку экспорта
В разделе «Экспорт» вкладки «Дизайн» нажмите «+» и выберите формат — PNG, JPG, WEBP, SVG или PDF — и масштаб. Настроек у слоя может быть несколько, например 1× и 2× с суффиксом «@2x».
Скачайте файлы
Нажмите кнопку экспорта в том же разделе. Несколько файлов скачаются одним ZIP-архивом.
Чтобы выгрузить всё сразу, откройте «Экспорт…» (⇧⌘E): диалог покажет все слои страницы, у которых есть настройки экспорта, и вы отметите нужные. «Экспортировать выделение…» делает то же для выделенных слоёв; слой без настроек выгрузится в PNG 1×.
- ⇧⌘E
- Экспорт…
- ⇧⌘C
- Копировать как PNG
- S
- Фрагмент (нарезка)
Форматы и масштабы: что выбрать
Готовые масштабы для PNG, JPG и WEBP: 0,5×, 0,75×, 1×, 1,5×, 2×, 3×, 4×, а также 512w и 512h — 512 px по ширине или по высоте. Вручную масштаб задаётся от 0,01× до 32× или по ширине и высоте до 16 384 px. Суффикс вида «@2x» добавляется к имени файла.
| Формат | Масштаб | Что внутри файла | Для чего обычно берут |
|---|---|---|---|
| PNG | От 0,01× до 32× | Растр без потерь, поддерживает прозрачность | Иконки, картинки интерфейса, экраны для показа |
| JPG | От 0,01× до 32× | Растр со сжатием, без прозрачности | Фотографии, обложки, посты |
| WEBP | От 0,01× до 32× | Растр со сжатием, поддерживает прозрачность | Картинки для сайта |
| SVG | Без масштаба | Векторы; картинки встроены, текст остаётся текстом | Иконки, логотипы, иллюстрации |
| Без масштаба, 1 px = 1 pt | Векторные страницы, по одной на слой, до 50 страниц | Презентации и документы |
Какой масштаб нужен для экранов @2x и @3x, разобрано в гайде размеры экранов для дизайна.
Векторный PDF: текст, шрифты и страницы
Векторный PDF — это страницы с настоящим текстом, а не картинка макета. Каждый слой получает свою страницу, 1 px соответствует 1 pt, поэтому фрейм 595×842 выходит ровно в размер A4.
Если формат PDF стоит у нескольких фреймов, они соберутся в один многостраничный файл. Страницы идут в порядке чтения: по рядам сверху вниз, в ряду — слева направо.
- Текст выделяется и ищется, шрифты встроены, кириллица работает.
- До 50 страниц в одном файле.
- Тени и «Размытие слоя» превращаются в растр 300 dpi.
- Цвета только в sRGB.
Если сервер не может собрать векторный PDF, включается запасной формат «PDF (растровый)». Какие шрифты есть в каталоге, смотрите на странице шрифты с кириллицей.
SVG: векторы, текст и id слоёв
SVG сохраняется без масштаба: это вектор. Картинки встраиваются прямо в файл, а текст остаётся текстом — в кривые он не переводится, и отдельной команды для этого в Morfa нет.
Опция «Добавить id слоёв» записывает названия слоёв в SVG как id. По ним проще найти нужный элемент в коде или стилях.
В обратную сторону тоже работает: SVG, вставленный или перетащенный в макет, становится слоями, а не картинкой. Подробнее — на странице векторный редактор.
Нарезка макета: фрагменты для экспорта
Фрагмент (slice) — прямоугольная область для экспорта. Инструмент «Фрагмент» включается клавишей S: нарисуйте его поверх нужной части экрана и задайте формат и масштаб в разделе «Экспорт», как обычному слою.
Фрагмент выгружает всё, что видно под ним на странице, обрезанное по его границам. Так можно забрать иконку вместе с подложкой или кусок экрана, не группируя слои. Фрагменты из Figma сохраняются при переносе файла из Figma.
Копирование в буфер обмена без файла
Когда отдельный файл не нужен, слой можно скопировать через «Копировать как»: «…PNG» (⇧⌘C), «…SVG», «…CSS» или «…текст». Так удобно вставить картинку в мессенджер или забрать стили в код.
Всё, что нужно для вёрстки, — размеры, токены, ассеты и React-компонент — собрано в режиме «Код». О нём — на странице дизайн в код.
Чего экспорт пока не умеет
Эти ограничения стоит знать до того, как отправлять файлы в печать или разработку.
- Экспорта в GIF, MP4 и Lottie, а также анимаций.
- CMYK и PDF/X: только sRGB.
- Перевода текста в кривые ни в SVG, ни отдельной командой.
- «Размытия фона» в PDF и SVG.
- Встраивания шрифтов с компьютера в PDF.
- Точной передачи углового градиента в PDF: он передаётся приближённо.