Как сделать svg в фигме

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

Зачем нужны SVG и почему их стоит использовать в Figma

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

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

Использование SVG в проектах повышает производительность сайта. Например, иконочный набор в формате SVG может весить в 3–5 раз меньше, чем аналогичный спрайт PNG. Кроме того, SVG можно стилизовать через CSS, изменять цвет, размер и даже анимировать без перезагрузки изображения.

Подготовка макета к экспорту в SVG

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

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

Если в объекте есть текст, преобразуйте его в кривые (outline). Для этого выделите текстовый слой и нажмите Ctrl+Shift+O (Cmd+Shift+O на Mac). Это предотвратит проблемы со шрифтами при открытии SVG в браузере. Однако помните: после преобразования текст нельзя редактировать.

Упростите структуру слоёв. Удалите скрытые и пустые группы, объедините перекрывающиеся фигуры, где это возможно. Избегайте вложенных эффектов, таких как тени и размытия — они не всегда корректно конвертируются в SVG.

1. Выделите нужный объект или создайте для него отдельный фрейм.
2. Преобразуйте текст в контуры (Ctrl+Shift+O).
3. Убедитесь, что все элементы — векторные (не импортированные растровые изображения).
4. Удалите лишние группы, слои и эффекты.
5. Проверьте, что объект находится в пределах границ фрейма без переполнения.

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

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

Шаг 1: Выделите объект

Кликните по нужному слою, группе или фрейму. Лучше всего использовать отдельный фрейм с фиксированными размерами — например, 24×24 px для иконки. Это гарантирует правильные размеры viewBox в SVG.

Шаг 2: Откройте панель экспорта

В правой панели свойств найдите раздел «Export» (Экспорт). Нажмите «+» или выберите существующий пресет. Появится окно настройки экспорта.

Шаг 3: Настройте параметры экспорта

• Формат: выберите «SVG».
• Содержимое: оставьте «Selection», если экспортируете выделенный объект.
• Scale: установите 1x — масштаб не влияет на вектор, но важен для метаданных.
• Include ‘id’ attributes: снимите галочку, если не планируете использовать ID в JavaScript.
• Outline stroke: включите, если хотите, чтобы обводки стали частью контура (полезно для стабильности отображения).

Шаг 4: Экспортируйте файл

Нажмите «Export» и сохраните файл на компьютер. Figma создаст .svg-файл, готовый к использованию.

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

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

Ошибка 1: Экспорт целого документа вместо отдельного элемента

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

Решение: всегда выделяйте нужный объект перед экспортом. Используйте фреймы как контейнеры.

Ошибка 2: Наличие растровых изображений

Если в составе объекта есть импортированный PNG или JPG, Figma встроит его в SVG как base64-строку. Это сильно увеличивает размер файла.

Решение: замените растровые элементы на векторные или экспортируйте их отдельно.

Ошибка 3: Слишком сложная иерархия слоёв

Figma сохраняет структуру групп, что приводит к множеству вложенных в SVG. Это затрудняет чтение и редактирование кода.

Решение: перед экспортом «Flatten» (объедините) группы, где это возможно. Используйте плагины вроде «SVGOMG» или «Cleaner for Figma».

Ошибка 4: Использование эффектов, несовместимых с SVG

Градиенты, тени, размытия — не все эффекты корректно конвертируются. Особенно это касается внутренних теней и noise.

Решение: минимизируйте использование эффектов. Градиенты оставляйте, но проверяйте результат в браузере.

Оптимизация SVG для вёрстки и производительности

Экспорт из Figma — это только начало. Чтобы SVG был действительно готов к production, его нужно оптимизировать.

Первый шаг — проверка кода. Откройте .svg-файл в текстовом редакторе. Вы увидите XML-структуру. Удалите ненужные атрибуты: fill, stroke, style, если они дублируют друг друга. Также можно убрать метаданные, комментарии и атрибуты вроде sketch:pinLocked.

Используйте онлайн-инструменты для минификации. Самый популярный — SVGOMG (https://jakearchibald.github.io/svgomg/). Он позволяет визуально настроить оптимизацию: удалить viewbox (не нужно), округлить координаты, упростить пути.

Для командной работы полезны плагины Figma. Например, «SVG Export+» позволяет экспортировать сразу несколько иконок с префиксами, удалять ID, очищать стили. «Iconify» интегрируется с одноимённой библиотекой иконок.

Рекомендации по оптимизации:

• Округляйте числа в координатах до 2 знаков после запятой.
• Удаляйте атрибуты width и height, если они дублируют viewBox.
• Используйте относительные единицы — лучше задавать размеры через CSS.
• Объединяйте одинаковые стили в группы.
• Избегайте inline-стилей — они мешают переопределению через CSS.

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

Анна Ковалёва, арт-директор цифрового агентства «Нейрон», 12 лет опыта

«Сегодня SVG — стандарт де-факто для веб-графики. Мы используем Figma как единое рабочее пространство: дизайнеры создают иконки, а разработчики получают чистый SVG. Ключевой момент — процесс согласования. Мы внедрили чек-лист: текст в контурах, нет растра, один фрейм — одна иконка. Это сократило количество правок на 70%».

«Также мы активно используем переменные в Figma. Например, цвет иконки задаётся через variable, а при экспорте он заменяется на currentColor. Это позволяет менять цвет иконки прямо в CSS, не трогая SVG».

Рекомендация от Анны:

• Создайте библиотеку компонентов для иконок.
• Используйте автоматизацию: плагины + CI/CD для генерации SVG-спрайтов.
• Тестируйте SVG в разных браузерах, особенно в Safari и IE11, если поддержка нужна.

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

Заключение

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

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

• Всегда экспортируйте из отдельного фрейма или компонента.
• Преобразуйте текст в контуры перед экспортом.
• Оптимизируйте SVG с помощью SVGOMG или плагинов Figma.
• Избегайте растровых изображений и сложных эффектов.
• Тестируйте SVG в разных браузерах и средах.