Как правильно сохранить дизайн из Figma в PDF

Чтобы экспортировать макет из Figma в PDF, используйте команду File → Export frames to PDF. Каждый отдельный фрейм на текущей странице станет новой страницей в PDF-файле. Порядок страниц определяется расположением фреймов на холсте (сверху вниз, слева направо). Качество по умолчанию — Medium, но для печати рекомендуется выбирать High.

В этой статье разберем, как контролировать порядок страниц, настроить четкость изображений и избежать проблем с лишними элементами в итоговом файле.

Механика экспорта: что попадает в файл

Figma не экспортирует весь проект целиком одной кнопкой. Процесс привязан к текущей открытой странице (вкладке) файла.

1. Единица экспорта — Фрейм. Если вы хотите, чтобы экран мобильного приложения или слайд презентации были отдельной страницей в PDF, они должны быть оформлены как отдельные Frame.
2. Порядок страниц. Figma сортирует фреймы автоматически based on их координатах на бесконечном холсте:
   • Сначала сверху вниз.
   • Затем слева направо.
3. Игнорирование скрытого. Скрытые слои (глазик выключен) не попадут в экспорт, но сами фреймы, если они видимы, будут учтены.

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

Пошаговая инструкция: два способа сохранения

Выбор способа зависит от того, нужен ли вам один экран или многостраничный документ.

Способ 1. Многостраничный PDF (для презентаций и документации)

Этот метод собирает все фреймы с текущей вкладки в один файл.

1. Откройте вкладку Figma, содержащую нужные макеты.
2. Убедитесь, что на холсте нет «мусора»: старых версий, черновиков или технических фреймов, которые не должны попасть в отчет.
3. В верхнем меню выберите File → Export frames to PDF.
4. В появившемся окне настройте параметры (о них ниже) и нажмите Export.

Способ 2. Экспорт одного экрана

Если нужно сохранить только один конкретный макет:

1. Выделите нужный фрейм на холсте.
2. В правой панели найдите раздел Export (внизу).
3. Нажмите +, выберите формат PDF.
4. Нажмите кнопку Export [Name of Frame].

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

В диалоговом окне экспорта (или в настройках файла) можно влиять на вес и четкость итогового документа.

Выбор качества (Quality)

Цветовой профиль (Color Profile)

Figma позволяет выбрать цветовой профиль при экспорте:

• sRGB: Стандарт для веба и большинства мониторов. Выбирайте его, если PDF будут смотреть на экранах.
• Display P3: Более широкий цветовой охват. Используйте, если готовите материалы для устройств Apple или современной полиграфии, поддерживающей P3.

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

Управление порядком страниц

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

Как исправить порядок:

1. Выравнивание: Расположите фреймы строго по сетке. Например, первый фрейм в левом верхнем углу, второй — правее него или строго ниже.
2. Нумерация в названиях: Хотя Figma не сортирует по именам файлов при экспорте PDF, привычка называть фреймы 01_Home, 02_About помогает вам самим не запутаться при перемещении их на холсте.
3. Инструмент Auto Layout: Если ваши фреймы вложены в один родительский фрейм с Auto Layout, порядок страниц будет соответствовать порядку элементов в этом списке (слева направо или сверху вниз в зависимости от настроек layout). Это самый надежный способ фиксации порядка.

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

1. Лишние фреймы в кадре. Часто дизайнеры забывают убрать старые версии экранов, которые лежат рядом с основными. Они автоматически попадают в PDF. Всегда очищайте рабочую область перед экспортом.
2. Обрезанные тени и эффекты. Если у фрейма есть большая внешняя тень (Drop Shadow), она может обрезаться краями фрейма при экспорте, если не включена опция «Clip content». Однако при экспорте в PDF Figma обычно учитывает bounding box с эффектами. Если тень обрезается, проверьте, не стоит ли галочка Clip content у самого фрейма, или увеличьте padding внутри фрейма.
3. Нечитаемый мелкий текст. При выборе качества Low мелкий шрифт может стать размытым. Для текстовых документов всегда используйте Medium или High.
4. Прозрачный фон. По умолчанию PDF экспортируется с белым фоном, даже если в Figma фон прозрачный. Если вам нужна прозрачность, PDF — не лучший формат (лучше PNG), но некоторые просмотрщики могут корректно обработать прозрачность, если она задана на уровне страницы.

FAQ

Можно ли экспортировать сразу все страницы (вкладки) файла в один PDF? Нет, стандартными средствами Figma экспортирует только активную вкладку. Чтобы собрать весь проект, нужно либо вручную объединять PDF-файлы сторонними сервисами, либо использовать плагины (например, Export to PDF или аналогичные инструменты из Community), которые умеют проходить по всем вкладкам.

Почему PDF весит 50 Мб, хотя макет простой? Скорее всего, вы выбрали качество High, а в макете есть большие растровые изображения (фото в высоком разрешении). Попробуйте сжать изображения перед вставкой в Figma или выберите качество Medium.

Как сделать гиперссылки в PDF из Figma? Если в прототипе Figma настроены переходы (Interactions) между фреймами, при экспорте в PDF эти ссылки могут сохраниться как кликабельные области, но поддержка зависит от версии просмотрщика PDF. Для надежных интерактивных PDF лучше использовать специализированные инструменты верстки, так как Figma ориентирована на визуальный дизайн, а не на создание гипертекстовых документов.

Что делать, если шрифты в PDF заменились на стандартные? Убедитесь, что используемые шрифты имеют лицензию на встраивание (embedding). Figma обычно конвертирует текст в кривые или внедряет подмножество шрифта, но если шрифт защищен, он может быть заменен. В таком случае перед экспортом можно растрировать текстовые слои (Outline Stroke), но это сделает текст недоступным для копирования.