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

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

Зачем сохранять фрейм из Figma

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

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

Не все понимают разницу между экспортом как PNG и SVG. Например, иконку лучше сохранять в векторе, чтобы она оставалась чёткой при любом масштабировании. А скриншот экрана приложения — в PNG с прозрачным фоном. Ошибочный выбор формата может привести к размытию, увеличению размера файла или потере редактируемости.

Основные способы экспорта фрейма

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

Первый и самый распространённый способ — экспорт через панель Export. Он даёт полный контроль над форматом, размером и качеством. Доступны форматы PNG, JPG, SVG и PDF. Можно задавать множественные правила экспорта: например, один и тот же фрейм сохранить сразу в 1x и 2x для ретина-экранов.

Второй способ — копирование в буфер обмена. Figma позволяет скопировать фрейм как изображение (Ctrl+C / Cmd+C), а затем вставить его в Google Docs, Notion или PowerPoint. Это быстро, но подходит только для временного использования, так как теряется качество и масштабируемость.

Третий способ — использование публичных ссылок. Через кнопку Share можно создать ссылку на конкретный фрейм. Это удобно для демонстрации клиенту или команде. Ссылка может быть с доступом «View only» или «Can comment», что усиливает безопасность.

Четвёртый способ — копирование стилей и кода. Figma позволяет скопировать свойства слоя как CSS, iOS Swift или Android XML. Это особенно ценно для разработчиков, которым не нужно переписывать значения вручную.

Как выбрать подходящий метод?

Если вы работаете с маркетологом и ему нужно вставить баннер в презентацию — используйте экспорт в PNG 2x. Если дизайнер передаёт иконку верстальщику — экспортируйте в SVG. При согласовании макета с заказчиком — отправьте ссылку с комментариями. А если разработчик просит отступы и цвета — воспользуйтесь режимом «Dev Mode» и скопируйте CSS.

Как экспортировать фрейм как изображение

Экспорт фрейма в растровый формат — самый частый сценарий. Особенно популярен PNG благодаря поддержке прозрачного фона. Вот пошаговый алгоритм:

1. Откройте ваш файл в Figma и найдите нужный фрейм.
2. Щёлкните по нему левой кнопкой мыши, чтобы выделить.
3. В правой панели найдите раздел Export.
4. Нажмите + Add Export, если правило ещё не задано.
5. Выберите формат: PNG, JPG или TIFF.
6. Укажите масштаб: 1x, 2x, 3x или кастомный размер (например, 50%).
7. При необходимости установите фон (например, белый вместо прозрачного).
8. Нажмите Export [название фрейма] и выберите папку на компьютере.

Для мобильных интерфейсов рекомендуется экспортировать в 2x и 3x, чтобы обеспечить чёткость на устройствах с высоким DPI. Например, если исходный фрейм 375×812 пикселей, то 2x даст 750×1624 — идеально для iPhone.

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

Настройки качества и размера

В Figma нет явного ползунка «качество JPG», но вы можете контролировать размер файла через масштаб и формат. Например, экспорт в PNG 1x даёт меньший вес, чем PNG 3x. Также можно использовать внешние оптимизаторы, такие как TinyPNG, после загрузки.

Для социальных сетей или email-рассылок лучше использовать JPG с размером 1x. Это снизит нагрузку на сервер и ускорит загрузку.

Векторный экспорт: SVG и PDF

Векторные форматы незаменимы, когда важна масштабируемость. SVG — стандарт для веба, а PDF — для печати и документов. Экспорт в SVG позволяет вставить иконку или логотип в HTML без потери качества.

Чтобы экспортировать фрейм в SVG:

• Выделите фрейм.
• В панели Export добавьте новое правило.
• Выберите формат SVG.
• Настройте опции: включить или отключить преобразование шрифтов в кривые, сохранять имена слоёв.
• Нажмите Export.

SVG из Figma обычно хорошо оптимизирован, но для production-среды рекомендуется прогонять файл через SVGO или аналогичные инструменты. Это убирает лишние метаданные и снижает размер.

PDF подходит для печати макетов, презентаций или передачи в типографию. При экспорте в PDF Figma сохраняет все слои как вектор, но шрифты могут не встраиваться автоматически. Чтобы избежать проблем, конвертируйте текст в кривые до экспорта (через правую кнопку → «Convert to Outlines»).

