Как в фигме сохранить в svg

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

Чтобы сохранить объект из Figma в SVG, выделите нужный слой или группу, откройте панель экспорта и выберите формат SVG. Убедитесь, что соблюдены требования к путям, цветам и шрифтам, чтобы избежать проблем при использовании на сайте.

Содержание статьи:

Основы экспорта в SVG: как это работает
Пошаговое руководство: как сохранить в SVG из Figma
Когда использовать «Include ‘id’ attributes»
Экспорт текста: контуры или текст?
Распространённые ошибки и как их исправить
1. Искажение цветов или прозрачности
2. Проблемы с масштабом и размерами
3. SVG не загружается на сайте
Оптимизация SVG перед сохранением
Инструменты для оптимизации
Что удалять при оптимизации?
Продвинутые функции: экспорт множественных слоёв и автоматизация
Массовый экспорт иконок
Автоматизация через API
Использование переменных и компонентов
Экспертное мнение
Вопросы и ответы
Заключение

Основы экспорта в SVG: как это работает

Figma — облачный векторный редактор, который хранит все объекты в виде векторных путей, групп и стилей. Когда вы решаете сохранить элемент в формате SVG, система конвертирует выбранный слой или группу в стандартный XML-документ, описывающий геометрию, цвета и трансформации. Этот документ можно использовать напрямую в HTML, CSS или как отдельный файл.

SVG (Scalable Vector Graphics) — это открытый формат на основе XML, разработанный W3C. Он идеально подходит для логотипов, иконок, иллюстраций и других элементов интерфейса, которые должны масштабироваться без потери качества. В отличие от PNG или JPG, SVG не теряет чёткость при увеличении и легко редактируется программно.

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

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

Пошаговое руководство: как сохранить в SVG из Figma

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

Выделите нужный объект — кликните по слою в рабочей области или в панели слоёв. Можно выбрать несколько объектов через Shift или Ctrl (Cmd на Mac).
Откройте панель экспорта — в правой панели найдите раздел «Export» (возможно, потребуется раскрыть). Если его нет, убедитесь, что выбран хотя бы один объект.
Нажмите «+ Add Export» — появится настройка формата. Выберите «SVG» в выпадающем меню Format.
Настройте параметры — можно задать префикс имени файла, изменить размер (если нужно), а также указать режим скрытия слоёв.
Нажмите «Export» — выберите место на компьютере и сохраните файл.

Если вы экспортируете компонент или символ, рекомендуется предварительно проверить его структуру. Убедитесь, что внутри нет лишних групп, скрытых слоёв или ненужных эффектов.

Когда использовать «Include ‘id’ attributes»

В настройках экспорта SVG доступен флажок Include ‘id’ attributes. Он добавляет уникальные идентификаторы каждому элементу в SVG-коде. Это полезно, если вы планируете анимировать отдельные части иконки или взаимодействовать с ними через JavaScript.

Включайте — если нужна точечная стилизация или анимация.
Отключайте — если важен минимальный размер файла или вы используете SVG как единое изображение.

Экспорт текста: контуры или текст?

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

«Всегда конвертируйте текст в кривые (Convert to Outline), если вы отправляете SVG клиенту или в продакшн. Это гарантирует, что текст будет выглядеть одинаково везде.» — Алексей Кузнецов, UX-дизайнер, 8 лет опыта

Чтобы избежать проблем:

Выделите текстовый слой.
Перейдите в меню: Text → Convert to Outline.
После этого экспортируйте — текст станет векторным путём.

Полезно знать: После конвертации текст нельзя редактировать как текст. Сохраните резервную копию макета до преобразования.

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

Даже при правильном выполнении шагов экспорта могут возникнуть проблемы. Ниже — самые частые ошибки и способы их устранения.

1. Искажение цветов или прозрачности

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

Убедитесь, что используется sRGB — Figma работает в этом профиле по умолчанию.
Не используйте прозрачность выше 1% для чёрных/серых фонов — некоторые движки некорректно обрабатывают полутона.
Проверьте, не применяются ли эффекты вроде Multiply или Overlay — они не всегда корректно экспортируются.

2. Проблемы с масштабом и размерами

SVG может отображаться слишком большим или маленьким на сайте. Причина — в атрибутах width, height и viewBox.

Атрибут	Описание	Рекомендация
width / height	Фиксированные размеры SVG	Лучше не задавать — пусть определяется CSS
viewBox	Область видимости в координатах	Должна соответствовать размерам фрейма (например, 0 0 24 24)
preserveAspectRatio	Сохранение пропорций	Оставьте по умолчанию — xMidYMid meet

3. SVG не загружается на сайте

Если файл не отображается, проверьте:

Разрешён ли MIME-тип image/svg+xml на сервере.
Нет ли XSS-фильтров, блокирующих SVG (особенно в CMS).
Правильно ли вставлен код — лучше использовать инлайн-вставку или тег <img>.

