Как сохранить в Фигме: экспорт в PNG, JPG, SVG, PDF и файл .fig

Проект в Figma сохраняется сам: это облачный сервис, и каждое изменение уходит на сервер в реальном времени, кнопки «Сохранить» здесь нет. Чтобы сохранить в фигме изображение, выделите фрейм или слой, в разделе Export (экспорт) на правой панели нажмите «+», выберите нужный формат и кнопку Export. Копию всего проекта на компьютер скачивают через главное меню: File > Save local copy (сохранить локальную копию), получится файл .fig.

Русской версии интерфейса у Figma нет, поэтому названия пунктов даём по-английски, перевод в скобках. Горячие клавиши указаны для Windows, на Mac вместо Ctrl нажимайте Cmd, вместо Alt Option.

Автоматическое сохранение проекта и история версий

Пока есть интернет, сохранение идёт автоматически, нажимать Ctrl+S не нужно. Каждые 30 минут Figma ставит автоматическую точку в истории версий (version history), а ещё при обрыве связи и сбое программы. Чтобы посмотреть список, щёлкните по пустому месту холста, в меню рядом с названием файла на верхней панели выберите Show version history (показать историю версий). Смотреть историю можно с правом просмотра, а на создание версии требуется право на редактирование.

Автоматические точки неудобно искать. После каждого этапа работы используйте Ctrl+Alt+S или команду Save to version history (сохранить версию): Figma попросит название и описание, названия длиннее 25 символов обрезаются. Любую версию можно восстановить (Restore) или создать из неё новый файл (Duplicate). Восстановление ничего не удаляет, текущее состояние остаётся среди версий.

На бесплатном тарифе Starter в истории видны только последние 30 дней, на платных вся история. Если работаете бесплатно, раз в неделю сохраняйте локальную копию .fig, чтобы ранние варианты оставались под рукой, когда они перестанут быть видны в истории.

Как сохранить в фигме картинку: экспорт фрейма или слоя

1. Выделите фрейм, группу или слой на холсте или в панели слоёв (Layers). Сразу несколько объектов выделяют с зажатым Shift.
2. Раздел Export находится внизу правой панели: прокрутите до него и нажмите «+».
3. В строке два выпадающих списка: в первом настройте масштаб, во втором выберите один из основных форматов: PNG, JPG, SVG или PDF.
4. Нажмите кнопку Export с именем слоя. В браузере картинка уйдёт в папку загрузок, а приложение Figma для компьютера спросит имя и место для файла.

Строк экспорта у одного элемента может быть несколько, например в двух масштабах и в SVG, и все варианты скачаются за одно действие. Поле Suffix добавляет текст к имени файла: с @2x получится logo@2x.png.

Быстрый способ без скачивания: правая кнопка мыши > Copy/Paste as > Copy as PNG. Изображение попадёт в буфер обмена, его можно вставить в мессенджер или в Photoshop.

Масштаб 2x и размер в пикселях

Масштаб 1x даёт картинку в размере макета, разрешение не меняется: фрейм 1080 x 1350 станет картинкой 1080 x 1350 пикселей. В списке есть готовые значения от 0.5x до 4x. Для экранов с высокой плотностью точек, например у мобильных устройств, используйте 2x: из 360 x 640 получится 720 x 1280.

Если площадка требует определённую ширину или высоту, задайте размер вручную: 512w даст ширину 512 пикселей, 512h высоту, вторая сторона пересчитается пропорционально. Например, 1200w даст обложку статьи шириной ровно 1200 пикселей.

PNG и изображения без фона

Формат PNG хранит прозрачность и не портит текст сжатием, для иконок, кнопок и скриншотов UI используйте его. Прозрачный фон получается не всегда: у нового фрейма белая заливка, и она попадёт в файл.

Порядок для PNG без фона:

