Как скачать макет из figma

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

Как скачать макет из Figma: основные способы

Скачивание макета из Figma — это не один пункт в меню, а целый набор функций, зависящих от того, что именно вы хотите получить: изображение, векторный файл, PDF для печати или код для разработки. Первый шаг — убедитесь, что вы находитесь в режиме просмотра. Если вы редактируете файл, экспортируемые элементы могут быть неактивны или недоступны. Перейдите в режим «Просмотр» (View mode) — это можно сделать через кнопку в правом верхнем углу или нажав клавишу V.

Существует три основных пути экспорта: через контекстное меню (правый клик), через панель свойств справа и через специальную вкладку «Экспорт» в панели инструментов. Каждый из них подходит для разных задач. Например, если вам нужно быстро получить PNG-изображение кнопки — достаточно кликнуть по ней правой кнопкой. Если вы готовите макет для презентации заказчику — лучше экспортировать всю страницу как PDF. Для разработчиков — ключевым становится экспорт SVG и CSS-кода.

Как экспортировать отдельный элемент или слой

Экспорт отдельного элемента — самый частый сценарий. Представьте, что вы дизайнер, и вам нужно передать разработчику иконку меню или кнопку «Заказать». Как это сделать правильно?

1. Выберите нужный слой в дереве объектов или на холсте. Убедитесь, что он не скрыт (иконка глаза не зачёркнута).
2. Правой кнопкой мыши кликните по выделенному элементу.
3. В появившемся меню выберите «Скачать как» — и у вас откроется список доступных форматов: PNG, JPG, SVG, PDF.
4. Выберите нужный формат — и файл скачается автоматически на ваш компьютер.

Что выбрать: PNG, JPG, SVG или PDF?

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

Как скачать всю страницу целиком

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

Для этого:

1. В левой панели найдите нужную страницу в дереве (например, «Главная страница»).
2. Кликните по ней правой кнопкой мыши.
3. Выберите «Экспортировать страницу».
4. В открывшемся окне выберите формат: PNG, JPG, SVG или PDF.
5. Укажите масштаб (1x, 2x, 3x) — для экранов с высокой плотностью пикселей лучше 2x.
6. Нажмите «Экспортировать» — файл скачается автоматически.

Важно: как экспортировать с прозрачным фоном

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

• Убедитесь, что фон страницы не имеет цвета (проверьте в свойствах страницы — «Background» должен быть выключен).
• При экспорте выберите формат PNG — он поддерживает прозрачность.
• Если фон всё равно белый — проверьте, нет ли скрытого прямоугольника под всеми слоями.

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

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

Ключевые параметры:

• Формат — PNG, JPG, SVG, PDF. Выбирайте в зависимости от назначения.
• Масштаб — 1x (стандартный), 2x (для Retina), 3x (для 4K-дисплеев). Разработчики часто требуют 2x.
• Имя файла — Figma автоматически генерирует имя, но его можно изменить перед скачиванием.
• Размер — можно вручную задать ширину и высоту в пикселях. Полезно при экспорте под конкретные требования.
• Прозрачный фон — включается только для PNG и SVG.

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

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

Ошибка 1: Экспорт не появляется

• Причина: Объект скрыт, заблокирован или находится в группе без включённого экспорта.
• Решение: Проверьте дерево слоёв. Убедитесь, что рядом с объектом нет значков глаза (скрыт) или замка (заблокирован). Если объект в группе — включите экспорт для всей группы или вынесите элемент на верхний уровень.

Ошибка 2: Изображение размыто

• Причина: Экспорт в 1x, а нужен 2x. Или элемент был уменьшен вручную, а не масштабирован через свойства.
• Решение: Всегда экспортируйте в 2x для экранов с высоким разрешением. Не растягивайте изображения вручную — используйте «Constraints» для адаптивности.

Ошибка 3: Текст превратился в изображение

• Причина: Текст был преобразован в контур (Outline) или экспортирован в JPG.
• Решение: Экспортируйте текст в PDF или SVG — тогда он останется редактируемым. В PNG и JPG текст всегда растрируется.

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

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

1. Удерживайте Ctrl (Windows) или Cmd (Mac) и кликайте по каждому элементу, который нужно экспортировать.
2. Выделите все нужные объекты.
3. В правой панели в блоке «Export» нажмите «+» — вы увидите список всех выбранных элементов.
4. Выберите формат, масштаб и нажмите «Экспортировать».

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

Экспорт для разработчиков: SVG, CSS и код

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

Для получения CSS-стилей:

• Выберите элемент (например, кнопку).
• В панели «Export» нажмите «Copy CSS» — вы получите код с цветами, шрифтами, отступами.
• Этот код можно вставить напрямую в CSS-файл или использовать как основу для стилизации.

Для SVG-кода:

• Экспортируйте элемент как SVG — файл будет содержать чистый векторный код XML.
• Разработчики могут встраивать его напрямую в HTML, что ускоряет загрузку и улучшает SEO.

Если вы используете Figma + Zeplin, Avocode или Figma Dev Mode — можно настроить автоматическую синхронизацию стилей и компонентов с репозиторием кода. Это особенно актуально для крупных команд.

Заключение

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

• Используйте SVG для иконок и логотипов — они масштабируются без потерь.
• Всегда экспортируйте UI-элементы в 2x для экранов с высокой плотностью пикселей.
• Проверяйте, что слои не скрыты и не заблокированы перед экспортом.
• Для массовой выгрузки используйте выделение нескольких объектов и ZIP-архив.
• Текст в PDF и SVG остаётся редактируемым — в PNG и JPG он растрируется.