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

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

Основы экспорта из Фигмы

Экспорт изображений в Фигме — это простая, но не всегда интуитивная операция. Чтобы начать, вам нужно выбрать один или несколько объектов: это может быть иконка, кнопка, карточка, целый экран или даже несколько слоёв, объединённых в группу. После выбора откройте панель свойств справа — там появится раздел «Экспорт». Если панель не видна, нажмите клавишу Cmd+Shift+E (Mac) или Ctrl+Shift+E (Windows).

В этом разделе вы увидите список доступных форматов: PNG, JPG, SVG и PDF. Каждый из них имеет свои особенности. Для начала просто кликните на значок плюса рядом с нужным форматом — Фигма автоматически создаст настройку экспорта. После этого нажмите кнопку «Экспорт» и выберите папку на вашем компьютере.

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

Какой формат выбрать: PNG, JPG, SVG или PDF?

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

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

Если вы не уверены — начните с PNG. Это «безопасный» выбор для большинства задач. Большинство дизайнеров используют PNG как стандартный формат для экспорта макетов в портфолио и для разработчиков.

Настройки экспорта: масштаб, качество, прозрачность

После выбора формата вы увидите дополнительные опции. Они могут кардинально изменить результат.

• Масштаб — определяет разрешение. По умолчанию — 1x. Для Retina-экранов (iPhone, MacBook) используйте 2x или 3x. Это увеличит размер файла, но сохранит чёткость пикселей.
• Качество (только для JPG) — ползунок от 0 до 100%. Для UI-элементов ставьте 85–95%. Ниже 70% — заметные артефакты на тексте и градиентах.
• Прозрачность — включается только для PNG и SVG. Если вы экспортируете иконку на белый фон, оставьте прозрачность включённой — это даст гибкость при использовании в разных средах.
• Имя файла — Фигма предлагает автоматическое имя, но вы можете его изменить. Рекомендуется использовать понятные названия: button-primary-2x.png, home-screen-3x.png.

Не забывайте: если вы экспортируете в 1x, а затем увеличиваете изображение в Photoshop или на веб-сайте — оно будет размытым. Лучше сразу экспортировать в нужном разрешении. Это правило особенно важно для мобильных приложений и адаптивных сайтов.

Экспорт групп, слоёв и компонентов

Фигма позволяет экспортировать не только отдельные объекты, но и сложные структуры. Это мощный инструмент для эффективной работы.

Экспорт группы

Выделите группу (Ctrl+G или Cmd+G), затем нажмите «Экспорт». Фигма автоматически обернёт всю группу в рамку и экспортирует её как единое изображение. Это удобно, например, для экспорта карточки товара: заголовок, изображение, цена и кнопка — всё вместе.

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

Если вы используете компоненты (Component), вы можете экспортировать их напрямую. Нажмите на компонент в библиотеке или на странице — в панели свойств появится кнопка «Экспорт». Это особенно полезно, когда у вас есть десятки вариаций одной кнопки — вы можете экспортировать все сразу через «Экспорт всех».

Экспорт слоёв

Для экспорта нескольких слоёв без группировки — удерживайте Cmd (Mac) или Ctrl (Windows) и выделяйте каждый слой по очереди. После этого нажмите «Экспорт». Фигма создаст отдельные файлы для каждого слоя. Это может быть полезно, если вы работаете с анимацией или системой иконок.

Экспорт артбордов и целых экранов

Артборды — это основной инструмент для создания макетов экранов. Экспорт артборда — самый частый сценарий для дизайнеров.

Чтобы экспортировать весь экран:
1. Выделите артборд (кликните по его имени в панели слоёв).
2. Откройте панель «Экспорт».
3. Выберите формат (рекомендуется PNG 2x).
4. Убедитесь, что включена опция «Включить границы артборда» — она гарантирует, что весь контент внутри будет экспортирован без обрезки.
5. Нажмите «Экспорт».

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

Не забывайте проверять, не выходит ли какой-либо элемент за границы артборда. Фигма не экспортирует то, что находится за пределами. Если кнопка «выпала» — она не попадёт в файл. Всегда включайте режим «Показать переполнение» (View > Show Overflow) перед экспортом.

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

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

• Изображение размыто — причина: экспорт в 1x при использовании на Retina-экранах. Решение: всегда используйте 2x или 3x.
• Фон белый, хотя должен быть прозрачным — причина: выбран JPG или прозрачность отключена. Решение: используйте PNG и включите опцию «Прозрачный фон».
• Файл не сохраняется — причина: блокировка папки или отсутствие прав. Решение: попробуйте сохранить в другую папку (например, в «Загрузки»).
• Экспорт не отображается в панели — причина: ничего не выделено. Решение: кликните на объект, затем проверьте, появилась ли панель «Экспорт» справа.
• Текст обрезан — причина: текст вышел за границы артборда или слоя. Решение: увеличьте артборд или уменьшите шрифт.

Если вы экспортируете SVG и текст не отображается — убедитесь, что он не превращён в контур. Фигма может конвертировать шрифты в векторные формы, что увеличивает размер файла и делает текст нередактируемым. Для SVG-иконок лучше использовать системные шрифты (например, Inter, Roboto) и не конвертировать в контуры, если текст должен оставаться доступным для редактирования.

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

Ещё один мощный приём — создание «экспорт-стендов». Это отдельные артборды, где вы собираете все элементы, которые нужно экспортировать: кнопки, иконки, компоненты. Так вы избегаете случайного экспорта лишнего и экономите время.

Также рекомендуется использовать систему цветовых меток. Например, зелёные метки — для разработчиков, красные — для маркетинга. Это помогает быстро находить нужные элементы и не путать их при экспорте.

Для сложных проектов используйте плагины:
— Batch Export — экспортирует все выбранные слои в одну папку.
— Export All — экспортирует все артборды в разных форматах.
— Zeplin — автоматически генерирует спеки и файлы для разработчиков.

Помните: чем больше вы автоматизируете процесс, тем меньше ошибок допускаете. Дизайн — это не только эстетика, но и системность.

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

Заключение

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

Не забывайте про автоматизацию: плагины, системные имена файлов и экспорт-стенды экономят часы в неделю. Даже небольшая оптимизация процесса экспорта повышает качество вашей работы и укрепляет репутацию как профессионала.

• Всегда экспортируйте UI-элементы в PNG 2x или 3x для Retina-экранов.
• Используйте SVG для логотипов и иконок — они масштабируются без потерь.
• Проверяйте, не выходит ли контент за границы артборда перед экспортом.
• Автоматизируйте процесс с помощью плагинов — это экономит время и снижает ошибки.
• Не используйте JPG для текста и интерфейсов — артефакты разрушат визуальную целостность.