Как из фигмы сохранить картинку

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

Основы экспорта: как выгрузить картинку из Figma

Figma позволяет экспортировать любые элементы: от отдельных иконок до целых страниц с макетами. Процесс начинается с выбора объекта. Вы можете выделить один слой, группу слоёв или артборд. После этого в правой панели свойств появится раздел «Export» (Экспорт). Кликните «+», чтобы добавить параметры экспорта.

Каждый артборд или слой может иметь несколько профилей экспорта. Например, можно задать одновременно PNG 1x и PNG 2x — это полезно для ретина-экранов. При экспорте Figma автоматически создаст два файла с суффиксами @1x и @2x. Также можно указать кастомный префикс или суффикс имени файла.

Для начала экспорта нажмите кнопку «Export…». Откроется диалоговое окно, где вы сможете выбрать папку на компьютере. Если вы работаете с несколькими артбордами, Figma предложит выгрузить все сразу. Важно понимать, что экспортируемый объект должен быть видимым — скрытые слои не попадут в итоговый файл.

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

1. Откройте ваш проект в Figma.
2. Выделите нужный артборд с помощью инструмента Select (V).
3. В правой панели найдите блок «Export» и нажмите «+».
4. Выберите формат: PNG, JPG, SVG или PDF.
5. Укажите масштаб (1x, 2x, 3x или кастомный размер).
6. Настройте дополнительные опции: фон, обрезку, имя файла.
7. Нажмите «Export…» и выберите папку для сохранения.

Если вы экспортируете вектор (SVG), Figma сохранит все контуры, градиенты и тени, поддерживаемые в этом формате. Однако некоторые эффекты, например, размытие или перекрывающиеся тени, могут быть упрощены. Это важно учитывать при использовании SVG в production.

Форматы и настройки экспорта: PNG, JPG, SVG, PDF

Выбор формата напрямую влияет на качество, размер и применимость изображения. Рассмотрим каждый из них подробно.

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

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

SVG — векторный формат, масштабируется без потери качества. Незаменим для адаптивного дизайна. Однако не все браузеры одинаково хорошо поддерживают сложные эффекты Figma (например, shadows или masks). Перед использованием SVG на сайте протестируйте его в разных условиях.

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

Настройки экспорта: что означают параметры

• Scale — масштаб вывода. 1x соответствует оригинальному размеру, 2x — удвоенному (для Retina-экранов).
• Contents only — обрезает изображение по границам содержимого. Полезно, если вокруг объекта есть пустое пространство.
• Include text baseline shift — актуально для SVG, сохраняет точное позиционирование текста.
• Apply layer blur — включает размытие слоёв при экспорте в растровые форматы.
• Background color — позволяет задать фон при экспорте без прозрачности (например, белый вместо прозрачного).

Массовый экспорт: как выгрузить несколько изображений сразу

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

Первый способ — использовать групповой экспорт через выделение нескольких артбордов. Удерживайте Shift и кликайте по нужным элементам. В панели экспорта задайте одинаковые настройки для всех. При экспорте Figma создаст отдельные файлы с именами, соответствующими названиям слоёв.

Второй способ — использование фреймов с метками. Называйте артборды осмысленно: например, «icon-home», «button-primary». При экспорте Figma сохранит эти имена, что упрощает организацию файлов.

Третий способ — экспорт всей страницы как PDF. Подходит для презентаций или передачи макетов заказчику. В меню File → Export выберите «PDF» и укажите диапазон страниц.

Автоматизация через Figma CLI

Figma предоставляет командную строку (CLI) для программного доступа к файлам. Это особенно полезно для CI/CD-процессов. С её помощью можно:

• Автоматически выгружать ассеты при каждом коммите.
• Генерировать спрайты иконок.
• Интегрировать дизайн с системами сборки.

Для использования CLI требуется токен доступа, который выдаётся в настройках аккаунта. Пример команды:

figma export images --file=<FILE_KEY> --output=assets/ --format=png --scale=2x

Плагины и сторонние инструменты для экспорта

Плагины значительно расширяют возможности экспорта. Вот наиболее популярные:

• Exporter — позволяет задавать правила экспорта для целых папок, использовать переменные именования, выгружать в несколько форматов за раз.
• Batch Export+ — массовый экспорт с фильтрацией по тегам, цветам, типам слоёв.
• SVG Export Optimizer — экспортирует SVG с минификацией кода, удалением лишних метаданных.
• Content Reel — не для экспорта напрямую, но помогает собирать ассеты в одном месте для последующего скачивания.

Плагины устанавливаются через меню «Plugins» → «Find more plugins in Community». После установки они появляются в правом верхнем углу. Большинство работают бесплатно, но имеют платные функции.

Альтернатива — сторонние сервисы, такие как Anima, Zeplin, Avocode. Они импортируют Figma-файлы и позволяют выгружать изображения, генерировать код, делиться с командой. Особенно удобны для разработчиков, которым нужны точные значения отступов и готовые ассеты.

Типичные ошибки и как их избежать

Даже опытные пользователи допускают ошибки при экспорте. Разберём самые частые.

Ошибка 1: Прозрачный фон вместо белого.
Figma по умолчанию экспортирует с прозрачностью. Чтобы изменить фон, в настройках экспорта укажите Background Color. Это работает только для растровых форматов.

Ошибка 2: Размытые изображения при 1x.
Если артборд имеет нецелочисленные размеры (например, 100.5×200.3), пиксели могут смещаться. Решение — выравнивайте координаты и размеры до целых чисел.

Ошибка 3: Не все слои экспортируются.
Проверьте, не скрыты ли слои (глазик выключен) или не находятся ли они за пределами артборда. Также убедитесь, что у вас нет масок, которые обрезают содержимое.

Ошибка 4: SVG не отображается корректно на сайте.
Figma может экспортировать SVG с нестандартными свойствами (например, filter). Используйте оптимизаторы вроде SVGO или вручную проверяйте код.

Чек-лист перед экспортом

• Проверьте видимость всех слоёв.
• Убедитесь, что тексты не перекрывают друг друга.
• Выровняйте объекты по пиксельной сетке.
• Задайте фон, если нужен не прозрачный.
• Выберите правильный масштаб (1x, 2x).
• Протестируйте один файл перед массовой выгрузкой.

Экспертное мнение

По его словам, ключевой тренд — интеграция Figma с системами управления цифровыми активами (DAM). Это позволяет хранить, версионировать и выгружать ассеты автоматически. Например, при изменении логотипа в Figma система может обновить его во всех каналах: сайт, соцсети, презентации.

Также Дмитрий отмечает рост использования переменных Figma для управления темами. Экспорт в разных темах (светлая/тёмная) теперь можно делать через скрипты, что экономит время.

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

Заключение

Экспорт изображений из Figma — это не просто кнопка «сохранить», а важный этап в дизайнерском workflow. Правильные настройки позволяют избежать ошибок, сэкономить время и обеспечить согласованность между дизайном и разработкой. Знание форматов, возможностей массового экспорта и инструментов автоматизации делает процесс надёжным и масштабируемым.

• Используйте PNG для интерфейсов с прозрачностью, SVG — для векторной графики.
• Настройте несколько масштабов (1x, 2x) для поддержки разных устройств.
• Проверяйте видимость слоёв и фон перед экспортом.
• Автоматизируйте массовую выгрузку через плагины или CLI.
• Тестируйте экспортированные файлы в реальных условиях (браузер, устройство).