Экспорт ассетов

d

Главный миф: экспорт — это просто кликнуть «Export»

Ты наверняка думаешь, что экспорт ассетов — самая рутинная часть работы. Выделил слой, нажал кнопку, получил картинку. Всё. Но именно здесь кроется источник большинства багов и несоответствий между макетом и реальным сайтом.

Реальность такова: Figma — не волшебная палочка. Она не умеет «додумывать» за тебя. Каждый пиксель, каждый отступ, каждый цветовой профиль — это твоя ответственность. И если ты не контролируешь процесс, финальный результат будет сюрпризом, и чаще всего неприятным.

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

Ошибка 1: экспорт всего подряд в PNG

Ты когда-нибудь экспортировал иконку в PNG, а потом обнаруживал, что она выглядит размытой на Retina-экранах? Это классика. Многие думают, что PNG — универсальный формат, но это не так.

PNG хранит пиксели. Если иконка векторная, ты теряешь главное её преимущество — чёткость при любом масштабе. Экспорт в PNG имеет смысл только для растровых изображений (фотографий, сложных текстур) или когда нужна полупрозрачность с особыми эффектами, которые не поддерживаются в WebP.

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

Почему «Export as SVG» — не всегда спасение

Ты экспортировал SVG, открыл его в браузере, а там — хаос: кривые сплайны, лишние контуры, непонятные атрибуты. Значит, ты стал жертвой рефакторинга кривых.

Figma пытается упростить геометрию, но иногда упрощение ломает форму. Особенно это заметно на сложных иконках с острыми углами или тонкими линиями. Твоя задача — перед экспортом объединить все составные части одной иконки в один векторный слой (команда Flatten Selection).

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

Три подводных камня, которые сломают вёрстку

Даже идеально экспортированный ассет может испортить жизнь разработчику, если не учесть три вещи. Первая — это координаты внутри файла. Когда ты экспортируешь фрагмент, Figma по умолчанию обрезает его точно по границам контента. Но если внутри есть скрытые слои или направляющие, они могут «расширить» канву.

Вторая — режим наложения. Ты выбрал Multiply для тени, экспортировал в PNG — и получил серый квадрат вместо прозрачной тени. Figma не всегда корректно конвертирует наложение в прозрачность. Нужно или растрировать эффект, или использовать режим Normal.

Третья — DPI. По умолчанию Figma экспортирует в 72 DPI. Для веба это нормально, но если ты готовишь ассеты для печати или для экранов с высокой плотностью пикселей (2x, 3x), необходимо указывать множитель вручную. Не делай этого — и на iPhone ты увидишь пиксельную кашу.

  1. Скрытые слои: проверь, нет ли внутри экспортируемого фрейма элементов с opacity 0 — они всё равно влияют на границы.
  2. Эффекты слоя: все тени, свечения и размытия экспортируются как растровые, если не переведены в вектор.
  3. Группы и фреймы: используй фреймы вместо групп — только они дают чёткие границы экспорта.
  4. Имена слоёв: иконка с именем «Rectangle 1867» — плохо. Назови её «icon-search» — разработчик будет благодарен.
  5. Плагины: используй плагины вроде SVG Export Cleaner или Icon Manager — они удаляют лишние атрибуты из SVG.

Параметры экспорта: скрытые настройки, о которых не пишут в документации

Когда ты открываешь окно Export, видишь только формат, размер и суффикс. Но есть нюансы, которые превращают обычный экспорт в профессиональный. Например, опция «Include “id” attribute» — если её снять, SVG станет чище и легче.

Ещё один приём: если ты экспортируешь несколько вариантов одной иконки (например, 1x, 2x, 3x), используй суффиксы @1x, @2x, @3x. Figma автоматически подставит размер, но имя файла останется логичным. Без суффиксов три одинаковых имени вызовут путаницу.

И последнее: никогда не экспортируй весь макет целиком одной картинкой. Только отдельные фреймы или компоненты. «Export» на весь файл порождает монстрообразный PNG, который никто не сможет использовать. Фронтенд-разработчик проклянёт тебя и пойдёт резать скриншоты в Фотошопе.

Как проверить, что ассет готов к передаче разработчику

Ты экспортировал, отправил, а через день вернулись с вопросом: «Почему иконка не встаёт по сетке?». Знакомо? Чтобы этого избежать, введи ритуал финальной проверки.

Открой экспортированный файл в браузере (Chrome или Firefox) и посмотри на него при разных увеличениях. Если это SVG — проверь, не появились ли артефакты на стыках кривых. Если PNG — посмотри на прозрачность: нет ли белого ореола вокруг объекта.

Второй этап — проверь имя файла. Название должно быть на латинице, без пробелов, с указанием размера. Например: «ico-arrow-down-24.svg». Длинные русские буквы или CamelCase без дефисов — это боль для разработчика.

Заключение: мастерство экспорта — это внимание к деталям

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

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

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

Добавлено: 23.04.2026