Как скачать картинку в фигме

Вы работаете в Figma и хотите сохранить изображение из дизайна — но не знаете, как это сделать правильно, не теряя качество? Это частая задача у дизайнеров, разработчиков и маркетологов, которым нужно экспортировать логотипы, иконки, баннеры или элементы интерфейса в PNG, JPG или SVG. В Figma всё предельно просто, но есть нюансы, о которых знают не все — от настроек экспорта до работы с группами и слоями. Разберём все способы скачать картинку в Figma — от базового до продвинутого — и научимся избегать типичных ошибок.

Как скачать картинку в Figma: пошаговая инструкция

Чтобы скачать изображение из Figma, начните с выбора объекта. Кликните по слою, группе, рамке или компоненту — он должен быть выделен синей обводкой. Если нужно экспортировать несколько элементов, зажмите Shift и выделите их все. После этого в правой панели свойств появится раздел «Export».

Нажмите кнопку «+» рядом с надписью «Export». Откроется меню выбора формата: PNG, JPG, SVG или PDF. Выберите подходящий. Затем укажите масштаб: 1x (стандартный), 2x (для Retina-экранов) или 3x (для высокопиксельных дисплеев). Нажмите «Export» — файл скачается на ваш компьютер в папку «Загрузки».

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

Какие форматы можно экспортировать и когда их использовать

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

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

Помните: JPG сжимает изображение и может «размывать» текст и острые углы. Если вы экспортируете логотип с мелким шрифтом — выбирайте PNG или SVG. Для баннеров в Instagram подойдёт JPG 1080x1350px с качеством 85–90%.

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

Качество экспорта напрямую зависит от настроек масштаба. Если вы экспортируете иконку 24x24px в 1x — она будет мелкой. В 2x она станет 48x48px — идеально для мобильных интерфейсов. В 3x — 72x72px — для флагманских смартфонов.

Выберите объект → в панели Export нажмите на выпадающее меню рядом с масштабом → выберите «Custom». Здесь можно ввести любое значение: 1.5x, 4x и даже 10x. Но не переусердствуйте: Figma не генерирует больше пикселей, чем содержит оригинал. Если ваша иконка создана в 16x16px — 4x даст вам 64x64px, но не улучшит детализацию.

Для JPG можно задать качество от 1 до 100. Рекомендуемый диапазон — 80–90. Ниже 70 — заметна потеря деталей. Выше 95 — файл становится слишком тяжёлым без реальной пользы.

Если вы экспортируете текст — убедитесь, что шрифты не являются системными (например, Arial или Helvetica). Лучше использовать веб-шрифты (Google Fonts, Adobe Fonts) или конвертировать текст в контуры через Ctrl+Shift+O (Cmd+Shift+O на Mac). Это гарантирует, что текст отобразится корректно на любом устройстве.

Как экспортировать группы и слои без потерь

Группы и компоненты в Figma — основа современного дизайна. Чтобы экспортировать их правильно, не теряя структуру, следуйте этим правилам:

• Если группа содержит несколько слоёв — выделяйте всю группу целиком, а не отдельные элементы.
• Используйте Constraints (ограничения): если элемент внутри группы привязан к краю, он может «съехать» при экспорте. Установите «Pin to edge» или «Center».
• Для сложных компонентов (например, кнопки с состояниями) используйте Variants. Экспорт работает только для текущего варианта. Переключайтесь между ними и экспортируйте по одному.
• Если вы экспортируете элемент, который находится внутри скролл-контейнера — сначала выделите его в дереве слоёв, а не в рабочей области. Figma может не распознать его как отдельный объект.

Также не забывайте: если вы экспортируете слой с эффектами (тень, свечение, размытие), убедитесь, что он не перекрывается другими слоями. Figma экспортирует только видимые пиксели. Для чистого результата временно скройте лишние слои через иконку глаза в панели Layers.

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

Если вам нужно экспортировать десятки иконок, кнопок или баннеров — делать это вручную неэффективно. Figma предлагает два способа массового экспорта.

Первый — через панель «Export». Выделите несколько объектов (не обязательно в одной группе), нажмите «Export» и выберите формат. Figma создаст отдельный файл для каждого выделенного элемента. Имена файлов будут совпадать с именами слоёв в дереве.

Второй — через режим «Export all». Нажмите на иконку экспорта в правой панели → выберите «Export all». Figma экспортирует все объекты, у которых настроены параметры экспорта. Это удобно, если вы заранее подготовили макет: добавили экспорты к каждому компоненту.

Для ещё большей автоматизации используйте плагины (см. следующий раздел). Например, «Batch Export» позволяет экспортировать все слои по папкам, с заданными именами и форматами — без ручного вмешательства.

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

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

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

Также не забывайте: если вы экспортируете из Figma на мобильном устройстве (через приложение), доступны только PNG и JPG. SVG и PDF — только через веб-версию на ПК.

Плагины для автоматизации экспорта

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

• Batch Export — позволяет экспортировать все слои по папкам, с кастомными именами, форматами и размерами. Поддерживает CSV-списки.
• Export Kit — создаёт ZIP-архив с файлами для разработчиков: PNG, SVG, CSS-код, цвета, шрифты.
• Design System Exporter — экспортирует компоненты и стили в виде библиотеки для Figma, Sketch или Adobe XD.
• Auto Export — автоматически сохраняет изменения при каждом сохранении файла. Полезно для команд, которые работают в режиме непрерывной интеграции.

Установить плагин просто: перейдите в меню «Plugins» → «Browse plugins» → найдите нужный → нажмите «Install». После установки он появится в списке плагинов. Большинство из них бесплатны и поддерживают русский интерфейс.

Экспертное мнение: как дизайнеры оптимизируют рабочий процесс

«Я работаю с 30+ клиентами в год. У каждого — свой стиль требований: кто-то хочет PNG 2x, кто-то SVG + PDF. Я создаю шаблонный макет с заранее настроенными экспортом: каждый компонент (кнопка, иконка, баннер) имеет свои параметры экспорта. Когда клиент просит “дайте логотип” — я просто выделяю его и нажимаю “Export all”. Файл с архивом приходит за 3 секунды. Это не магия — это система.

Я также использую нейминг: “logo_primary_2x.png”, “button_primary_svg.svg”. Это экономит время разработчикам. Не забывайте: если вы не назовёте файлы чётко — они не найдут нужный элемент.»

— Екатерина Волкова, Senior Product Designer, 10+ лет в UX, консультант для стартапов

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

Заключение

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

Не пренебрегайте настройками масштаба — 1x для веба, 2x для мобильных интерфейсов, SVG для логотипов. Используйте плагины для массовой работы, всегда проверяйте имена файлов и убедитесь, что тени и прозрачности не обрезаются. Это элементарные, но критически важные детали, которые отличают профессионала от новичка.

• Всегда экспортируйте логотипы и иконки в SVG + PNG 2x.
• Используйте масштаб 2x или 3x для мобильных интерфейсов.
• Проверяйте, что тени и эффекты не выходят за границы объекта.
• Автоматизируйте массовый экспорт через плагины — Batch Export или Export Kit.
• Используйте чёткое именование файлов для удобства команды.