> ## Documentation Index
> Fetch the complete documentation index at: https://tolty.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Экспорт шаблона из Figma

> Простая инструкция, как подготовить шаблон в Figma для загрузки в интерфейс Tolty.

# Чек-лист

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. **Не используйте адаптивные плашки** под текстом — высота и ширина фиксирована.

<Tip>
  Для удобной подготовки шаблона к эспорту используйте чек-лист в Figma. Просто скопируйте его из [этого файла](https://www.figma.com/design/AA7vg4opB87x65rEeyVgei/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B?node-id=0-1\&t=FT4UL80fCyBmN40n-1) и добавьте рядом со своим шаблоном
</Tip>

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

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

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`

## Типы слоев

<Tabs>
  <Tab title="Слои-условия">
    Структура названия слоя:

    `cond_наименование`

    Условный слой – это слой, который должен отображаться на баннере при соблюдении какого-то условия.

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

    <Frame>
      <img src="https://mintcdn.com/tolty/3yfpgdia-88bJGGM/2.png?fit=max&auto=format&n=3yfpgdia-88bJGGM&q=85&s=959ae6f0ed14d4133ddebdfd8747b755" alt="2 Pn" width="1428" height="537" data-path="2.png" />
    </Frame>

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

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

  <Tab title="Текстовые слои">
    Структура названия слоя:

    `text_наименование`

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

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/4.png" alt="4 Pn" />
    </Frame>

    Например, модель товара следует отметить как текстовый слой, потому что значение будет меняться у каждой обложки на основе тега `<model>`.

    <Frame>
      <img src="https://mintcdn.com/tolty/3yfpgdia-88bJGGM/3.png?fit=max&auto=format&n=3yfpgdia-88bJGGM&q=85&s=806df0e174ea2f62772bf9fbb3ec07e6" alt="3 Pn" width="1355" height="486" data-path="3.png" />
    </Frame>

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

    1. **Модель товара (текстом):** текстовый слой с моделью товара может использовать значения тега `<model>` .
    2. **Даты (отправления / прибытия):** если в фиде передаются данные о дате тура или круиза, то на макете баннера можно связать их с нужным тегом.
  </Tab>

  <Tab title="Изображения">
    Структура названия слоя:

    `img_area_наименование`

    Это любое изображение, которое должно меняться при генерации обложек на основе тега в фиде. Слой изображений чаще всего используется для фотографий офферов (тег `<picture>` ).

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/tolty/images/5.png" alt="5 Pn" />
    </Frame>

    <Note>
      Ширина и высота берутся из слоя-картинки. Если вам нужно изменить размеры области для фото, вы можете сделать это в настройках слоя при редактировании шаблона
    </Note>

    Например, фотография товара почти всегда отличается у разных артикулов, поэтому слой с изображением товара следует назвать `img_area_product`, а в настройках интерфейса для этого слоя выбрать тег `<picture>`.

    <Frame>
      <img src="https://mintcdn.com/tolty/3yfpgdia-88bJGGM/6.png?fit=max&auto=format&n=3yfpgdia-88bJGGM&q=85&s=2943f2190b91e4d91b5fa5f8e1fddfa0" alt="6 Pn" width="1469" height="1107" data-path="6.png" />
    </Frame>
  </Tab>
</Tabs>

# Экспорт из Figma

<Steps>
  <Step title="Соберите финальный макет (Frame) нужного размера">
    Это и будет размер вашей итоговой обложки.
  </Step>

  <Step title="Разделите слои внутри макета">
    * В один Frame соберите **статику** – те слои, которые не меняются у разных артикулов при генерации обложек. Чаще всего это фон, рамки, тени, узоры, постоянные логотипы и так далее.
    * **Динамику** (все `text_*`, `cond_*` и `img_area_*`) либо соберите в отдельный Frame, как и статику, либо оставьте такие слои поверх фрейма со статикой.
  </Step>

  <Step title="Подготовьте фон">
    Заливка фона должна быть **в статике** (чтобы общий Frame SVG-шаблона не содержал настройку Fill в правой панели). Если нужен чистый цвет, оставьте цветной прямоугольник в статике.
  </Step>

  <Step title="Экспортируйте общий 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**.

    <Frame>
      <img src="https://mintcdn.com/tolty/3yfpgdia-88bJGGM/images/7.png?fit=max&auto=format&n=3yfpgdia-88bJGGM&q=85&s=dcfb3343e005bd632e876f3f3b175f09" alt="7 Pn" width="714" height="368" data-path="images/7.png" />
    </Frame>

    Сохраните файл, например: `braun_template.svg`.
  </Step>

  <Step title="Экспортируйте статичные слои в PNG">
    * В том же общем Frame теперь скройте всю динамику и **оставьте видимыми только статические слои** (фон, рамки, декоративные элементы и так далее).
    * На панели справа в Export выберите **PNG.**

    Сохраните файл, например: `braun_template_static.png`.

    <Info>
      **Важно:** в PNG не должно быть слоев, которые должны меняться (фото товара, слои-условия, тексты из фида) — это всегда остаётся в SVG.
    </Info>
  </Step>
</Steps>

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

* **Не делайте «резиновые» подложки под текст.** Высота и ширина подложек под текстовым блоком фиксированы.
* **Планируйте переносы.** Заголовки товара часто могут быть длинными. Нормально, если они переносятся на 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` и т.д.<br /><br />В Tolty у каждого слоя задайте правило: Показывать, если `<vendor>` содержит Miele / Bosch… |

После экспорта - переходите к [загрузке шаблона в Tolty](/template-edit)

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

Если сомневаетесь, [напишите нам в Telegram](http://t.me/slavahor) короткое описание проблемы – мы подскажем оптимальный вариант решения.