1. Выделите фрейм.
2. В блоке Fill (заливка) на правой панели снимите флажок Show in exports (показывать при экспорте) или удалите заливку кнопкой с минусом.
3. Экспортируйте в PNG.

Если экспортировать логотип или группу внутри фрейма, фона тоже не будет: экспортируется только выбранный элемент. Опция Ignore overlapping layers (игнорировать перекрывающие слои) включена по умолчанию, и соседние объекты, которые заходят на выделенный, в результат не попадут.

JPG: качество и цветовой профиль

Файл JPG весит меньше, но прозрачности не хранит, а сжатие размывает мелкий текст. Для фотографий, баннеров с фото и превью в соцсетях он подходит, для карточки с текстом и цифрами мы бы взяли PNG.

Шаги те же: выделить элемент, «+» в разделе экспорта, формат JPG. Настройка качества и цветового профиля спрятана в дополнительных параметрах, за значком рядом со строкой экспорта. Качество по умолчанию High (высокое), для фото с мелкими деталями его лучше не снижать. Профиль бывает Same as file (как в файле), sRGB или Display P3. Чтобы цвета правильно выглядели в интернете, выбирайте sRGB: в Display P3 на части экранов они смотрятся иначе.

SVG для разработки и логотипов

Формат SVG хранит векторную графику: логотип, иконку или иллюстрацию можно растянуть до любого размера без потери качества.

Векторные файлы экспортируются только в масштабе 1x, выбранный масштаб на них не действует. Параметры формата:

• Outline text (текст в кривые): включена по умолчанию, если в выделении есть текст. Буквы становятся контурами, и изображение откроется одинаково даже там, где нет вашего шрифта. Снимите галочку, если текст в SVG должен остаться редактируемым.
• Include «id» attribute (добавить атрибут id): в код попадут названия слоёв, разработчику или другому дизайнеру проще найти нужный элемент.
• Simplify stroke (упростить обводку): в случае сложной векторной фигуры переводит внутреннюю или внешнюю обводку в центральную, которую поддерживает SVG. Для таких фигур опция включена по умолчанию.

Растровая фотография внутри макета останется растровой, она просто встроится в файл. Такое изображение весит много, для фото используйте JPG.

Как сохранить в фигме в PDF

Отдельный макет сохраняют в PDF так же, как картинку: формат PDF в разделе экспорта. Как и вектор, PDF экспортируется только в 1x. Качество картинок внутри по умолчанию Medium (среднее), для дизайна с фотографиями поднимите его в настройках экспорта.

Многостраничный документ собирается командой меню:

1. Разложите фреймы на одной странице (Page) файла.
2. Нажмите на значок Figma в верхнем углу слева, это главное меню.
3. Выберите File > Export frames to PDF (экспортировать фреймы в PDF).

Каждый фрейм верхнего уровня станет отдельной страницей документа. Порядок страниц проверяйте в готовом PDF до отправки заказчику.

Презентация из Figma Slides

Если слайды сделаны фреймами в обычном файле Figma, подойдёт Export frames to PDF. В Figma Slides, отдельном редакторе, где собирают презентации, путь другой: главное меню > File > Export slides to (экспортировать слайды в). Там доступны PDF, PNG, JPG и PPTX для PowerPoint. В PPTX шрифты, которых нет на компьютере, заменятся стандартными, градиенты станут сплошной заливкой, интерактивные элементы превратятся в картинки.

Если хотите отдать макет в типографию, PDF из Figma мы бы не советовали: программа работает в RGB, профиля CMYK в настройках экспорта нет. Макет под печать удобнее довести в Illustrator или InDesign.

Экспорт сразу нескольких элементов

Когда настроек много, используйте окно общего экспорта: File > Export (Ctrl+Shift+E). Там перечислены все объекты, у которых есть строка в разделе экспорта. Снимите флажки с лишних и нажмите Export. Имя слоя становится именем файла, а имя через косую черту, например icons/logo, раскладывает картинки в виде вложенных папок.

