Email-рассылки остаются одним из самых результативных инструментов в арсенале маркетолога. Но с 30 мая 2025 года в России начали действовать новые правила обработки персональных данных — и теперь за несоблюдение требований по получению согласия на рассылку грозит значительно более крупный штраф.

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

## Какие законы нужно соблюдать, чтобы не получить штраф 

Чтобы отправлять email-рассылки законно, важно соблюдать сразу два закона: о персональных данных ([**ФЗ-152**](https://www.consultant.ru/document/cons_doc_LAW_61801/)) и о рекламе ([**ФЗ-38**](https://www.consultant.ru/document/cons_doc_LAW_61801/)). Email-адрес относится к персональным данным, и его можно использовать — хранить, обрабатывать, отправлять письма — только если человек дал на это добровольное и осознанное согласие. Для рекламных писем это согласие должно быть дано заранее. Без него любая рассылка будет считаться спамом и может привести к штрафу.

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

<Img
img="/api/uploads/pixcraft_obrabotka_dannyh_eksmo_7d202b8ad5.png"
alt="Обработка персональных данных"
/>

Законы (в частности, ст.9 и ст.15 ФЗ-152 и ст.18 закона «[**О рекламе**](https://www.consultant.ru/document/cons_doc_LAW_58968/)») требуют, чтобы согласие было подтверждено — то есть рассылка разрешена только в случае, если у вас есть доказательство, что человек действительно подписался. Также вы обязаны прекратить рассылку и удалить данные пользователя по его первому запросу.

Рассыльщик обязан учитывать случаи, когда пользователь передумал и больше не хочет получать письма. По [**закону**](https://www.consultant.ru/document/cons_doc_LAW_61801/6c94959bc017ac80140621762d2ac59f6006b08c/#:~:text=2,%D1%87%D0%B0%D1%81%D1%82%D0%B8%202%20%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8%2010%20%D0%B8) человек имеет право в любой момент отозвать своё согласие, и тогда оператор должен немедленно прекратить обработку его данных и удалить адрес из рассылки. Поэтому каждое письмо должно содержать понятную и доступную ссылку для отписки. Если пользователь напрямую обратился с просьбой удалить его из базы, это необходимо сделать без промедления.

<Img
img="/api/uploads/obrabotka_otpiska_c1237a8b55.png"
alt="Отписка от рассылки"
src="Отписка от рассылки в емейле"
/>

Согласно [**статье 5 Федерального закона №152-ФЗ**](https://www.consultant.ru/document/cons_doc_LAW_61801/96fbc469f91f57235cc842a85e0516a99f23dc85/), хранить персональные данные — включая email-адреса — можно только столько, сколько это действительно необходимо для достижения цели обработки. Если пользователь отписался или рассылка больше не актуальна, данные нужно удалить или обезличить. Хранить их «на всякий случай» нельзя. Допускается сохранение технической записи о подписке (например, даты, IP-адреса, источника), но только до тех пор, пока этот email-адрес используется. После отзыва согласия даже такие записи должны быть удалены из рабочей базы.

Важно понимать, что обязанность доказать факт получения согласия лежит на операторе. Поэтому рекомендуется фиксировать все действия, связанные с подпиской: дату и время, IP-адрес, текст согласия и способ, которым оно было выражено (например, установка галочки или подтверждение через письмо). Такая информация может оказаться необходимой при жалобах или проверках и подтвердит, что вы действовали в рамках закона.

## Что считается нарушением при сборе email-адресов

Нарушением считается любая ситуация, когда email-адреса собираются или используются без понятного и подтверждённого согласия пользователя. Вот несколько типичных примеров, за которые компании чаще всего получают штрафы:

**1. Рассылка без согласия.** Это самая частая ошибка. Например, компания начинает рассылать письма на адреса, собранные из чужой базы или найденные в открытом доступе — без того, чтобы человек явно разрешил отправку. Если при проверке оператор не может доказать, что подписка была добровольной, такая рассылка признаётся незаконной.

**2. Скрытые или предустановленные галочки.** Согласие должно быть осознанным. Поэтому заранее проставленные чекбоксы, расплывчатые формулировки вроде «согласен со всеми условиями» или «хочу получать новости» — это плохая практика. Такие соглашения легко оспорить, потому что они не соответствуют требованиям прозрачности и однозначности.

<Img
img="/api/uploads/soglasie_na_obrabotku_dannyh_d49b925122.png"
alt="Политика конфиденциальности"
src="Здесь галочка поставилась автоматически"
/>

**3. Нет уведомления при косвенном получении emai-адреса.** По [**ст.18.3 ФЗ-152**](https://www.consultant.ru/document/cons_doc_LAW_61801/cbf4e15b7c330f9372e876cdf2bc928bad7950ef/#:~:text=3,%D1%81%D1%83%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%83%20%D0%BF%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D1%85%20%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85%20%D1%81%D0%BB%D0%B5%D0%B4%D1%83%D1%8E%D1%89%D1%83%D1%8E%20%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8E), если вы получили емейл не напрямую от пользователя (например, из открытой базы), вы обязаны заранее — до начала обработки — уведомить человека, откуда вы взяли его данные, зачем их используете и как он может отказаться. Если это не сделать, вы нарушаете закон.

**4. Покупка или обмен базами.** Приобретение готовой базы email-адресов без подтверждённого согласия абонентов — грубое нарушение (нет правовых оснований для обработки данных таких людей). Аналогично, обмен списками рассылки без предварительного согласия каждого абонента также запрещён.

## Какие возможно получить штрафы при нарушениях 

[**Новые поправки**](https://www.consultant.ru/document/cons_doc_LAW_490308/3b904c06ca00c18b687ec94295a0a967ddc5cce7/#:~:text=%D0%A3%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B8%D0%BB%D0%B8%20%20%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B%20%D1%88%D1%82%D1%80%D0%B0%D1%84%D0%BE%D0%B2%20%D0%BF%D0%BE,%D0%B6%D0%B5%20%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B5%2C%20%D1%87%D1%82%D0%BE%20%D0%B8%20%D1%8E%D1%80%D0%BB%D0%B8%D1%86%D0%B0), вступившие в силу 30.05.2025, значительно ужесточают [**штрафы**](https://www.consultant.ru/legalnews/28492/#:~:text=%D0%A8%D1%82%D1%80%D0%B0%D1%84%20%D0%B7%D0%B0%20%D0%BD%D0%B0%D1%80%D1%83%D1%88%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%BE%D0%B1%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8%20%D1%83%D0%B2%D0%B5%D0%B4%D0%BE%D0%BC%D0%B8%D1%82%D1%8C,%D0%B4%D0%BB%D1%8F%20%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D1%80%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85%20%D0%BE%D1%80%D0%B3%D0%B0%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B9%20%D0%B8%20%D0%98%D0%9F) за нарушения в сфере персональных данных. В частности:

- **Общие нарушения (ст.13.11 КоАП).** Для организаций штрафы выросли до 150–300 тыс. руб. (против прежних 60–100 тыс.). Для должностных лиц и предпринимателей — до 50–100 тыс. руб., а для физических лиц — до 10–15 тыс. руб. За повторное нарушение санкции ещё выше (вплоть до 500–1000 тыс. руб. для организаций).

- **Специальные составы нарушений.** Законом введены крупные штрафы за несоблюдение обязанностей в сфере ПД: например, за неуведомление Роскомнадзора о намерении обрабатывать данные — штраф 100–300 тыс. руб., а за неуведомление об утечке ПД — 1–3 млн руб. (для коммерческих компаний и ИП). За массовую утечку данных (пострадало тысячи людей) штрафы доходят до сотен миллионов (или процент от оборота). При этом исключена «половинная скидка» за быстрый платёж — [**платить придётся полностью**](https://www.consultant.ru/document/cons_doc_LAW_490308/3b904c06ca00c18b687ec94295a0a967ddc5cce7/#:~:text=%D0%98%D1%81%D0%BA%D0%BB%D1%8E%D1%87%D0%B8%D0%BB%D0%B8%20%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%B7%D0%B0%D0%BF%D0%BB%D0%B0%D1%82%D0%B8%D1%82%D1%8C%20%D1%88%D1%82%D1%80%D0%B0%D1%84%20%D1%81,%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D0%B9%20%D1%81%D0%BA%D0%B8%D0%B4%D0%BA%D0%BE%D0%B9).

- **Ответственность за спам (рекламные рассылки).** Cт.14.3 влечёт штрафы за рассылку рекламы без согласия. Сейчас компании могут получить штраф от 300 тыс. до 1 млн руб., а их руководители — до 100 тыс. руб. за первый факт.

<Img
img="/api/uploads/obrabotka_dannyh_6cee596d76.png"
alt="Штрфы за нарушения при сборе персональных данных"
/>

## Практические советы для email-маркетологов

- **Используйте явное согласие (Opt-In).** На сайте или в форме подписки задайте отдельный чекбокс на рассылку, не предустанавливайте галочку и чётко укажите цель (новости, акции и т.п.). Рядом должна быть ссылка на «Политику обработки персональных данных» с описанием, как вы будете использовать email.

- **Разделите согласия.** Если вы одновременно собираете согласие на обработку ПД и на маркетинговые рассылки, оформляйте их раздельно. Например, сначала пользователь ставит галочку «Согласен с Политикой конфиденциальности», а потом — «Хочу получать рассылку».

<Img
img="/api/uploads/obrabotka_dannyh_tsum_a0bdd26642.png"
alt="Выбор при подписке"
/>

- **Применяйте Double Opt-In.** Настройте автоматическую рассылку письма с просьбой подтвердить подписку. Так вы убережётесь от «случайных» подписок и получите «железное» доказательство добровольного согласия каждого адресата.

- **Документируйте факт согласия.** Храните время и способ получения согласия (например, запись о клике по кнопке «Подтвердить»). Это поможет защититься при проверках. Указывайте в системе, кем и когда даны все согласия.

- **Обеспечьте лёгкую отписку.** В каждом письме вставляйте понятную ссылку или инструкцию для отказа. При запросе пользователя удаляйте его email из списка без задержек. Регулярно очищайте базу от неактивных адресов.

- **Следите за обновлениями.** Законодательство меняется — проверяйте новости Роскомнадзора и ФАС. При необходимости вносите изменения в текст согласий, протоколы работы, политику безопасности.

- **Не покупайте чужие базы.** Рассылки на купленные или собранные не самостоятельно контакты — риск крупного штрафа. Гораздо безопаснее медленно наращивать подписчиков честным путём, соблюдая все правила.

- **Повышайте безопасность.** Используйте защищённые системы хранения и шифрование персональных данных, в том числе email-адресов, чтобы избежать утечки. Пропишите внутренние процедуры по соблюдению ФЗ-152 и обучите команду.

## Заключение 

С 30 мая 2025 года требования к email-рассылкам стали строже, а штрафы — заметно выше. Важно особенно внимательно подходить к сбору и хранению согласий, правильно оформлять формы подписки и давать пользователю возможность легко отписаться. Если вы соблюдаете эти правила, рассылка будет работать эффективно и без юридических рисков.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.


С 30 мая 2025 вступили в силу новые правила рассылок. Узнайте, как легально собирать email-согласие и избежать штрафов.

small_pixcraft-personal-data-emails.png

thumbnail_pixcraft-personal-data-emails.png

pixcraft-personal-data-emails.png

Как правильно получить согласие на email-рассылку в 2025 году

AMP в email-рассылках — это способ добавить в письмо интерактив: формы, карусели, смену контента без перехода на сайт. Однако, как и в случае с обычными html-письмами, здесь есть свои особенности отображения и поведения, которые важно учитывать при верстке и тестировании.

В этой статье разбираем 8 распространённых проблем, с которыми сталкиваются верстальщики при работе с AMP-письмами, — и показываем, как их решать на практике: с примерами, кодом и пояснениями.

## 1. Проблема AMP-карусели в Gmail на iOS

При использовании стандартного компонента ```<amp-carousel>``` в Gmail на iOS возникает неприятный баг — при переключении слайдов письмо резко прокручивается вверх. Проблема известна давно, но поведение так и не было исправлено.

**Решение:** Не использовать ```<amp-carousel>```, а реализовать его имитацию с помощью состояний (amp-bind). Ниже — рабочий пример:

```html
<amp-state id="carouselState">
  <script type="application/json">
    {
        "index": 0
    }
  </script>
</amp-state>

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>

<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>
```


## 2. Проблема начальных AMP-состояний в Mail.ru

Начальное состояние, заданное через ```<amp-state>```, не применяется при загрузке письма — оно подставляется только после действия пользователя (setState). Mail.ru же полностью игнорирует содержимое ```<amp-state>```. Рассмотрим на примере:

```html
<amp-state id="myItem">
  <script type="application/json">
    {
        "el":"some value"
    }
  </script>
</amp-state>
<span [text]="myItem.el"></span>
<button on="tap:AMP.setState({})">Кнопка</button>
```


При загрузке письма мы не увидим текста. В Gmail он появится только после клика на кнопку. Mail.ru же после клика на кнопку вместо текста отобразит null.

**Решение:**

**1.** Добавьте значение по умолчанию в HTML, чтобы текст отображался сразу.

```HTML
<span [text]="myItem.el">some value</span>
```

**2.** Для корректной работы в Mail.ru, нициализируйте состояние вручную по действию пользователя. Не используйте ```<amp-state>``` для начальной инициализации, а задайте значение через ```setState```: 

```HTML
<button on="tap:AMP.setState({ myItem: { el: 'some value' } })">
  Кнопка
</button>
<div [text]="myItem.el"></div>
```

## 3. Ограничение длины выражений в Mail.ru

Ещё одна особенность AMP в Mail.ru — ограничение на сложность/длину выражений, используемых в bind. Максимальный размер выражения — 100 единиц. Если выражение превышает этот лимит, Mail.ru выдаёт ошибку вида:

```JavaScript
amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.
```

С такой ошибкой мы столкнулись при [**разработке игры «Змейка» в AMP-письме**](https://pixcraft.io/ru/blog/zmejka-v-pisme-kak-my-s-altcraft-sozdali-igru-dlya-amp-rassylki): вычисления для движения и логики игры требовали выражений длиннее 100, что приводило к их блокировке на стороне Mail.ru.

**Решение:**

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

## 4. Переменные ESP и шаблоны AMP (конфликт синтаксиса)

Многие ESP (сервисы рассылок) позволяют вставлять переменные персонализации или условные конструкции в шаблон письма. Нередко синтаксис таких переменных пересекается с синтаксисом шаблонов AMP (amp-mustache), которые используют двойные фигурные скобки ```{{ }}```. Это приводит к тому, что платформа-рассыльщик «подменяет» или искажает AMP-шаблон, считая его своими переменными. В результате письмо может сломаться или вовсе не отправиться (если ESP сочтёт шаблон некорректным).

**Решения:**

[**Altcraft**](https://altcraft.com/ru): В Altcraft шаблоны тоже используют фигурные скобки, поэтому для обозначения AMP-шаблона нужно добавить префикс $. Например, вместо ```{{success}}``` пишем ```${{success}}```. Символ $ предотвратит интерпретацию платформой, и на выходе в отправленном письме останется чистый ```{{success}}``` для AMP. То есть Altcraft пропустит такой фрагмент, позволив AMP-механизму обработать его уже на стороне клиента.

Пример: 

```<template type="amp-mustache">$\{\{success\}\}</template>``` — Altcraft не тронет содержимое внутри ```$ {{ }}```, а AMP при отображении увидит стандартный ```{{success}}```.

**Mailganer:** В Mailganer для таких случаев предусмотрены специальные теги ```{% verbatim %} ... {% endverbatim %}```. Любой код, заключённый в ```{% verbatim %}```, платформа не будет менять. Поэтому AMP-шаблон можно обернуть этими тегами. 

**Пример:**

```HTML
 <template type="amp-mustache">
  {% verbatim %}{{success}}{% endverbatim %}
</template>
```

**Unisender:** В Unisender, наоборот, ничего дополнительно делать не нужно, так как внутри тега ```<template>``` платформа вообще не пытается подставлять свои переменные. Unisender по умолчанию игнорирует содержимое ```<template type="amp-mustache">```, полагая, что это для клиентской стороны. Это упрощает жизнь — можно прямо писать ```{{variable}}``` — но есть ограничение: вы не сможете вставить персонализацию внутрь ```amp-mustache```. 

## 5. Особенности работы тёмной темы в разных клиентах

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

**Разберем подробнее:**

**Mail.ru.** Не перекрашивает AMP-письма сам, но поддерживает кастомные стили для тёмной и светлой темы. Добавьте в ```<head>```:

```HTML
<meta name="supported-color-schemes" content="light dark">
```
В стилях используйте селекторы с префиксом:

```:root[data-ogsc]``` — для тёмной темы,
```:root:not([data-ogsc])``` — для светлой.

**Gmail на Android.** Перекрашивает светлые письма в тёмные автоматически.

**Gmail на iOS.** Не перекрашивает письмо и не даёт его кастомизировать. 

**Yahoo.** Поведение похоже на Gmail: на Android — автоинверсия, на iOS — письмо остаётся без изменений. 

## 6. Время жизни AMP-письма 

AMP-содержимое письма отображается только в течение 30 дней. После этого показывается обычная HTML-версия. Это сделано для того, чтобы обеспечить работоспособность AMP-письма, которое зачастую имеет серверную часть, которая спустя длительное время может перестать работать. 

**Решения:**

Даже в AMP-письмах следует обращать внимание на качество и контент HTML-версии. Она отображается у пользователей, чьи почтовые клиенты не поддерживают AMP, а также спустя 30 дней, когда AMP-содержимое устаревает. Поэтому HTML-версия должена включать всю ключевую информацию и быть полноценной альтернативой интерактивной AMP-части.

## 7. Ограничение размера письма в Gmail 

В Gmail действуют два разных лимита на размер письма:

- HTML-часть: максимум 102 КБ. Если превышен, письмо обрезается, и Gmail показывает ссылку «Показать полностью». Это нарушит верстку и скроет часть контента.

- **AMP-часть:** максимум 200 КБ. Если превышен, AMP-версия просто не будет отображена — пользователь увидит HTML-версию.
<Img
img="/api/uploads/screely_1563350239721_5ab764f678.png"
alt="Показана часть сообщения"
/>

**Решения:**

- **Сжимайте код.** Удалите комментарии, пробелы, дублирующиеся стили. Используйте специальные инструменты (например, [**htmlminifier.com**](https://htmlminifier.com)).

- **Убирайте лишнее.** Сократите трекинг-ссылки, очистите шаблон от неиспользуемых элементов и скрытых блоков.

- **Оптимизируйте стили:** общие — в ```<style amp-custom>```, инлайн — только по необходимости.

## 8. Проблемы с аналитикой AMP-писем

AMP позволяет взаимодействовать с контентом прямо внутри письма — например, нажимать кнопки, заполнять формы или листать карусели — без переходов на сайт. Такие действия не фиксируются обычными трекерами, поскольку внутри AMP нельзя использовать JavaScript, а компонент ```<amp-analytics>``` не поддерживается в AMP для email. В результате клики и события остаются «невидимыми» для систем аналитики вроде Google Analytics, «Яндекс.Метрики» и большинства ESP.

**Решение:**

Для реализации такой аналитики можно использовать сервисы, поддерживающие сбор событий с помощью трекинг-пикселей. Один из надёжных вариантов — [**Pixcraft**](https://pixcraft.io), который предоставляет API для трекинга AMP-событий через обычные GET-запросы. 

## Заключение

При вёрстке AMP-писем важно учитывать, как они ведут себя в разных почтовых клиентах. Даже у таких крупных платформ, как Gmail и Mail.ru, поведение отличается: где-то ломается карусель, где-то игнорируются состояния.

Обязательно тестируйте рассылки в Gmail (веб, Android, iOS), Mail.ru, Yahoo. Главное — не полагаться на «работает в одном месте — значит, везде». Потратьте время на тестирование, и интерактив в письмах будет работать стабильно, независимо от платформы.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.

В этом материале — восемь сложностей при верстке AMP-писем и практичные решения с примерами и кодом.

small_amp-emails.png

thumbnail_amp-emails.png

amp-emails.png

Топ-8 тонкостей при создании AMP-писем

Figma получила крупное обновление с новыми инструментами для интерфейсного дизайна, прототипирования и работы с контентом. В редактор добавили рисование, адаптивные сетки, генерацию интерфейсов с помощью ИИ и конструктор сайтов. Появились функции для маркетинга и поддержки бренд-контента. Все нововведения объединены в рамках одной среды, без необходимости переключаться между разными сервисами. 

В этом обзоре — что именно изменилось и как это использовать в ежедневной работе.

## Figma Make

<Img
img="/api/uploads/figma_update_make_17ac1606c2.png"
alt="Figma Make"
/>

Figma Make превращает текстовое описание или фрейм из Figma в интерактивный прототип с кодом. Можно начать с нуля: ввести, что нужно — например, «экран профиля с аватаркой, кнопкой и списком» — и получить заготовку, которую потом легко подправить. Или скопировать в Make уже созданный фрейм и попросить AI добавить логику: анимации, переходы, интерактивность. Получается не просто макет, а реально работающий код — можно просмотреть результат, отредактировать его и даже опубликовать как мини-приложение.

Инструмент пока в бете и работает нестабильно — иногда результат странный или слишком простой. Сейчас Figma Make — скорее способ быстро проверить идею или собрать прототип «на коленке», а не замена полноценной разработке. В сообществе относятся к нему с интересом, но без восторга: потенциал есть, но в текущем виде всё ещё сыровато. Тем не менее, сам подход — генерация прототипов по описанию — открывает возможности для ускорения работы, особенно на ранних этапах.

Кроме Make, в Figma добавили и другие AI-функции прямо в редактор. Теперь можно автозаполнить текст — Figma предложит варианты на основе контекста, чтобы не копировать «рыбу» вручную. Есть простое редактирование изображений с помощью ИИ — например, убрать фон или улучшить качество без внешних сервисов. А ещё всё это теперь работает без дополнительных настроек: просто выбираешь объект и запускаешь замену контента.

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

## Grid Auto Layout 

<Img
img="/api/uploads/figma_update_grid_42f5ab67e5.png"
alt="Figma Grid Auto Layout"
/>

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

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

Grid — это то, чего давно не хватало, чтобы макеты в Figma были ближе к реальной вёрстке. Всё, что дизайнер настраивает в сетке, теперь читается в Dev Mode как CSS Grid, с нужными параметрами. Разработчики сразу видят структуру и могут взять нужный код без перевода с «дизайнерского на разработческий». Это снижает количество вопросов и исправлений на этапе передачи макета — всем понятна логика и поведение интерфейса.

## Figma Draw 

<Img
img="/api/uploads/figma_update_draw_fc0128b6a6.png"
alt="Figma Draw"
/>

Figma Draw — новый режим для рисования прямо внутри Figma. Раньше если нужно было нарисовать иллюстрацию, иконку или какую-то сложную форму, приходилось переключаться на Illustrator или другие векторные редакторы. Теперь этого можно избежать — в Figma добавили полноценные инструменты для ручного рисования и работы с векторной графикой.

Появилась кисть, которой можно рисовать от руки — мазки остаются векторными, их можно редактировать и настраивать. Есть разные стили кистей, можно задать свою. Этой же кистью можно стирать части линий, что раньше приходилось делать через редактирование узлов. Панель настроек стала удобнее: теперь параметры вроде толщины, прозрачности или сглаживания доступны сразу и нормально регулируются. Также теперь можно выделять и править сразу несколько кривых. 

Кроме кисти, добавили и другие полезные инструменты:

 - Текст по кривой, чтобы делать логотипы или декоративные надписи;
 - Заливки узором, вроде паттернов или текстур — удобно для фонов;
 - Динамические линии (Dynamic Stroke), где можно задать небольшое «дрожание» для живого, рисованного эффекта;
 - Эффекты шума и текстур — чтобы имитировать материал или «винтаж».

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

## Figma Sites 

<Img
img="/api/uploads/figma_update_sites_ecb64781ae.png"
alt="Figma Sites"
/>

Figma Sites — это встроенный инструмент для создания сайтов прямо внутри Figma. Можно взять фрейм из дизайна, перенести его в отдельный проект и собрать из него простую веб-страницу. Не нужен код, не нужно ждать разработку — достаточно настроить адаптивность, добавить переходы или эффекты, и сайт можно сразу опубликовать. В бете доступны около 50 шаблонов и набор готовых блоков, плюс можно использовать стили и компоненты из своей дизайн-системы.

Сайты поддерживают брейкпоинты — можно настроить отображение под мобильные устройства, планшет и десктоп. Есть базовые визуальные эффекты: параллакс, плавные анимации, marquee, hover-состояния. Всё редактируется прямо в интерфейсе, как в любом визуальном редакторе. В будущем обещают добавить поддержку кастомного кода — это пригодится, если нужна нестандартная логика или поведение, которого пока нет «в коробке».

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

Figma Sites — это не замена полноценной веб-разработке, а скорее решение для простых задач. Например, собрать лендинг для продукта, быстро сверстать страницу под кампанию или сделать презентационный сайт — без лишней возни с передачей макета. Команды маркетинга и контента могут работать быстрее, не отвлекая разработчиков.

Первая реакция на инструмент была разной. Кто-то ждал полноценную альтернативу Webflow и остался разочарован — возможностей меньше, шаблоны простые, сгенерированный код не идеален. Но даже критики признают: для типовых задач внутри компании этого более чем достаточно. Особенно там, где важна скорость и где нет ресурсов подключать фронтенд к каждой мелочи.

Планы на развитие есть — например, [**обещают встроенную CMS**](https://www.figma.com/blog/config-2025-recap/). Если Figma будет развивать Sites дальше, он может занять устойчивое место среди no-code решений.

## Figma Buzz 

<Img
img="/api/uploads/figma_update_buzz_aaf9bd3e83.png"
alt="Figma Buzz"
/>

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

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

Главная фишка — массовая генерация контента по таблице. Можно загрузить список текстов и изображений (например, из Google Sheets), и Buzz сам соберёт все возможные комбинации. Это удобно для кампаний, где нужно много вариантов одного и того же баннера с разными товарами, акциями или языками. Получившийся контент сразу доступен для скачивания.

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

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

## Заключение

Figma постепенно превращается из просто редактора в удобную рабочую среду для всей команды — от дизайна до запуска продукта. Новые функции вроде Make, Sites, Draw и Buzz упрощают задачи, сокращают количество ручной работы и помогают быстрее двигаться от идеи к результату. Не всё идеально, но направление развития в целом правильное.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.

Обзор обновлений Figma 2025: новые инструменты для дизайна, прототипов, сайтов и контента — всё в одном месте. Что добавили и как с этим работать.

small_figma-updates-main.png

thumbnail_figma-updates-main.png

figma-updates-main.png

Обновления Figma на Config 2025: подробный обзор

Email-маркетинг продолжает эволюционировать, предлагая новые способы прямого взаимодействия с аудиторией. Сегодня статичные письма уже не соответствуют ожиданиям пользователей: востребован интерактивный, персонализированный контент, позволяющий решать задачи без выхода за пределы почтового клиента.

Технология AMP для email открывает новые возможности, интегрируя динамические элементы и формы обратной связи прямо в письма. [**В предыдущих материалах**](https://pixcraft.io/ru/blog/ispolzovanie-komponenta-amp-list-v-email-rassylke) мы рассмотрели базовые принципы работы с AMP-list в email-рассылках. В этой же статье сосредоточимся на компоненте **AMP-form** — ключевом инструменте для создания форм внутри писем. Он позволяет собирать данные, подтверждать действия и выстраивать полноценное взаимодействие с пользователями в реальном времени. Рассмотрим, как эффективно использовать AMP-form в email-маркетинге, а также как интегрировать его с помощью Pixcraft.

## Что такое AMP-form

AMP-form — это компонент AMP, который позволяет создавать формы прямо внутри email без необходимости перехода на другую страницу. С его помощью можно добавить к письму:

- Регистрацию на мероприятие;
- Сбор отзывов;
- Подписку на рассылку;
- Опросы прямо в письме.

<Img
img="/api/uploads/amp_form_webinar_1_2d3b8c0338.png"
alt="Пример AMP в емейле"
src="Пример формы в письме, созданный с AMP-form"
/>

### Синтаксис AMP-form

Разметка простейшей формы на AMP выглядит так:

```HTML
<form method="post" action-xhr="https://example.com/submit">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="email" name="email" placeholder="Ваш email" required>
 	<button type="submit">Отправить</button>
 <div submit-success>
<template type="amp-mustache">
Спасибо за отправку, {{name}}!
</template>
  </div>
  <div submit-error>
Ошибка: попробуйте ещё раз.
  </div>
</form>
```
Основными атрибутами здесь являются:

**action-xhr**: указывает URL для отправки данных формы;
**div submit-success**: элемент, отображаемый при успешной отправке формы;
**div submit-error**: элемент, отображаемый при ошибке отправки формы;

Для динамической подстановки ответа используется [**amp-mustache**](https://amp.dev/documentation/components/email/amp-mustache).

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

### Регистрация на мероприятия и вебинары

С помощью AMP-form можно создать форму для регистрации, которая появится прямо в письме. Пользователь указывает имя и название организации, нажимает кнопку Зарегистрироваться, и его данные мгновенно отправляются на сервер организатора.

<Img
img="/api/uploads/amp_form_webinar_2_bc7aabca5e.png"
alt="AMP в письме"
/>

### Опросы и сбор обратной связи

В письме можно встроить форму с одним или несколькими вопросами, чтобы мгновенно собрать отзывы, NPS или предложения. Такую форму можно оформить как поле ввода для текста или как шкалу со «звёздочками».

<Img
img="/api/uploads/amp_form_cloud_3_9c665cdb6a.gif"
alt="AMP-письмо"
/>

### Бронирование встреч и консультаций

С помощью AMP-form клиент может выбрать дату и точное время встречи, а также оставить свои контакты прямо в письме.

<Img
img="/api/uploads/web_form_lawyer_4_a1af052a5c.png"
alt="Бронирование в AMP-письме"
/>

### Оформление заказов и заявок

Получатель письма может оформить заказ на товар или запросить услугу без перехода на сайт.

<Img
img="/api/uploads/amp_form_order_5_4328e810a3.gif"
alt="Форма заказа в письме"
/>

### Расширение каналов коммуникации

Если ваш клиент уже получает уведомления по имейл, можно подписать его на рассылку в других каналах, например, по SMS.

<Img
img="/api/uploads/amp_form_phone_number_6_35773b5c67.png"
alt="Номер телефона в письме"
/>

### Сбор дополнительной информации

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

<Img
img="/api/uploads/amp_form_vet_7_c2f079b16a.png"
alt="Сбор дополнительной информации"
/>
## Реализация в Pixcraft

Быстро создать и настроить AMP-форму можно в [**визуальном конструкторе Pixcraft**](https://pixcraft.io/ru). Для этого на главной странице сервиса перейдите к разделу **AMP-компоненты** и  нажмите **Создать AMP-form**.

<Img
img="/api/uploads/amp_form_amp_components_8_a6b49995ff.png"
alt="Создание AMP-формы"
/>

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

Далее добавьте и расположите в нужном порядке **элементы** формы. Доступны следующие элементы:

**Input** — однострочное поле ввода текста;
**Checkbox** — галочки для выбора нескольких вариантов;
**Radio** — переключатели для выбора единственного варианта;
**Textarea** — многострочное поле ввода текста;
**Select** – выпадающий список, в котором можно выбрать единственный вариант из предложенных;

Также можно добавить сообщение об успешной отправке данных в форме.

Для текстовых полей можно настроить валидацию:

**Not Validate** — не проверять значение;
**Required** — поле обязательно для заполнения;
**Equal to value** — содержимое поля точно соответствует значению (необходимо указать в появившемся поле);
**Phone** — проверка количества числовых символов. Необходимое количество следует указать в дополнительном поле валидации;
**Email** — введенное значение должно соответствовать формату имейл-адреса.

<Img
img="/api/uploads/amp_form_element_label_9_baa17de081.png"
alt="Element label"
/>

По умолчанию данные из формы сохраняются в Pixcraft, но если вам нужно передать их во внешний сервис или базу, можете добавить ссылку на **Webhook**. Для этого в соответствующем поле укажите URL для перенаправления и тогда Pixcraft начнет отправлять **POST-запросы** по заданному адресу. Запрос содержит следующие параметры:

| Параметр   | Тип                                           | Пример                             | Описание                                                                                      |
|-------------|------------------------------------------------|-------------------------------------|--------------------------------------------------------------------------------------------------|
| componentId | Number                                         | 123                                 | ID компонента в Pixcraft.                                                                         |
| campaignId  | Number                                         | 124                                 | ID кампании, к которой принадлежит компонент. Может оставаться пустым, если компонент не привязан к кампании.                         |
| email       | String                                         | test@test.com                       | Емейл-адрес подписчика, отправившего форму.                                                       |
| date        | UNIX date                                      | 1648553051                          | Время, когда произошло событие.                                                                   |
| owner       | Number                                         | 125                                 | ID владельца формы в Pixcraft.                                                                    |
| data        | Content-Type: application/x-www-form-urlencoded | {"field0": "testInput", "field1": "radio1", "field2": "checkbox2", "success": "success"} | Данные формы.                                                        |

<Note>Подробнее о создании формы и настройке вебхука можно прочесть в [**документации Pixcraft**](https://docs.pixcraft.io/ru/amp/components/form.html).</Note>


Форма готова. Скопируйте сгенерированный код и вставьте его в шаблон письма.

<Img
img="/api/uploads/amp_form_podklucheniye_10_cafd79d172.png"
alt="Форма АМП"
/>

После сохранения форма будет доступна в разделе **Компоненты.**

<Img
img="/api/uploads/amp_form_my_space_11_da72f141cb.png"
alt="Форма АМП"
/>

Полученные через формы данные будут храниться в Pixcraft. В разделе **Статистика** вы найдёте информацию обо всех взаимодействиях с формой.

<Img
img="/api/uploads/amp_form_events_12_36a84288bc.png"
alt="Events: статистика AMP"
/>

Эту информацию можно экспортировать в виде **CSV-таблицы** или выгрузить в **Google Таблицы**. 

### Интеграция с Albato

Данные из форм можно автоматически передавать во внешние сервисы с помощью вебхука, а используя сервисы-посредники, вроде, **Albato** или **zapier** вы можете настроить любую интеграцию без программирования. В Albato перейдите в раздел **Мои связки**. Создайте новую связку.

<Img
img="/api/uploads/amp_form_moi_svyazki_13_6eed0cfa23.png"
alt="Мои связки"
/>

В качестве триггера укажите **Вебхук**, затем **Входящий webhook** и подключите вебхук-соединение.

<Img
img="/api/uploads/amp_form_trigger_13_682d5fc608.png"
alt="Настройка триггера"
/>

Для подключения соединения нужно нажать кнопку **+ Добавить подключение** и назвать его. После нажатия на кнопку **Далее** перед вами появится адрес вебхука.

<Img
img="/api/uploads/amp_form_webhook_14_aeaf54e4bf.png"
alt="Генерация вебхука"
/>

Скопируйте адрес, укажите его в поле Webhook в настройках формы в Pixcraft и сохраните изменения.

<Img
img="/api/uploads/amp_form_enter0webhook_15_e88b10e923.png"
alt="Вебхук"
/>






Вернитесь в Albato и нажмите **Ожидать вебхук**. Теперь необходимо отправить форму, чтобы отработал запрос. Для этого вставьте код формы в ваше письмо или воспользуйтесь [**плейграундом от Google**](https://amp.gmail.dev/playground/).
После отправки формы окно в Albato изменится, оно отобразит поля полученного вебхука.


<Img
img="/api/uploads/amp_form_webhook_catcher_16_2069c05d6e.png"
alt="Webhook catcher"
/>


Далее необходимо решить, что делать с полученными данными: отправить данные в ESP, CDP, CRM-систему и т.д. — вы можете выбрать любую интеграцию из списка. Например, можно отправить данные в CDP Altcraft: для этого при настройке действия после старта связки выберите Altcraft, укажите нужное действие и подключите ваш аккаунт в сервисе.



<Img
img="/api/uploads/amp_form_deistvie_17_0e4032d1bc.png"
alt="Запуск автоматизации"
/>

Для завершения и запуска автоматизации нажмите **Запустить**.

## Заключение

Используя AMP-формы, вы экономите время ваших клиентов, поскольку для её заполнения не нужно переходить в окно браузера и ждать загрузки отдельной страницы. Это сильно упрощает сбор данных, а также значительно повышает лояльность и вовлеченность аудитории. 

А если вы создаёте формы в [**визуальном конструкторе Pixcraft**](https://pixcraft.io/ru/builder), вам не придется разбираться в особенностях синтаксиса AMP-form. Вместо этого вы сможете использовать это время для разработки наиболее креативных маркетинговых кампаний для вашей компании.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

Узнайте, как использовать AMP-form в email-маркетинге для создания интерактивных писем с формами, обратной связью и сбором данных прямо в почтовом клиенте.


small_amp-form.png

thumbnail_amp-form.png

amp-form.png

Как создавать и использовать формы в письме

Почему одни письма сразу привлекают внимание, а другие мы закрываем, не глядя? Дело не только в содержании и картинках — большое значение имеет внешний вид текста. 

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

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

## Какие есть виды шрифтов для письма

**Шрифты без засечек (гротески)** — это такие шрифты, как Arial, Helvetica, Verdana, Tahoma. Они выглядят современно, нейтрально и легко воспринимаются на экранах любых устройств. Их главное преимущество — хорошая читаемость и универсальность. Такие шрифты подходят для деловых писем, новостных рассылок и любых коммуникаций, где акцент сделан на простоту и доступность. Для основного текста особенно рекомендуется использовать Verdana или более нейтральный Arial.

<Img
img="/api/uploads/tipografika_emeily_populyarnye_shifty_06d6081d77.png"
alt="Пример емейла с популярными шрифтами"
src="Здесь в основном тексте используется стандартный шрифт без засечек — Arial" 
/>

**Шрифты с засечками (антиквы),** например Georgia и Times New Roman, создают более формальный и основательный образ. Засечки добавляют тексту серьёзности, что особенно полезно при официальных рассылках или в проектах, где важно подчеркнуть традиционность бренда. Однако стоит учитывать, что на небольших экранах шрифты с засечками могут ухудшать читаемость. 

<Img
img="/api/uploads/tipografika_yandex_krasivye_shrifty_305cbff403.png"
alt="Пример емейла с красивыми шрифтами"
src="В заголовке — контрастный шрифт с засечками. Это распространённый приём — сочетать заголовок с засечками и основной текст без засечек" 
/>

**Рукописные шрифты** вроде Pacifico, Dancing Script или Lobster добавляют письму неформальности и эмоциональности. Они создают эффект личного обращения, усиливают вовлечённость. При этом рукописные шрифты заметно ухудшают читаемость длинных текстов, поэтому их использование стоит ограничить небольшими акцентами — заголовками или краткими вставками. Для основного текста рукописные шрифты непригодны.

<Img
img="/api/uploads/tipografika_rukopisny_shrift_843fde02ea.png"
alt="Емейл с рукописным шрифтом"
src="В заголовке используется рукописный шрифт" 
/>

**Декоративные шрифты** (например, Impact, Comic Sans или брендированные стилизованные гарнитуры) рассчитаны на привлечение внимания за счёт нестандартного вида. Они могут быть оправданы в оформлении баннеров, праздничных заголовков, специальных акций. Но в деловой переписке и для длинных текстов такие шрифты использовать нельзя: они быстро утомляют глаз и мешают восприятию информации.

<Img
img="/api/uploads/tipografika_v_pismah_primer_2d8849c649.png"
alt="Декоративный шрифт"
src="В заголовке используется декоративный шрифт" 
/>

### Стандартные и кастомные шрифты

**Стандартные шрифты** (или веб-безопасные) — это шрифты, которые обычно предустановлены на всех основных операционных системах: Windows, macOS, Android, iOS. Они корректно отображаются в большинстве почтовых клиентов без дополнительных настроек. К таким шрифтам относятся Arial, Verdana, Tahoma, Times New Roman, Georgia. Они гарантируют предсказуемое поведение письма на любых устройствах: текст выглядит одинаково, загружается быстро, риск ошибок минимален.

**Нестандартные (или кастомные шрифты)**, напротив, требуют подключения через @font-face или внешние сервисы вроде Google Fonts. Поддержка таких шрифтов крайне ограничена: стабильно они работают только в Apple Mail (на iOS и macOS) и в некоторых версиях Outlook для Mac. В остальных случаях (например, в Gmail, Outlook на Windows, мобильных приложениях) такой шрифт будет автоматически заменён на стандартный. Это не только рушит задуманный стиль письма, но и создаёт непредсказуемые проблемы с вёрсткой.

Использование кастомных шрифтов в email-рассылках оправдано только в очень редких случаях, когда есть уверенность в специфике аудитории. 

**@font-face** сегодня фактически бесполезен в email-дизайне: поддержка на уровне [**менее 20% клиентов**](https://www.caniemail.com/features/css-at-font-face/) делает его применение нецелесообразным. Если подключить кастомный шрифт без запасного варианта, письмо может выглядеть некорректно.

Поэтому единственный надёжный подход — использовать веб-безопасные шрифты. Они обеспечивают быструю загрузку писем, стабильное отображение на всех устройствах и соответствие базовым требованиям UX для email-рассылок.

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

<Img
img="/api/uploads/tipografika_shrifty_dlya_texta_ffd39f0d5a.png"
alt="Шрифты для текста в емейле"
src="Кастомный шрифт в баннере + стандартные шрифты без засечек в тексте" 
/>

### Как сочетать шрифты

Использовать в письме более двух шрифтов не рекомендуется. Оптимальное решение — один шрифт для основного текста и один для заголовков. Например:

- Georgia для заголовков и Verdana для основного текста — вариант для писем с лёгким акцентом на классику.
- Arial для заголовков и Times New Roman для основного текста — решение для строгих деловых рассылок.
- Trebuchet MS для заголовков и Arial для текста — современный, нейтральный вариант для массовых email-рассылок, особенно если важна читаемость и универсальность.

## Размер шрифта, межстрочный интервал и контраст: правила для писем, которые легко читать

**Размер заголовков** должен быть значительно больше основного текста. Для основных заголовков целесообразно использовать 28-36 px, а для подзаголовков —18-24 px. Такая градация строит чёткую визуальную иерархию, акцентирует внимание на ключевых элементах письма и упрощает навигацию по тексту.

<Img
img="/api/uploads/tipografika_zagolovok_samyi_chitabelnyy_shrift_beaa04bd04.png"
alt="Размер заголовка в письме"
src="Размер заголовка — примерно 26-30 пикселей" 
/>

**Оптимальный размер шрифта для основного текста — 16 px.** Это значение считается комфортным и для десктопов, и для мобильных устройств. Меньший размер ухудшает читаемость и повышает риск, что часть текста просто проигнорируют. 

**Межстрочный интервал (line-height)** играет не менее важную роль. При плотной вёрстке текст становится трудночитаемым даже при правильном размере шрифта. Оптимально выставлять межстрочный интервал в диапазоне 1,4-1,6 от размера шрифта. 

Например, при размере шрифта 16 px межстрочный интервал должен быть около 22-24 px. Таким образом текст «дышит», его легче воспринимать, и глаза меньше устают при чтении.

<Img
img="/api/uploads/tipografika_interval_shrifty_nazavaniya_957ec8f102.png"
alt="Шрифты: названия и межстрочный интервал"
src="Line-height примерно 1.4-1.5" 
/>

**Контраст между текстом и фоном** — обязательное условие для повышения читаемости. Слабый контраст мешает читать и повышает вероятность, что человек просто перестанет вникать в текст. Тёмный текст на светлом фоне (например, чёрный на белом или тёмно-серый на светло-сером) остаётся наиболее надёжным решением. Избегайте цветовых сочетаний с низким контрастом, а также тонких и светлых шрифтов на ярких фонах.

Практическое правило: текст должен оставаться легко читаемым даже при быстром пролистывании письма на мобильном устройстве. Проверка на читаемость в нескольких размерах экранов — обязательная часть финального тестирования рассылки.

## На что ещё стоит обращать внимание 

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

- **Висячие предлоги и союзы в конце строки** — это ошибка, которую легко пропустить, но она делает текст визуально неопрятным. При вёрстке писем вручную все эти вещи нужно проверять самостоятельно. Но если вы используете продукты [**Pixcraft**](https://pixcraft.io/ru) (включая [**фреймворк TJML**](https://pixcraft.io/ru/framework)), эти тонкости уже учтены. Система автоматически подставляет неразрывные пробелы там, где нужно, чтобы не было висячих союзов и предлогов в конце строки. Это избавляет от рутинной правки и делает текст визуально чище.

<Img
img="/api/uploads/tipografika_soyuzy_visyachie_09eca289b9.png"
alt="Висячие предлоги"
src="Емейл с висячими предлогами и союзами" 
/>

- **Разрядность чисел**. Большие числа вроде 10 000 или 1 200 000 всегда нужно разделять пробелами. Читателю так проще воспринимать числа. 
- **Знаки препинания**. Дефис — это не то же самое, что длинное тире. Дефис — это «-» (например, в слове «по‑русски»), а длинное тире (—) ставится в тексте как логическая пауза. Также в русских емейлах для цитирования применяйте «ёлочки» («…»), а не кавычки такого формата: “”.
- **Выравнивание текста**. Текст, кнопки и изображения в письме должны быть выровнены одинаково — так письмо выглядит аккуратно и читается проще. Самый удобный вариант — по левому краю. Не растягивайте текст по ширине: из-за этого между словами появляются дополнительные расстояния, и читать становится неудобно.
- **Цвет текста**. Основной текст должен быть одного нейтрального оттенка — тёмно-серого или чёрного (для светлого фона). Для акцентов и заголовков можно добавить один-два дополнительных цвета, но не больше. Избыток цветовых элементов делает письмо визуально перегруженным. 
- **Выделение текста**. Жирный и курсив лучше использовать только для акцентов — отдельных слов или коротких фраз. Например, жирным можно выделить промокод или важную мысль. Если выделено слишком много, акценты теряют смысл и перестают привлекать внимание.

## Итоговые рекомендации

- **Не больше двух шрифтов**. Один для заголовков, другой для основного текста. Больше не нужно — письмо будет выглядеть перегруженным. 
- **Размер шрифта — 14-16 px**. Меньше — уже трудно читать, особенно на телефоне. 
- **Между строками должен быть воздух**. Межстрочный интервал — 1.4–1.6. С таким интервалом строки не слипаются, текст остаётся разборчивым.
- **Тёмный текст на светлом фоне**. Самый надёжный вариант — чёрный или тёмно-серый на белом. Сложные цветовые сочетания ухудшают читаемость.
- **Не вставляйте текст картинкой**. Такие письма не читаются скринридерами и могут не загрузиться.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

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


small_tipografika-v-emerilah.png

thumbnail_tipografika-v-emerilah.png

tipografika-v-emerilah.png

Типографика писем: как сделать текст читаемым

Разберём, какие email-цепочки стоит запускать в первую очередь, какую пользу они приносят бизнесу и как сделать письма не только полезными, но и увлекательными.

small_email-sequence.png

thumbnail_email-sequence.png

email-sequence.png

Какие email-цепочки — must-have для бизнеса

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

small_checklist-testing-email.png

thumbnail_checklist-testing-email.png

checklist-testing-email.png

Чеклист: что протестировать перед отправкой письма

Сегодня электронная коммерция должна не только предоставить клиенту качественный продукт, но и обеспечить удобство взаимодействия на всех этапах, включая коммуникацию через электронную почту. Использование микроразметки JSON-LD в email-рассылках позволяет выделиться среди конкурентов и упростить клиенту получение ключевой информации.

## Микроразметка JSON-LD

**JSON-LD** — это формат передачи связанных данных. В контексте email-рассылок JSON-LD позволяет преобразовывать данные в элементы интерфейса почтового клиента. Для этого необходимый код вставляется в раздел head HTML-кода email-письма, предоставляя почтовым сервисам структурированные данные для отображения.

Формат JSON-LD используется не только в коде электронных писем, но и при создании сайтов и страниц в интернете. Не следует путать их между собой, поскольку применение формата в этом случае направлено на SEO-оптимизацию.
JSON-LD в письмах использует словарь **schema.org**. Его базовая структура выглядит примерно так:

```JSON-LD
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "..."
…
}
</script>
```
## Особенности в разных почтовиках

Каждый почтовый провайдер поддерживает лишь небольшой набор схем. Остановимся подробнее на каждом и разберем на примерах.

### Gmail

Именно Google первым начал использовать JSON-LD в своих письмах и продолжает добавлять варианты его применения. Функционал формата можно разделить на:

**1.** **Действия** — это кнопки быстрых действий, которые появляются в списке входящих и позволяют совершить целевое действие вообще не открывая письмо. Они бывают 2 типов:

- **One Click Actions** — подходит для подтверждения чего-либо без перехода на сайт. Отлично подойдет для подтверждения подписки, например.

- **Go to action** — для перехода по ссылке в один клик

<Img
img="/api/uploads/JSON_LD_example_1_4e9c63d874.png"
alt="JSON-LD в письмах"
src="Пример использования Go to Action"
/>

- **Заказы** — информация о заказах и все, что с ними связано. Сюда входит: главная информация о заказе, информация о доставке, платежная информация.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_1_5b519c7709.png" 
thumbnail="/api/uploads/json_ld_1_5b519c7709.png"
description="JSON-LD в письмах. Заказы"
/>
<GalleryItem
original="/api/uploads/json_ld_2_82a8ff0022.png" 
thumbnail="/api/uploads/json_ld_2_82a8ff0022.png"
description="JSON-LD в письмах. Заказы"
/>
<GalleryItem
original="/api/uploads/json_ld_3_9ebbc61ae1.png"
thumbnail="/api/uploads/json_ld_3_9ebbc61ae1.png"
description="JSON-LD в письмах. Информация о заказах"
/>
</Gallery>

- **Бронирование**, включает в себя: билеты на автобус, билеты на поезд, авиаперелет, событие/мероприятие, бронирование гостиниц, бронирование ресторанов, аренда автомобиля.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_bus_tickets_a769591ef7.png" 
thumbnail="/api/uploads/json_ld_bus_tickets_a769591ef7.png"
description="JSON-LD в письмах. Бронирование билета" 
/>
<GalleryItem
original="/api/uploads/json_ld_train_tickets_55bf85ffea.png" 
thumbnail="/api/uploads/json_ld_train_tickets_55bf85ffea.png"
description="JSON-LD в письмах. Бронирование"
/>
<GalleryItem
original="/api/uploads/json_ld_arenda_255d394b69.png" 
thumbnail="/api/uploads/json_ld_arenda_255d394b69.png"
description="JSON-LD в емейлах"
/>
<GalleryItem
original="/api/uploads/json_ld_hotel_b92350279e.png"  
thumbnail="/api/uploads/json_ld_hotel_b92350279e.png"
description="Использование JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_perelet_ff36c7efba.png"  
thumbnail="/api/uploads/json_ld_perelet_ff36c7efba.png"
description="JSON-LD: примеры использования."
/>
<GalleryItem
original="/api/uploads/json_ld_restoran_f9a5022f12.png"  
thumbnail="/api/uploads/json_ld_restoran_f9a5022f12.png"
description="JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_sobytie_2c01399694.png" 
thumbnail="/api/uploads/json_ld_sobytie_2c01399694.png"
description="JSON-LD в рассылках"
/>
</Gallery>

- **Аннотации** — это информация, которая отображается до открытия письма, если оно попало в список «Промоакции». Она может включать в себя карточки товаров, информацию о скидке и промокод. Яркие карточки в списке «Промоакций» точно привлекут внимание подписчика, сократят путь до перехода на сайт, а также предотвратят автоматическое формирование карточек с неудачными изображениями.

<Img
img="/api/uploads/JSON_LD_annotation_11zon_71b196b29b.jpg"
alt="JSON-LD в письмах"
src="JSON-LD в письмах с аннотациями"
/>

Широкие возможности формата в Gmail позволяют создать удобные для клиента email-рассылки. Для использования всех возможностей JSON-LD в Gmail необходимо пройти процедуру регистрации, практически как для отправки AMP-писем. Во-первых,  ваш домен должен соответствовать [**требованиям Google**](https://developers.google.com/workspace/gmail/markup/registering-with-google?hl=ru#registration_guidelines). Во-вторых, нужно отправить пример письма с JSON-LD на специальный почтовый ящик (schema.whitelisting+sample@gmail.com). В-третьих, нужно заполнить специальную [**форму**](https://docs.google.com/forms/d/e/1FAIpQLSfT5F1VJXtBjGw2mLxY2aX557ctPTsCrJpURiKJjYeVrugHBQ/viewform?pli=1&hl=ru). Только после этих действий можно ожидать одобрения от почтовика. 

Подробнее об условиях одобрения ваших писем можно прочесть [**в официальной документации**](https://developers.google.com/workspace/gmail/markup/registering-with-google?hl=ru), а полная информация+ по использованию JSON-LD в Gmail доступна [**на этой странице**](https://developers.google.com/gmail/markup/reference?hl=ru).

Для тестирования работы вы можете отправить себе письмо с того же ящика Gmail. Самым удобным вариантом для этого будет воспользоваться сервисом [**Google Scripts**](https://script.google.com). Основной скрипт будет иметь примерно следующий вид:

```JavaScript
function testSchemas() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('Email.html').getContent();

  MailApp.sendEmail({
	to: Session.getActiveUser().getEmail(),
	subject: 'JSON LD',
	htmlBody: htmlBody,
  });
}
```
А рядом необходимо добавить файл с тестовым шаблоном, в нашем случае Email.html.


### Mail.ru
Mail.ru поддерживает использование JSON-LD в виде карточек заказов и смарт-карточек для оплаты прямо в письме. 

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

<Img
img="/api/uploads/JSON_LD_zakaz_mailru_41402ae923.png"
alt="JSON-LD в емейле с карточкой заказа"
src="JSON-LD с карточкой заказа"
/>

**Смарт-карточки** — Mail.ru позволяет произвести оплату заказа или квитанции прямо из письма. 

<Img
img="/api/uploads/JSON_LD_smartkartochki_b848aa6dfc.png"
alt="JSON-LD в емейле со счетом"
src="JSON-LD со счетом"
/>

Смарт-карточки отображаются как в веб-версии почтового клиента, так и в мобильном приложении.

Имейте ввиду, что для использования смарт-карточек необходимо [**согласовать**](https://help.mail.ru/developers/jsonld/smartcards/id/) уникальный идентификатор отправителя. Полная документация Mail.ru по JSON-LD находится на [**этой странице**](https://help.mail.ru/developers/jsonld/about/).

### Яндекс.Почта

Яндекс.Почта выделяет письма, содержащие JSON-LD, специальным образом в общем списке входящих сообщений. Поддерживается:

- показ информации по заказу, отображая рядом с темой список товаров, стоимость и кнопку быстрого перехода в магазин;

- вывод информации об авиабилетах.

<Img
img="/api/uploads/JSON_LD_yandex_710073fad9.png"
alt="JSON-LD. Вывод информации"
src="Вывод информации о билете"
/>

Условие для использования JSON-LD только одно: соблюдения требований Яндекса к массовым рассылкам и домену отправителя.
Подробнее информацию об использовании JSON-LD в почтовике Яндекса можно найти [**здесь**](https://yandex.ru/support/webmaster/mail/mail.html).

## Тестирование шаблонов с JSON-LD

Мы рекомендуем всегда проверять ваши email-шаблоны с JSON-LD (как и с любыми другими интерактивными элементами). Существует несколько способов проверки:

- При помощи специальных валидаторов, например, [**Schema Validator**](https://validator.schema.org/). Некоторые почтовые провайдеры имеют собственные сервисы, например, [**Инструмент проверки разметки от Google**](https://www.google.com/webmasters/markup-tester/u/0/?hl=ru).

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

- Запуск тестовой рассылки. Самый надежный способ, который поможет быстро проверить отображение JSON-LD сразу в нескольких почтовиках.

<Note>О проверке отображения и тестировании рассылок мы уже говорили в одной из [**статей блога.**](https://pixcraft.io/ru/blog/proverka-sovmestimosti-email-shablonov-kak-izbezhat-oshibok-na-raznyh-ustrojstvah#podderzhka-jsonld) Там же отдельно упоминали и JSON-LD.</Note>

## Заключение

Все описанные в статье почтовики в своей сути отображают информацию о заказах, несмотря на то, что представлена она в разной форме. Наличие таких карточек выделяет письма на фоне обычных рассылок и формирует у клиентов положительное впечатление о бренде. Важно помнить, что при использовании JSON-LD необходимо тщательно проверять корректность отображения писем в популярных почтовых клиентах, используя специализированные инструменты.

Клиентоориентированность, наряду с [**другими трендами email-маркетинга**](https://pixcraft.io/ru/blog/email-marketing-v-2025-kak-ne-otstat-ot-konkurentov), является одним из главных условий успешной коммуникации с клиентом. Внедряя JSON-LD в свои письма, вы не просто улучшаете, а создаете качественно новый пользовательский опыт, значительно повышая лояльность к вашей компании.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

JSON-LD в email-рассылках выделяет письма среди конкурентов и упрощает получение важной информации. Разбираемся, как использовать микроразметку.

small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

Смарт-карточки и статус заказа: использование JSON-LD в email-рассылках

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

Блог