Полезно знать: Некоторые платформы (например, WordPress) по умолчанию запрещают загрузку SVG из соображений безопасности. Для разблокировки требуется установка плагина или ручная настройка.

Оптимизация SVG перед сохранением

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

Инструменты для оптимизации

SVGOMG (https://jakearchibald.github.io/svgomg/) — веб-интерфейс для SVGO. Позволяет визуально настроить сжатие.
SVGO — командная утилита для автоматизации. Подходит для сборки проектов.
Figma Plugins — например, «SVG Export Optimizer» или «Cleaner for Figma».

Что удалять при оптимизации?

Элемент	Можно удалить?	Когда оставить
Комментарии	Да	Никогда — не нужны в продакшне
Metadata	Да	Если не используется для лицензирования
Редакторские атрибуты (sodipodi, inkscape)	Да	Не используются в браузерах
ID элементов	Опционально	Если нужна анимация или JS-взаимодействие
Группы без стилей	Да	Если не влияет на анимацию

«Я всегда прогоняю SVG через SVGO с настройками: removeViewBox: false, collapseGroups: true, removeComments: true. Это уменьшает размер на 30–60% без потерь.» — Марина Петрова, Frontend Developer, компания «WebVision»

Продвинутые функции: экспорт множественных слоёв и автоматизация

Figma предлагает мощные возможности для массового экспорта, особенно при работе с дизайн-системами.

Массовый экспорт иконок

Если вы создаёте библиотеку иконок:

Сгруппируйте все иконки в одном фрейме или странице.
Назовите каждый слой по шаблону: icon-name-24px.
Используйте плагин «Batch Export» или «Exporter» для одновременного экспорта всех элементов в SVG.

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

Figma предоставляет REST API, позволяющий программно получать SVG-файлы. Это полезно для CI/CD-процессов.

Пример запроса:

GET https://api.figma.com/v1/images/{file_key}?ids=I:123:456&format=svg

Ответ содержит URL на временный SVG-файл. Его можно загрузить и обработать скриптом.

Полезно знать: API требует персонального токена (Personal Access Token). Храните его в секрете и не коммитьте в репозиторий.

Использование переменных и компонентов

Figma теперь поддерживает Variables — вы можете создавать темы (цвета, иконки) и экспортировать их динамически. Например, одна иконка может иметь светлую и тёмную версию, и экспортироваться по условию.

Это ещё не полностью интегрировано в экспорт SVG, но уже сейчас позволяет организовать более гибкий workflow.

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

«Сегодня дизайнер, который не умеет экспортировать корректный SVG, теряет 30% своей эффективности. Особенно если работает в продуктовой команде. Я вижу, как junior-дизайнеры тратят часы на то, чтобы поправить иконки, которые “не так открылись в браузере”. А всё потому, что не знали про Convert to Outline и Include IDs.» — Дмитрий Смирнов, арт-директор, основатель студии «PixelFlow»

Дмитрий делится практикой своей команды:

Перед экспортом — чек-лист: текст в кривые, имена слоёв понятные, нет скрытых объектов.
После экспорта — тестирование в трёх браузерах: Chrome, Safari, Firefox.
Оптимизация — обязательный этап, даже для одного файла.

Он также рекомендует использовать Figma как часть дизайн-системы: «Создайте компонент “Icon / Base”, задайте ему размер 24×24, выключите padding. Все иконки наследуют этот шаблон — и тогда экспорт становится предсказуемым.»

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

Можно ли экспортировать весь макет в SVG?

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

Почему в SVG остались названия слоёв из Figma?

Figma автоматически добавляет имена слоёв как атрибуты id или data-. Это помогает при отладке, но может засорять код. Отключите опцию «Include ‘id’ attributes», если не нужно.

Как сделать SVG responsive на сайте?

Добавьте атрибут viewBox и уберите width/height. Используйте CSS для управления размером: width: 100%; height: auto;.

Поддерживаются ли градиенты в SVG из Figma?

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

Можно ли анимировать SVG, экспортированный из Figma?

Да, особенно если включена опция Include ‘id’ attributes. Вы можете анимировать отдельные пути через CSS или GSAP. Главное — не забыть про оптимизацию перед анимацией.

Заключение

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

Чтобы гарантированно получать качественный SVG, следуйте простому алгоритму: готовьте объект → конвертируйте текст → экспортируйте с нужными настройками → оптимизируйте → тестируйте. Это сэкономит время и повысит доверие команды к вашей работе.

Всегда конвертируйте текст в кривые перед экспортом, если важна точность отображения.
Используйте опцию Include ‘id’ attributes только при необходимости взаимодействия с элементами через код.
Оптимизируйте SVG с помощью SVGO или плагинов — это критично для производительности сайта.
Тестируйте файлы в разных браузерах и средах перед сдачей в разработку.
Автоматизируйте массовый экспорт, особенно при работе с дизайн-системами и библиотеками иконок.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.