Анимация: MP4, WebM и GIF

Анимации, собранные в Figma Motion, выгружаются из того же раздела экспорта: выделите фрейм верхнего уровня, то есть лежащий прямо на холсте, и перейдите на вкладку Animated. Форматы: MP4, WebM, GIF и SVG. Для видео настраиваются размер, количество кадров в секунду и качество, для GIF повтор по кругу.

На бесплатном тарифе анимация выгружается не больше 1920 x 1080 и 30 кадров в секунду.

Как сохранить проект в Figma на компьютер

Внутренний формат программы называется .fig, он содержит все страницы, фреймы и слои. Сохранение проекта на компьютер:

1. Откройте файл.
2. Нажмите на значок главного меню.
3. Выберите File > Save local copy.

В браузере файл .fig уйдёт в папку загрузок, приложение для компьютера может спросить, куда его сохранить. Функция есть на любом тарифе и доступна даже с правом просмотра (can view). Иногда пункта нет: значит, владелец запретил зрителям копировать и экспортировать содержимое. Разные редакторы Figma имеют свои расширения: .jam у досок FigJam, .deck у Figma Slides.

В локальную копию не попадают история версий и комментарии, а загруженная обратно копия станет отдельным новым файлом. Компоненты теряют связь с библиотекой, их экземпляры (instances) больше не получают обновления.

Чтобы загрузить проект в Figma обратно, перетащите .fig в файловый браузер Figma, где лежат все ваши проекты, или воспользуйтесь там кнопкой импорта (Import). Копию проекта внутри облака можно сделать с помощью команды Duplicate (дублировать) в меню файла: копия появится рядом с исходным.

Для согласования с клиентом мы бы отправляли ссылку на проект вместо PNG. Кнопка Share (поделиться) справа на верхней панели позволяет показать макет и прототип клиенту или коллегам: для пользователя с правом can view (просмотр) видна актуальная версия, комментарии он оставляет прямо на макете. Для совместной работы выдают can edit (редактирование).

Работа без интернета

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

В режиме офлайн нельзя открыть другие файлы, а создать можно только один новый. Браузер хранит такие изменения 30 дней (Google Chrome, Firefox, Edge, Opera), Safari 7 дней.

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

• Картинки после массового экспорта называются Frame 12, Frame 13: слои не переименованы, дайте им понятные имена перед экспортом.
• В PDF из Export frames to PDF попали черновые фреймы: команда берёт все фреймы верхнего уровня на странице, перенесите лишние на другую страницу.
• Нет вкладки Animated: выделен вложенный фрейм или группа, выберите фрейм, который лежит прямо на холсте.
• Текст в SVG у разработчика отображается другим шрифтом: на его компьютере нет вашего шрифта, а при экспорте сняли Outline text. Верните галочку или передайте файл шрифта.

Вопросы и ответы

Где кнопка «Сохранить» в Figma?

Её нет: проект сохраняется автоматически. Чтобы отметить этап, нажмите Ctrl+Alt+S, появится версия с названием.

Как сохранить в фигме работу на компьютер, чтобы открыть в другом аккаунте?

Через главное меню, File > Save local copy. Полученный .fig перетащите в файловый браузер другого аккаунта. История версий и комментарии не перенесутся.

Как сохранить фрейм в хорошем качестве?

Экспортируйте в PNG с масштабом 2x или 3x. Если нужен документ, выберите PDF и поднимите качество картинок в настройках экспорта.

Почему нет пункта экспорта или сохранения копии?

Проверьте права доступа: скорее всего, владелец файла запретил зрителям копировать и экспортировать. Попросите у него право на редактирование или снять ограничение в настройках доступа.

Можно ли сохранить макет из Figma в формате Photoshop?

Среди встроенных инструментов экспорта PSD нет. Макет можно выгрузить в PNG с удвоенным масштабом и открыть в Photoshop, слоёв при этом не будет.