Figma и экспорт SVG

SVG (Scalable Vector Graphics) — основной формат для векторной графики в вебе. В отличие от растровых изображений, SVG масштабируется без потери качества, поддерживает стилизацию через CSS и может управляться через JavaScript. Библиотека Snap.svg работает напрямую с SVG-элементами, поэтому корректный экспорт из Figma становится ключевым этапом.

Figma выступает как инструмент проектирования, а Snap.svg — как средство программного управления графикой. Качество и структура SVG-файла напрямую влияют на удобство дальнейшей работы в коде.

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

Перед экспортом важно правильно структурировать документ:

1. Именование слоёв

  • Используются осмысленные имена: button-bg, icon-play, chart-line
  • Эти имена могут быть преобразованы в id или class в SVG
  • Избегается дублирование имён

2. Группировка элементов

  • Связанные элементы объединяются в группы (Group)
  • Это упрощает работу с ними через Snap.svg (select, selectAll)

3. Удаление лишнего

  • Скрытые слои удаляются
  • Неиспользуемые элементы исключаются
  • Эффекты (blur, shadow), не поддерживаемые SVG, заменяются или убираются

4. Преобразование текста

  • Текст либо:

    • оставляется текстом (если нужен доступ через JS)
    • либо переводится в кривые (Outline Stroke), если важен точный внешний вид

Экспорт SVG из Figma

Основной процесс:

  1. Выделение нужного элемента или фрейма
  2. В панели справа выбор формата SVG
  3. Нажатие Export

Важные настройки экспорта:

  • Outline text — преобразует текст в кривые
  • Include “id” attribute — сохраняет имена слоёв
  • Simplify stroke — упрощает линии
  • Minify — уменьшает размер файла (может ухудшить читаемость)

Структура экспортированного SVG

Пример базового SVG:

<svg width="100" height="100" viewBox="0 0 100 100">
  <g id="icon-play">
    <polygon points="30,20 80,50 30,80" fill="#000"/>
  </g>
</svg>

Ключевые элементы:

  • <svg> — корневой контейнер
  • <g> — группа элементов
  • <path>, <rect>, <circle> — примитивы
  • Атрибуты: fill, stroke, transform

Оптимизация SVG после экспорта

SVG из Figma часто содержит избыточные данные:

Проблемы:

  • Лишние transform
  • Избыточные группы <g>
  • Повторяющиеся атрибуты
  • Ненужные defs

Решения:

  • Использование оптимизаторов (например, SVGO)

  • Ручная очистка:

    • объединение групп
    • удаление лишних атрибутов
    • упрощение путей

Пример до оптимизации:

<g transform="translate(0,0)">
  <g>
    <path d="..." fill="#000000"/>
  </g>
</g>

После:

<path d="..." fill="#000"/>

Подключение SVG в проект

Варианты:

  1. Inline SVG (рекомендуется для Snap.svg)
<svg id="scene"></svg>
  1. Загрузка через Snap.svg
Snap.load("image.svg", function(fragment) {
    Snap("#scene").append(fragment);
});

Работа с экспортированным SVG в Snap.svg

После загрузки SVG:

var s = Snap("#scene");
var playButton = s.select("#icon-play");

Основные операции:

Изменение атрибутов:

playButton.attr({
    fill: "#ff0000"
});

Анимация:

playButton.animate({
    transform: "scale(1.2)"
}, 300);

Работа с группами:

var elements = s.selectAll("path");
elements.forEach(function(el) {
    el.attr({ stroke: "#000" });
});

Проблемы экспорта и их решение

1. Отсутствие id

Figma не всегда корректно экспортирует id.

Решение:

  • Ручное добавление id в SVG
  • Использование атрибутов data-*

2. Сложные path

Figma может создавать чрезмерно сложные пути.

Решение:

  • Упрощение в редакторе
  • Использование инструментов оптимизации

3. Неправильные координаты (viewBox)

Иногда SVG имеет смещение или неправильный масштаб.

Решение:

  • Проверка viewBox
  • Приведение к виду:
viewBox="0 0 width height"

Практика: подготовка SVG для интерактивной анимации

Пример сценария:

Иконка кнопки с анимацией при наведении.

Шаги в Figma:

  • Разделение элементов: фон, иконка
  • Присвоение имён: btn-bg, btn-icon

Экспорт SVG

Использование в Snap.svg:

var s = Snap("#scene");

Snap.load("button.svg", function(f) {
    s.append(f);

    var bg = s.select("#btn-bg");
    var icon = s.select("#btn-icon");

    bg.hover(
        function() {
            icon.animate({ transform: "scale(1.2)" }, 200);
        },
        function() {
            icon.animate({ transform: "scale(1)" }, 200);
        }
    );
});

Лучшие практики

  • Минимизировать вложенность групп
  • Давать осмысленные имена слоям
  • Избегать эффектов, не поддерживаемых SVG
  • Использовать viewBox вместо фиксированных размеров
  • Проверять SVG в браузере перед интеграцией
  • Делать SVG “чистым” перед использованием в коде

Автоматизация процесса

Для повышения эффективности:

  • Использование плагинов Figma:

    • SVG Export Cleaner
    • SVGO интеграции

  • Настройка пайплайна сборки:

    • автоматическая оптимизация SVG
    • добавление id

Связь дизайна и кода

Грамотно подготовленный SVG позволяет:

  • точно соответствовать дизайну
  • легко управлять элементами через Snap.svg
  • реализовывать сложные анимации без переписывания структуры

Ошибки на этапе экспорта приводят к усложнению кода, поэтому дисциплина при работе в Figma напрямую влияет на качество реализации в JavaScript.

Оглавление