Как сохранить макет из Figma в PDF без потери качества
Чтобы экспортировать макет из Figma в PDF, выделите нужный фрейм, в панели Export справа выберите формат PDF и нажмите кнопку экспорта. Для улучшения качества измените настройку Quality с Medium на High, а для сложных изображений включите режим ресемплинга Detailed. Важно помнить: Figma сохраняет текст как кривые (glyphs), поэтому он не будет редактируемым в итоговом файле, но сохранит визуальную точность шрифта.
Пошаговая инструкция по экспорту
Процесс сохранения дизайна в PDF интуитивен, но имеет нюансы, влияющие на результат.
- Подготовка фреймов. Убедитесь, что все элементы, которые должны попасть в документ, находятся внутри одного или нескольких фреймов. Если нужно собрать многостраничный PDF, расположите фреймы в нужном порядке слева направо или сверху вниз — Figma сохраняет их последовательность.
- Выбор объекта. Кликните по фрейму или группе объектов на холсте. Можно выбрать несколько фреймов одновременно через Shift.
- Настройка экспорта. В правой панели найдите раздел Export. Нажмите
+, выберите формат PDF. - Генерация файла. Нажмите кнопку Export [Имя фрейма]. Файл скачается в папку загрузок браузера.
Переименуйте фреймы перед экспортом (например, «Cover», «Page_1», «Contacts»). Имена фреймов часто используются как названия страниц или файлов, что упрощает навигацию в итоговом документе.
Настройки качества и детализации
По умолчанию Figma использует средние настройки сжатия, чтобы уменьшить вес файла. Для презентаций этого достаточно, но для печати или портфолио требуется максимальная четкость.
Quality (Качество)
В настройках экспорта PDF доступен выбор уровня качества:
- Medium (Среднее): Оптимально для быстрой отправки макета на согласование, просмотра на экране и черновых версий. Файл весит меньше.
- High (Высокое): Используйте для финальных презентаций, отправки клиенту или если в макете много мелких деталей, тонких линий и сложных градиентов.
Image Resampling (Ресемплинг изображений)
Эта настройка влияет на то, как растровые картинки (фотографии, мокапы) встраиваются в PDF.
- Basic: Подходит для интерфейсов с простой графикой, иконками и плашками. Может давать «лесенки» на фотографиях.
- Detailed: Сохраняет максимум деталей растровых изображений. Обязательно включайте этот режим, если в дизайне есть фотографии или сложные текстуры.
| Сценарий использования | Quality | Resampling |
|---|---|---|
| Черновик для команды | Medium | Basic |
| Презентация клиенту (экран) | High | Basic |
| Макет с фотографиями | High | Detailed |
| Подготовка к печати (цифровой) | High | Detailed |
Figma экспортирует PDF только в масштабе 1x. Если ваш макет создан в масштабе 2x (для Retina), при экспорте в PDF он может оказаться слишком большим физически или, наоборот, размытым, если пытаться менять размер постфактум. Лучше сразу проектировать макет в реальном размере (1x) для печатных материалов.
Особенности работы со шрифтами в PDF
Главное ограничение экспорта в PDF из Figma — текст не остается редактируемым.
Как это работает
Figma конвертирует текстовые слои в глифы (glyphs) или векторные контуры.
- Плюс: Визуально текст выглядит идентично макету. Никаких замен шрифтов, «поехавшего» кернинга или изменений межстрочного интервала при открытии на другом компьютере.
- Минус: Вы не сможете выделить текст курсором, скопировать его или исправить опечатку в Adobe Acrobat или другом PDF-ридере. Это не полноценный текстовый слой.
Встраивание шрифтов
В Figma нет функции классического «встраивания» (embedding) шрифтов, как в Adobe InDesign. Поскольку текст превращается в векторную графику, файл не содержит самих файлов шрифтов (.otf/.ttf). Это значит, что файл будет весить меньше, и вам не нужно беспокоиться о лицензиях на шрифты при передаче PDF — получатель увидит картинку, а не шрифт.
Если вам критически важно, чтобы текст можно было выделять и копировать (например, для доступности или SEO-оптимизации документа), Figma не подходит. В таком случае используйте связку Figma → SVG → Illustrator → PDF или готовьте макет в специализированных верстальных программах.
Частые ошибки при экспорте
- Экспорт лишних элементов. Если рядом с основным фреймом на холсте лежат забытые варианты кнопок или заметки, они могут попасть в PDF, если случайно окажутся в зоне выделения. Всегда проверяйте границы экспортируемого фрейма.
- Ожидание редактируемости. Клиенты часто просят «поправить текст в PDF». Объясняйте заранее, что PDF из Figma — это цифровой оттиск, правки вносятся только в исходный файл .fig.
- Игнориров проверки цветов. RGB-цвета на экране и при печати (CMYK) отличаются. Figma работает в RGB. Если PDF идет в типографию, будьте готовы к тому, что яркие неоновые цвета станут тусклее. Конвертацию в CMYK нужно делать в сторонних сервисах или Adobe Acrobat Pro.
- Размытые изображения. Если фото в макете выглядит четко, а в PDF — пикселит, проверьте исходное разрешение картинки. Возможно, она была растянута больше своего оригинального размера.
Чек-лист перед отправкой PDF
Пройдитесь по этому списку перед финальным экспортом:
- [ ] Порядок страниц: Фреймы расположены на холсте в правильной последовательности.
- [ ] Орфография: Текст проверен на опечатки (после экспорта исправить нельзя).
- [ ] Вылеты и поля: Если макет под печать, добавлены технические поля (bleeds) и отступы от края.
- [ ] Качество: В настройках экспорта выбрано High и Detailed (если есть фото).
- [ ] Тестовый просмотр: Файл открыт в стандартном просмотрщике (Preview, Chrome, Acrobat) и проверен на целостность верстки.
- [ ] Вес файла: Если файл весит сотни мегабайт, попробуйте снизить качество изображений внутри Figma или использовать онлайн-компрессоры PDF после экспорта.
FAQ
Можно ли сделать многостраничный PDF из разных файлов Figma? Нет, нативно Figma экспортирует только выбранные фреймы из текущего файла. Чтобы объединить страницы из разных проектов, нужно либо скопировать фреймы в один файл, либо合并 (объединить) готовые PDF-файлы через сторонние сервисы (например, ILovePDF или Adobe Acrobat).
Почему PDF весит так много? Чаще всего причина в тяжелых растровых изображениях (фотографиях высокого разрешения), вставленных в макет. Figma включает их в PDF в полном объеме. Попробуйте уменьшить размер картинок перед вставкой или использовать плагины для оптимизации изображений внутри Figma.
Сохраняются ли интерактивные элементы (ссылки, прототип)? Нет. Экспорт в PDF создает статичный документ. Все ссылки, кнопки и переходы между экранами работать не будут. Для интерактивных презентаций используйте режим Prototype и ссылку на просмотр в браузере.