Skip to main content

​
Чек-лист

  1. Имена слоёв на английском, без пробелов: text_title, cond_free_delivery, img_area_main.
  2. Типы слоёв:
    • text_* — редактируемый текст или значения из фида.
    • img_area_* — область для фото из фида.
    • cond_* — слой, который показывается / скрывается по правилу в интерфейсе, в том числе на основе данных из фида.
  3. При экспорте SVG следует оставлять видимыми только динамические слои, то есть те, которые адаптируются под каждый артикул (text_*, img_area_*, cond_*). Статичные слои нужно скрыть.
  4. При экспорте PNG следует скрыть все динамичные слои, оставив только статичные элементы (фон, рамки, тени и т.д.).
  5. Экспорт SVG с настройками:
    • _Color profile: _Same as file (sRGB)
    • Image resampling: Detailed
    • Включены настройки Ignore overlapping layers и Include “id” attribute.
    • Отключены настройкиInclude bounding box и Outline Text.
  6. Настройки шаблона в Tolty: загрузите SVG → добавьте PNG со статикой → нажмите «Получить данные» → свяжите слои с полями фида.
  7. Не используйте адаптивные плашки под текстом — высота и ширина фиксирована.
Для удобной подготовки шаблона к эспорту используйте чек-лист в Figma. Просто скопируйте его из этого файла и добавьте рядом со своим шаблоном

​
Названия слоев

​
Общие правила

  1. Используйте названия на английском и без пробелов. Вместо пробела – нижнее подчеркивание: text_product_name, vendor_logo.
  2. Если слой связан с полем фида – называйте его также, как поле, чтобы легче было связать с тегом фида в интерфейсе. Например:
    • бренд товара → text_vendor
    • цена → text_price
    • рейтинг → text_rating
    • срок доставки → text_delivery
  3. Уникальность. Каждый слой — уникальное имя. Не дублируйте text_title в трёх местах.
  4. Текстовый слой: начинайте с text_ — для такого слоя в интерфейсе будут доступны настройки текста.
  5. Условие: начинайте с cond_ — например, cond_free_delivery, cond_brand_miele. Для слоя-условия в интерфейсе можно включить отображение на основе данных из фида.
  6. Фото / картинка из фида: используйте img_area_ — например, img_area_product. Для такого слоя будет доступна загрузка изображения из фида.
Пример хорошего набора имён: text_title, text_price, text_vendor, img_area_hotel, cond_free_delivery, cond_promo_badge

​
Типы слоев

Структура названия слоя:cond_наименованиеУсловный слой – это слой, который должен отображаться на баннере при соблюдении какого-то условия.Например, если необходимо отображать на баннере страну-производитель, то нужно добавить на макет шаблона слои со всеми возможными странами и настроить в интерфейсе их отображение в зависимости от значения в теге фида.
2 Pn

​
Примеры использования:

  1. Бренд товара: слой с логотипом бренда товара может отображаться в зависимости от значения в теге <vendor> .
  2. Доставка: слой c лейблом «Забери сегодня» отображается, если в фиде доставка товара 0-1 дней.

​
Экспорт из Figma

1

Соберите финальный макет (Frame) нужного размера

Это и будет размер вашей итоговой обложки.
2

Разделите слои внутри макета

  • В один Frame соберите статику – те слои, которые не меняются у разных артикулов при генерации обложек. Чаще всего это фон, рамки, тени, узоры, постоянные логотипы и так далее.
  • Динамику (все text_*, cond_* и img_area_*) либо соберите в отдельный Frame, как и статику, либо оставьте такие слои поверх фрейма со статикой.
3

Подготовьте фон

Заливка фона должна быть в статике (чтобы общий Frame SVG-шаблона не содержал настройку Fill в правой панели). Если нужен чистый цвет, оставьте цветной прямоугольник в статике.
4

Экспортируйте общий Frame в формате SVG (только динамические слои)

  • Скройте все статичные слои и оставьте видимыми только text_*, img_area_*, cond_*.
  • Выделите общий Frame макета и на панели справа выберите Export в SVG со следующими настройками:
    • _Color profile: _Same as file (sRGB)
    • Image resampling: Detailed
    • Включены настройки Ignore overlapping layers и Include “id” attribute.
    • Отключены настройки Include bounding box и Outline Text.
7 Pn
Сохраните файл, например: braun_template.svg.
5

Экспортируйте статичные слои в PNG

  • В том же общем Frame теперь скройте всю динамику и оставьте видимыми только статические слои (фон, рамки, декоративные элементы и так далее).
  • На панели справа в Export выберите PNG.
Сохраните файл, например: braun_template_static.png.
Важно: в PNG не должно быть слоев, которые должны меняться (фото товара, слои-условия, тексты из фида) — это всегда остаётся в SVG.

​
Дизайн‑советы, чтобы макет не «ломался»

  • Не делайте «резиновые» подложки под текст. Высота и ширина подложек под текстовым блоком фиксированы.
  • Планируйте переносы. Заголовки товара часто могут быть длинными. Нормально, если они переносятся на 2 строки.
  • Шрифты. Используйте системные / распространённые семейства. Вы можете загрузить пользовательский шрифт в настройках шаблона в формате TTF.
  • Контраст. Текст на сложных фонах читается хуже. Используйте цвета, которые подходят под любые товары.

​
Примеры использования слоев

Что хотим вывестиРекомендуемое имя слояПоле из фида (пример)Как сделать
Модель товара (текстом)text_model<model>Обозначьте текстовый слой в макете. В Tolty свяжите text_model с тегом <model>. Заложите перенос на 2 строки, без «резиновых» плашек
Бренд товара (текстом)text_vendor<vendor>Текстовый слой. Свяжите в интерфейсе Tolty с <vendor>
Бренд товара (логотипом)cond_brand_<name> (по отдельному слою на на каждый бренд)<vendor>В Figma добавьте все логотипы как отдельные SVG‑слои: cond_brand_miele, cond_brand_bosch и т.д.

В Tolty у каждого слоя задайте правило: Показывать, если <vendor> содержит Miele / Bosch…
После экспорта - переходите к загрузке шаблона в Tolty

​
Нужна помощь?

Если сомневаетесь, напишите нам в Telegram короткое описание проблемы – мы подскажем оптимальный вариант решения.