Когда использовать вектор?

• Логотипы, иконки, иллюстрации без фотоснимков.
• Макеты, которые будут масштабироваться (например, на телевизорах или проекторах).
• Документы для клиента, где важна чёткость линий.

Не экспортируйте в SVG целые экраны с текстом — это создаст слишком много элементов и замедлит загрузку страницы.

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

Figma интегрирована с workflow разработчиков. Режим «Dev Mode» позволяет копировать стили напрямую из макета. Чтобы скопировать CSS:

• Выделите фрейм или слой.
• Перейдите во вкладку Design справа.
• Нажмите на значок рядом с цветом, шрифтом или отступами.
• Выберите «Copy as CSS».

Скопированный код можно вставить в редактор: он включает background, font-family, padding, border-radius и другие свойства. Однако не все эффекты поддерживаются — например, тени с несколькими слоями могут экспортироваться не полностью.

Альтернатива — публичная ссылка. Нажмите Share в правом верхнем углу, выберите уровень доступа и скопируйте URL. Ссылка ведёт прямо к фрейму, даже если он внутри большого файла. Это удобно для комментариев и проверки.

Распространённые ошибки при экспорте и как их избежать

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

• Экспорт всего холста вместо фрейма. Убедитесь, что выделен именно фрейм, а не родительский объект.
• Пропущенный прозрачный фон. Если в PNG появляется белый фон, проверьте настройки экспорта: должен быть выбран «Transparent».
• Неправильный масштаб. Экспорт в 1x для ретина-экранов вызывает размытие. Используйте 2x или 3x.
• Потеря шрифтов при экспорте в PDF. Конвертируйте текст в кривые, если шрифт нестандартный.
• Слишком большой SVG. Удалите скрытые слои и группы перед экспортом.

Ещё одна ошибка — игнорирование имён фреймов. Figma использует имя фрейма как название файла при экспорте. Если фрейм называется «Frame 1», файл будет «Frame 1.png». Переименуйте фрейм в понятное название: «Header-Mobile», «CTA-Button».

Советы от экспертов: как эффективно работать с фреймами

Профессионалы используют системный подход к экспорту. Вот реальные практики из топовых компаний:

• Используйте компоненты и слоты. Если фрейм — часть компонента, экспортируйте его как вариант. Это упрощает обновление и согласованность.
• Настройте shared-стили. Цвета, тексты и эффекты должны быть из библиотеки. Тогда при экспорте кода значения будут точными.
• Добавьте плагины. Плагины вроде Exporter или Batch Export позволяют экспортировать десятки фреймов за раз с кастомными именами.
• Автоматизируйте через API. Для крупных проектов используйте Figma API, чтобы экспортировать фреймы по расписанию.

Частые вопросы и ответы по экспорту фреймов

• Можно ли экспортировать фрейм с анимацией?
  Прямой экспорт анимации в Figma невозможен. Но вы можете экспортировать кадры как изображения или записать видео через Screen Recording. Для прототипов используйте режим Present и делитесь ссылкой.
• Почему при вставке SVG теряется прозрачность?
  Проверьте, включена ли опция «Transparent» при экспорте. Также некоторые редакторы (например, старые версии Photoshop) некорректно обрабатывают SVG с opacity.
• Как экспортировать только видимую часть фрейма?
  Обрежьте содержимое фрейма с помощью маски или выделите нужную область инструментом Frame. Figma экспортирует только то, что находится внутри границ.
• Можно ли сохранить фрейм в WebP?
  Напрямую Figma не поддерживает WebP, но вы можете экспортировать в PNG, а затем конвертировать через Squoosh.app или ImageMagick.
• Как обновить экспортированный файл без повторного сохранения?
  Используйте Figma Sync или сторонние инструменты вроде Zeplin, которые подключаются к Figma и автоматически обновляют ассеты.

Заключение

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

• Всегда проверяйте, что выделен нужный фрейм, а не родительский слой.
• Используйте 2x/3x для растровых изображений на ретина-экранах.
• SVG идеален для иконок и логотипов — он масштабируется без потерь.
• Публичные ссылки ускоряют коммуникацию с заказчиками и коллегами.
• Интеграция с Dev Mode и API делает процесс передачи ассетов почти бесшовным.