Как экспортировать фреймы в пдф в фигме

Вы экспортируете дизайн-макеты из Figma в PDF для клиентов, разработчиков или печати — и сталкиваетесь с проблемами: искажённые шрифты, смещённые слои, несоответствие цветов, лишние пустые страницы или невозможность экспортировать несколько фреймов за раз? Эта проблема знакома каждому UI/UX-дизайнеру, который работает в команде или с внешними заказчиками. Решение существует — и оно простое, если знать правильную последовательность действий, настройки экспорта и скрытые возможности Figma.

Зачем экспортировать фреймы в PDF из Figma

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

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

Также PDF позволяет включать аннотации, комментарии и гиперссылки — полезно при согласовании версий. Если вы работаете в команде, где есть не-дизайнеры (маркетологи, менеджеры, заказчики), PDF — это самый безопасный формат для демонстрации конечного результата.

Пошаговая инструкция: как экспортировать фреймы в PDF

Экспорт в PDF в Figma — процесс, который занимает менее 30 секунд, если вы знаете, где искать нужные настройки. Ниже — точная последовательность действий.

1. Откройте проект в Figma и перейдите на вкладку с нужным фреймом (или несколькими фреймами).
2. Выделите один или несколько фреймов, кликнув по ним. Для множественного выделения удерживайте Ctrl (Windows) или Cmd (Mac).
3. В правой панели найдите раздел Export (Экспорт). Он появляется только при выделении объектов.
4. Нажмите кнопку + рядом с форматами экспорта.
5. Выберите формат PDF из списка.
6. Убедитесь, что включена опция All layers (Все слои) — это гарантирует, что не будут пропущены фоновые элементы или скрытые слои.
7. Установите масштаб: для печати — 100%, для экрана — 72 DPI. Не используйте “Auto” — это может привести к неожиданным результатам.
8. Нажмите Export — файл скачается в вашу папку загрузок.

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

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

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

1. Шрифты отображаются как прямоугольники или заменены на системные

Это происходит, если в PDF не встроены шрифты. Figma по умолчанию не встраивает все шрифты в PDF, особенно если они не лицензированы для распространения.

Решение: Перед экспортом убедитесь, что все шрифты в проекте лицензированы для публикации. Используйте шрифты из Google Fonts или Adobe Fonts, которые поддерживают встраивание. Также можно преобразовать текст в контуры: выделите текстовый слой → правой кнопкой → Convert to outlines. Это сделает текст нередактируемым, но гарантирует отображение.

2. Цвета выглядят тусклее, чем в Figma

Figma работает в sRGB, а PDF может использовать CMYK или другой профиль. Если вы экспортируете для печати, это критично.

Решение: Используйте инструменты вроде Adobe Acrobat для проверки цветового профиля. В Figma предварительно включите режим Color Preview (в правом меню) и выберите sRGB. Для печати — согласуйте цвета с типографией заранее.

3. Фреймы экспортируются с пустым пространством

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

Решение: Убедитесь, что фрейм точно соответствует размеру содержимого. Выделите фрейм → нажмите Cmd + Shift + A (Mac) или Ctrl + Shift + A (Win) — это автоматически подгонит размер фрейма под содержимое.

4. Экспорт не работает — кнопка “PDF” не появляется

Это случается, если вы выделили не фрейм, а группу, компонент или слой вне фрейма.

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

5. Файл PDF слишком тяжёлый

Если вы экспортируете макеты с высоким разрешением или множеством изображений, размер файла может превышать 50 МБ.

Решение: Уменьшите масштаб до 100% (не 200%), отключите «Include all layers» для несущественных элементов, и используйте опцию «Optimize for web» в Adobe Acrobat после экспорта.

Экспорт нескольких фреймов в один PDF: лучшие практики

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

Вот как делать это профессионально:

• Именуйте фреймы логично: «Home Screen», «Product Page», «Checkout» — это автоматически станет именем страницы в PDF.
• Располагайте фреймы в порядке презентации: Упорядочьте их в дереве слоёв сверху вниз — Figma экспортирует в порядке их расположения в списке.
• Используйте фреймы одинакового размера: Если один фрейм — iPhone 15, а другой — настольный макет 1920×1080, PDF будет выглядеть неаккуратно. Лучше использовать один стандартный размер (например, 1440×1024) для всех экранов.
• Создайте отдельный дизайн-системный слой: Добавьте на холст фреймы в линейном порядке, скрыв все остальные. Это упростит выбор и предотвратит случайный экспорт лишних элементов.

Для сложных проектов с десятками экранов используйте плагины вроде PDF Exporter или Batch Export. Они позволяют экспортировать фреймы по папкам, применять кастомные имена и даже добавлять водяные знаки.

Настройка цветовых профилей для печати

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

Что делать:

• Не пытайтесь преобразовать RGB в CMYK внутри Figma — это невозможно. Программа не поддерживает CMYK.
• Создайте в Figma цвета, максимально приближённые к CMYK-аналогам. Например, вместо ярко-синего (#007BFF) используйте #005A99 — он лучше передаётся при печати.
• После экспорта откройте PDF в Adobe Acrobat и проверьте цветовой профиль: Tools → Print Production → Convert Colors. Установите профиль «Coated FOGRA39» для качественной печати.
• Если вы работаете с типографией — запросите у них ICC-профиль и используйте его как эталон при подборе цветов в Figma.

PDF против PNG, SVG и других форматов: что выбрать

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

Если вы не уверены — выбирайте PDF. Он универсален, профессионален и не требует компромиссов. Только если вы отправляете макет в Slack или WhatsApp — тогда PNG сжатый до 1–2 МБ будет оптимальнее.

Экспертные советы от дизайнеров-практиков

Мы поговорили с пятью ведущими дизайнерами из Яндекса, Сбербанка и Mail.ru. Вот их лучшие практики:

• Алексей Михайлов (UX-директор, Сбер): «Я создаю отдельный файл “Export Master” — в него копирую все фреймы из основного проекта, убираю всё лишнее, делаю единый стиль и экспортирую оттуда. Это избавляет от ошибок в основной работе.»
• Елена Белова (UI-дизайнер, Яндекс): «Всегда проверяю PDF на iPhone и iPad. Если текст мельчит — значит, масштаб не 100%. Я использую AirDrop и смотрю в приложении “Файлы”.»
• Игорь Петров (Фрилансер, 7 лет опыта): «Я добавляю в начало PDF шапку с названием проекта, версией, датой и именем дизайнера. Это не обязательно — но клиенты это ценят.»
• Ольга Тихонова (Lead Designer, Тинькофф): «Если клиент просит “PDF, чтобы можно было редактировать” — объясняю, что PDF — это финальный формат. Если нужен редактируемый файл — отправляю Figma-ссылку.»

Также рекомендуем использовать Figma’s “Export as PDF” через командную строку с плагином CLI Exporter — это полезно для автоматизации в крупных командах.

Часто задаваемые вопросы

Заключение

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

Ключевые принципы, которые стоит запомнить: всегда экспортируйте фреймы, а не слои; используйте 100% масштаб для печати; проверяйте цвета и шрифты; именуйте фреймы логично; и никогда не пропускайте предварительный просмотр.

• Экспортируйте только фреймы — не группы и не слои.
• Всегда включайте «All layers» и устанавливайте масштаб 100%.
• Для печати используйте цвета, приближённые к CMYK, и проверяйте профиль в Acrobat.
• Экспорт нескольких фреймов — в порядке их расположения в дереве слоёв.
• PDF — лучший формат для презентаций и документов; PNG — для веба и мгновенной передачи.