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

Сегодня мы расскажем о **React Email**. Это email-фреймворк для создания шаблонов писем, основанный на React. В этой статье рассмотрим его сильные и слабые стороны, а также сравним инструмент с фреймворком [**TJML**](https://pixcraft.io/ru/framework). 

<Note>
TJML работает на основе **Vue**, предоставляя пользователю все его преимущества. Ранее мы уже [**сравнивали TJML с фреймворком MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml).
</Note>

## Установка и подключение

### React email

Чтобы установить React email, необходимо добавить его в свой TypeScript- или JavaScript-проект [**через npm**](https://react.email/docs/getting-started/automatic-setup), либо же произвести установку [**вручную**](https://react.email/docs/getting-started/manual-setup), самостоятельно добавив необходимые зависимости. После завершения процесса вам будет доступен локальный демо-сервер с набором базовых шаблонов для писем. Их можно открыть и просмотреть прямо в браузере:

<Img
img="/api/uploads/react_time_c6bcc6452f.png"
alt="React email login"
/>

Все изменения, которые вы внесете в шаблоны в папке `emails`, сразу отобразятся в браузере. Тестовое письмо можно отправить себе на почту с помощью соответствующей кнопки.

Однако у сервиса есть и существенный минус – отсутствие простой и доступной **«песочницы»**. В тех случаях, когда вы не можете развернуть проект или подключить к нему React Email, предпросмотр получившегося письма будет недоступен.

### TJML

Для начала работы с фреймворком вы можете зайти в бесплатную [**«песочницу»**](https://app.pixcraft.io/playground/), вставить туда нужные компоненты и самостоятельно проверить отображение готового письма. Наличие playground-страницы позволяет в любой момент отредактировать шаблон письма и сразу же посмотреть результат изменений:

<Img
img="/api/uploads/react_time_2_497203ac39.jpg"
alt="Редактирование шаблона письма"
/>

TJML можно установить путем подключения **JS-библиотеки**, что обеспечит возможность работы с шаблонами в привычной среде разработки. Полная инструкция – по [**ссылке**](https://docs.pixcraft.io/ru/framework/documentation).

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

- **Плагин для VS Code.** Данное расширение будет предлагать автозавершение для тегов TJML, а также покажет подсказки по доступным атрибутам. Плагин доступен по [**ссылке**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml).
- **Автозавершение для продуктов JetBrains (WebStorm) с помощью [**Web-Types**](https://github.com/JetBrains/web-types).** Для получения подсказок по тегам и доступным атрибутам вы также можете подключить [**web-types.json**](https://github.com/ahttps://github.com/pixcraft-io/TJML-framework/blob/main/web-types.jsoneb-types.json).

## Возможности

### React email

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

<Img
img="/api/uploads/react_time_3_3dfba29c1c.png"
alt="Код письма"
/>

Код можно сразу же экспортировать в формате HTML, либо же в формате plain-text.

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

<Img
img="/api/uploads/react_time_4_e69243d511.png"
alt="Блоки"
/>

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

В React Email для работы с тем или иным компонентом необходимо сначала его импортировать, затем можно использовать в коде. После вставки вы можете изменить наполнение блоков, включая текст и изображения. Внешний вид компонентов задается с помощью передачи объекта, содержащего стилевые свойства и их значения, в свойство `style` компонента:

```xml
<Section style={{ display: "inline-block", width: "100%", maxWidth: 270, verticalAlign: "middle", }}>
            <Text style={{fontSize:"36px", color: "#ffffff", lineHeight: '1.2'}}>
              The best<br/>choice
            </Text>
</Section>
```

К значительным недостаткам сервиса относится отсутствие четкого описания атрибутов и свойств компонентов в документации. Из-за этого пользователю придётся изучать свойства блоков самостоятельно, фактически «вслепую» внося изменения в части кода.

### TJML

Как уже было сказано ранее, у TJML есть своя «песочница». В ней можно полностью собрать шаблон из компонентов и проверить отображение письма в разных режимах просмотра:

<Img
img="/api/uploads/react_time_5_a71489ef4b.png"
alt="Разные режимы просмотра"
/>

В TJML также доступны следующие функции:

- Различные режимы просмотра: темная тема, просмотр на мобильных и десктоп-устройствах, имитация инверсии цвета для клиента Gmail на iOS
- Инструмент Pixel-Perfect, предназначенный для точной верстки вплоть до пикселя
- Фреймворк автоматически отслеживает размер кода и уведомляет, если он превышает рекомендуемые значения
- Поддержка AMP: галереи изображений, интерактивные элементы, формы, встроенные прямо в письмо
- Одновременный рендеринг как HTML-, так и AMP-версии письма
- Валидация различных ошибок

Верстка в TJML соответствует написанию обычного XML-кода. Для каждого из компонентов есть [**документированный набор атрибутов**](https://docs.pixcraft.io/ru/framework/documentation). Вставленные блоки можно кастомизировать под свои требования, например, указать ссылки для кнопок, заменить картинки и добавить текст.

После завершения работы над шаблоном вы можете сразу просмотреть код и при необходимости **сжать его**:

<Img
img="/api/uploads/react_time_6_a923eabe10.png"
alt="Сжатие кода"
/>

## Отображение письма

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

Для сравнения результатов работы фреймворков сверстаем два идентичных письма,  одно – с использованием TJML, а другое – с помощью React Email. Начнем с **Gmail**:

<Img
img="/api/uploads/react_time_7_cfe370d8b9.png"
alt="Gmail"
/>

Здесь письмо выглядит корректно. Теперь посмотрим, в каком виде его получат пользователи **IPhone**:

<Img
img="/api/uploads/react_time_8_cb2da98995.png"
alt="iPhone"
/>

С этой задачей фреймворк справился. Проверим отображение в корпоративном клиенте – **Microsoft Outlook**:

<Img
img="/api/uploads/react_time_9_c1744beeb0.png"
alt="Outlook"
/>

В Outlook письмо React Email выглядит крайне неудовлетворительно. Это значит, что инструмент не подойдет для крупных маркетинговых рассылок, где может присутствовать B2B-сегмент, а также фреймворк не предназначен для профессионального использования агентствами, поскольку заказчик зачастую проверяет результат именно в Outlook.

Сравнив полученные письма, можно однозначно сказать, что TJML справился лучше, чем React Email.

## Итоги

После пристального изучения фреймворка React Email можно сделать следующие выводы:

**Плюсы:**

- Доступна **тестовая отправка письма** прямо со страницы демо-сервера
- Отметим **привлекательный дизайн сервиса**, лаконичность и приятное для восприятия оформление сайта.

**Недостатки:**

- В созданных с помощью React Email письмах присутствуют **проблемы с отображением** в различных почтовых клиентах, особенно в outlook
- Для React Email не предусмотрена «песочница»
- **Отсутствие поддержки AMP-email** – серьезный недостаток для современного email-фреймворка
- Не предусмотрена возможность  **тестирования отображения письма в темной теме.**

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

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

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

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

small_1564х834.jpg

thumbnail_1564х834.jpg

1564х834.jpg

React email vs TJML: сравнение фреймворков

В современном мире внимание пользователей — самый ценный ресурс. Статичные письма уже не вызывают восторга, а долгие переходы по ссылкам раздражают. Но что если ваша рассылка станет интерактивной прямо в почтовом ящике? Это не магия, а [**AMP-письма**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu) — технология, которая меняет представление о том, как можно общаться с аудиторией через email.

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

## Пример от [Findomestic](https://amp.dev/success-stories/findomestic)

<Img
img="/api/uploads/Findomestic_Sample_Email_6cfee92223.gif"
alt="Пример AMP-письма"
/>

Findomestic хотели сделать свои рассылки более удобными для пользователей, чтобы повысить конверсии. Они использовали AMP, чтобы выделиться среди конкурентов и добавить интерактивности в свои письма.

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

[**A/b-тестирование**](https://altcraft.com/ru/blog/abn-i-mvt-testirovanie) AMP- и классических писем на Черную пятницу показало:

- Открываемость выросла на 128% (35,4% против 15,5%).
- Клики увеличились на 133% (1,4% против 0,6%).

<Note>
Создавать такие письма легко с конструктором email-рассылок [**Pixcraft**](https://pixcraft.io/ru/builder). Теперь создание готового сообщения занимает всего несколько минут, и для этого не нужны знания HTML. Просто выбирайте готовые блоки, меняйте их оформление, добавляйте текст и ссылки — все это можно сделать в удобном визуальном режиме.
</Note>

## Пример от СДЭК 

<Img
img="/api/uploads/amp_primery_sdek_d80c56d812.gif"
alt="Пример AMP-письма от СДЭК"
/>

В письме от агентства [**Kinetica**](https://kinetica.su/) пользователь видит изображение нескольких котов и,  чтобы получить совет о зарубежном шопинге, ему нужно нажать на одного из них. При клике на изображение срабатывает механизм AMP-компонента ```<amp-bind>```, который обновляет содержимое письма в реальном времени. Кот «сдвигается», а на его месте появляется полезная рекомендация. 

Чтобы сделать механику понятнее, стоит добавить четкую инструкцию, например, «Нажми на меня» — так пользователь точно разберется, как взаимодействовать с емейлом. 

## Пример от Volkswagen (дизайн: [RRAP](https://www.rapp.com/))

<Img
img="/api/uploads/amp_primer_volkswagen_da99d162c1.png"
alt="Пример AMP-письма от Volkswagen"
/>

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

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

## Пример от Huel 

<Img
img="/api/uploads/amp_primer_golosovalka_154551fe9a.png"
alt="Пример AMP-письма от Huel"
/>

В этом письме пользователи выбирают свой любимый вкус напитка через интерактивную голосовалку, реализованную с помощью технологии AMP. Все, что нужно — нажать на один из предложенных вариантов. Данные о голосах пользователей отправляются на сервер с помощью компонента ```<amp-form>```.

Результаты отображаются в реальном времени благодаря ```<amp-list>```, который динамически обновляет содержимое письма. Процентное соотношение голосов за каждый вкус отображается в бутылке уровнем напитка и числовыми процентами.

Эта механика не только вовлекает получателя, но и дает ему чувство участия: пользователи видят, как их выбор соотносится с множеством других голосов.

## Пример от Disney 

<Img
img="/api/uploads/amp_primery_krossword_ce5ca229b6.jpg"
alt="Пример AMP-письма от Disney"
/>

В этом письме для детей используется увлекательная игровая механика — кроссворд, который ребенок решает прямо в почтовом ящике. Нужно угадать персонажей, опираясь на силуэты и краткие описания, и ввести их имена в форму внутри письма. Для ввода ответов также используется ```<amp-form>```, который позволяет взаимодействовать с письмом без перехода на внешние страницы. 

Вся логика и обновления контента в емейле происходят с использованием AMP-компонента ```<amp-bind>```, который привязывает данные к интерактивным элементам и обновляет их в реальном времени. Информация о правильных ответах и изменяющиеся изображения персонажей также обрабатываются через AMP-теги, что позволяет отображать новый контент без перехода из письма.

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

## Пример от Toms 

<Img
img="/api/uploads/amp_primery_toms_26ca91543a.jpg"
alt="Пример AMP-письма от Toms"
/>

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

Для реализации механики применяются состояния и ```<amp-bind>```, которые позволяют динамически менять изображение, а также ```<amp-img>``` для отображения светящихся и обычных вариантов обуви. Создается интересный визуальный эффект прямо в почтовом ящике, без необходимости перехода на внешний сайт. 

## Пример от Mail.ru 

<Img
img="/api/uploads/amp_primery_digest_fb14394cd3.gif"
alt="Пример AMP-письма от Mail.ru"
/>

Письмо, созданное Pixcraft для «Mail Облако», делает знакомство с новыми функциями простым и увлекательным благодаря интерактивному формату. Вместо обычного текста пользователю предлагают сыграть в игру: ответить на вопросы и сразу получить развернутую информацию о каждой функции. 

Механика реализована с помощью AMP-компонентов. Пользователь выбирает ответы, а результат и дополнительная информация появляются мгновенно благодаря ```<amp-bind>```. Такой подход создает живое взаимодействие прямо в почтовом ящике, делая письмо динамичным, современным и наглядным.

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

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

Такие письма не только повышают открываемость и кликабельность, но и создают уникальный опыт для пользователей. 
Если вы еще не применяете AMP в своих email-кампаниях — самое время начать. В этом вам помогут конструктор емейлов Pixcraft и наш [**плагин для Figma**](https://pixcraft.io/ru/figma). 

С Pixcraft вы можете легко разработать как обычные HTML-письма, так и интерактивные AMP-рассылки, существенно увеличивая конверсию и вовлечённость.

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

small_amp-primery-pisem.jpg

thumbnail_amp-primery-pisem.jpg

amp-primery-pisem.jpg

Как вдохнуть жизнь в email-рассылку: лучшие примеры AMP-писем

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

Pixcraft предоставляет решение этой проблемы: удобный и понятный плагин для Figma, который позволяет создать шаблон письма и готовый HTML-код за несколько минут. В этой статье мы рассмотрим, как с помощью [**Pixcraft Email Generator**](https://pixcraft.io/ru/figma) быстро создать свой шаблон письма, а также настроить его уникальную структуру и мультимедийное содержание.

## Создание готового шаблона за несколько минут

Для начала работы создайте новый файл в Figma и найдите **Pixcraft Email Generator** в меню Действий на панели инструментов. Запустите плагин:

<Img
img="/api/uploads/1_0a3d51aac7.png"
alt="Figma Pixcraft plugin"
src="Плагин Pixcraft Email Generator"
/>

<Note>
В плагине доступна версия интерфейса на русском языке. Для того чтобы переключиться на другой язык, нажмите на значок планеты в правом нижнем углу плагина. 
</Note>

В открывшемся окне вам предложат пройти руководство по использованию плагина, которое вы можете пропустить. Чтобы создать новый шаблон, перейдите на вкладку **New** и выберите **Blank email**:

<Img
img="/api/uploads/2_b82f124d97.png"
alt="New Blank email"
src="Создание нового письма"
/>

<Note>
Вы можете сгенерировать базовый шаблон письма с заголовком, изображением, кнопкой и футером нажатием кнопки **Simple email**. В таком случае вам останется только заменить изображения и текст на собственные.
</Note>

Перед вами появится пустой шаблон письма. Наполните его элементами из вкладки **Assets**. Эти элементы разделены на следующие категории:

**Blocks** — блоки контента, например, новостные блоки, баннеры и прочее
**Headers** — заголовок письма, его «шапка»
**Images** — изображения в письме
**Texts** — любые блоки текста
**Buttons** — [Call to Actions-кнопки](https://altcraft.com/ru/blog/chto-takoe-cta), содержащие призыв пользователя к действию
**Footers** — нижняя часть письма, так называемый «подвал» письма
**AMP** — интерактивные элементы, такие как формы обратной связи и карусели изображений, а также их html-версия
**Dividers** — разделители пунктов письма.

<Img
img="/api/uploads/3_694121e1e8.png"
alt="Assets"
src="Окно Assets"
/>

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

<Img
img="/api/uploads/4_f0516043ad.png"
alt="New block"
src="Добавление элемента"
/>

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

<Note>
При создании письма вы также можете использовать свой дизайн макета. Главным условием для того, чтобы плагин корректно его отрендерил, является применение режима **Auto layout** для фреймов в Figma. 
</Note>

Шаблон готов! Перейдите в меню предпросмотра, для этого выберите весь основной фрейм с шаблоном и нажмите на кнопку **Preview**. Перед вами появится окно тестирования письма. Именно таким его увидит получатель:

<Img
img="/api/uploads/five_750ea79887.png"
alt="Preview mode"
src="Режим предпросмотра"
/>

В этом окне пользователю доступен следующий инструментарий:

* Переключатель режима предпросмотра для **HTML и AMP-версии письма**
* Переключатель режима отображения **десктопной\мобильной** версии письма
* Проверка отображения письма **в темной теме**. Большинство мобильных почтовых клиентов автоматически преобразуют письмо, если выбрана темная тема, поэтому необходимо учитывать, какой вид примет ваше письмо после изменения темы. Также доступен режим имитации **полной инверсии цвета**, используемый в приложении Gmail на iOS.
* Кнопка **Screenshot** создаст снимок содержимого письма, которым вы можете поделиться, например, с клиентом
* На вкладке **Show Code** можно просмотреть код готового письма и его размер, там же вы можете «сжать» код при необходимости

Если итоговый результат вас устраивает, перейдите к **экспорту шаблона**, нажав на соответствующую кнопку в верхней части окна:

<Img
img="/api/uploads/6_9858c2479e.png"
alt="Export template"
src="Экспорт шаблона"
/>

При желании вы можете добавить к шаблону тему письма и прехедер. В плагине доступно сохранение в виде **архива с кодом и изображениями**, сохранение **в учетной записи Pixcraft**, а также экспорт в сервисы почтовой рассылки, например, **в Altcraft Platform**:

<Img
img="/api/uploads/7_79decc7b96.png"
alt="External services export"
src="Экспорт шаблона в другие сервисы"
/>

## Кастомизация шаблона

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

### Ссылки для кнопок, надписей и изображений

Если вы хотите вставить в кнопки или изображения ссылки для перехода, выделите нужный элемент и перейдите на вкладку **Properties**. В поле **Link address** добавьте URL-ссылку ресурса:

<Img
img="/api/uploads/8_27fe582818.png"
alt="Add URL"
src="Создание ссылки в кнопке"
/>

Для того чтобы добавить гиперссылку в текст, выделите фрагмент текста и добавьте ссылку в меню **Properties**. То же самое вы можете сделать с помощью функции **Create link** в Figma:

<Img
img="/api/uploads/9_275103a5a3.png"
alt="Create link"
src="Создание ссылки в тексте"
/>

Если вы не хотите, чтобы какой-то элемент шаблона был распознан как кнопка (например, промокод для копирования), вы можете переключить соответствующий ползунок в этом же разделе:

<Img
img="/api/uploads/10_383937dc05.png"
alt="Button mode"
src="Распознавание кнопки"
/>

### Выгрузка блоков в виде изображений

Плагин может выгрузить некоторые элементы в качестве изображений, а не в виде кода. Для этого на вкладке Properties выбранного объекта нажмите кнопку **Convert to image**. К преобразованному блоку можно добавить описание и заголовок изображения:

<Img
img="/api/uploads/11_8c1e16a4cd.png"
alt="Convert image"
src="Преобразование блока в картинку"
/>

То же самое вы можете сделать с помощью стандартного функционала Figma, для этого оберните блок в группу:

<Img
img="/api/uploads/12_33bdda8094.png"
alt="Grouping"
src="Группирование элементов блока"
/>

### Управление адаптацией блоков

Зачастую элементы в мобильной версии письма отображаются не так, как подразумевалось при создании. Чтобы избежать подобных ситуаций, в плагине Pixcraft вы можете настроить **порядок блоков** для мобильной версии:

<Img
img="/api/uploads/13_04c976bd15.png"
alt="Columns display"
src="Настройка порядка блоков"
/>

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

<Img
img="/api/uploads/vid1_39672b4a17.png"
alt="Reorder preview"
src="Порядок блоков в письме"
/>

Также доступна настройка **боковых отступов и ширины всего письма**. Для настройки этих параметров, выберите основной фрейм и укажите нужный режим отображения:

<Img
img="/api/uploads/14_9071dca1a8.png"
alt="Paddings"
src="Настройка отступов и ширины"
/>

### HTML и AMP-отображение

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

Создайте AMP и HTML-элементы, например, форму для заполнения и сноску со ссылкой на службу поддержки. Для сноски в разделе Properties укажите отображение только для HTML-версии:

<Img
img="/api/uploads/15_82450b571b.png"
alt="HTML and AMP"
src="Настройка отображения контента"
/> 

Теперь в тех случаях, когда AMP-форма по какой-то причине не появится в письме, пользователь увидит сноску с контактами для обратной связи:

<Img
img="/api/uploads/vid2_2324df4884.png"
alt="HTML and AMP preview"
src="AMP и HTML-контент"
/> 


### Помощь искусственного интеллекта

В случае, если вы не хотите самостоятельно сочинять выразительный текст или использовать ординарные стоковые фото, можете воспользоваться помощью **искусственного интеллекта**. Для доступа к нему вам необходимо предварительно авторизоваться в Pixcraft и войти в учетную запись в плагине. Нейросетевой помощник доступен для изображений и текстовых полей на вкладке **AI**:

<Img
img="/api/uploads/16_47d0d6e7f0.png"
alt="AI Helper"
src="Использование искусственного интеллекта"
/> 

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

<Img
img="/api/uploads/17_de860fb47b.png"
alt="AI text styling"
src="Генерация текста"
/>

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

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

Узнать больше обо всех функциях плагина, зарегистрировать учетную запись Pixcraft, а также связаться с поддержкой вы можете на странице Pixcraft Email Generator в сообществе [Figma](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-generator-create-and-export-your-own-html-amp-email-templates).

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

small_figma-plugin.jpg

thumbnail_figma-plugin.jpg

figma-plugin.jpg

Email-верстка без кода: доступное и быстрое создание шаблонов писем в плагине для Figma

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

Давайте выясним, как сделать письма, которые легко читаются и идеально смотрятся на любом девайсе. 

## Подходы к мобильной адаптации емейлов

Для адаптации писем под разные устройства используется три основных подхода — давайте разберем их подробнее. 

### Масштабирование 

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

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

<Img
img="/api/uploads/adaptaciya_emeilov_mashstabirovanie_2c298c2ab6.jpg"
alt="Мобильная адаптация: масштабирование"
/>

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

### Адаптация на медиазапросах

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

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

Несмотря на очевидные преимущества подхода, есть и существенный недостаток — медиазапросы не работают в некоторых почтовых клиентах, например, они полностью не поддерживаются в Yandex (ни в веб-интерфейсе, ни в мобильном приложении). 

<Img
img="/api/uploads/adaptaciya_mediazaprosy_f43d0a2b06.jpg"
alt="Мобильная адаптация: медиазапросы"
/>

### Блочная адаптация

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

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

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

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

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

<Img
img="/api/uploads/adaptaciya_emeilov_bloki_c2a880b1a6.jpg"
alt="Мобильная адаптация: блочная адаптация"
/>

Если нет времени заниматься мобильной адаптацией, попробуйте визуальный генератор писем [**Pixcraft**](https://pixcraft.io/ru/builder). Он обеспечивает адаптивность и отзывчивый дизайн, который корректно отображается даже без медиазапросов, например, в Yandex.

### Какой подход выбрать

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

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

## Что учитывать в дизайне писем 

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

**Кнопки.** Основное различие между использованием мобильных устройств и компьютеров — способ управления: на мобильных экранах всё происходит через касания пальцем, а не с помощью мыши и курсора. Даже если ваша кнопка с [**призывом к действию**](https://altcraft.com/ru/blog/chto-takoe-cta) (CTA) очень привлекательна, но зона нажатия слишком маленькая, то количество кликов снизится.

Рекомендуемый минимальный размер для удобных зон нажатия — 44x44 пикселя. В некоторых случаях имеет смысл делать кнопки ещё больше, например, на всю ширину экрана, чтобы их было удобнее нажимать большим пальцем.

**Темная тема.** При автоматическом переходе письма в темную тему для писем со светлым фоном происходит инверсия яркости: фон становится темным, а текст — светлым. В случае писем с темным фоном инверсия обычно не происходит, за исключением Gmail на iOS.

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

<Img
img="/api/uploads/adaptaciya_emeilov_temnaya_tema_b717c3797c.jpg"
alt="Мобильная адаптация: темная тема"
/>

**Ретина-адаптация.** Retina-дисплей — изначально термин компании Apple и технически относится только к их продукции, но сейчас так часто называют любые экраны с высокой плотностью пикселей. Чтобы изображение выглядело чётко на таких экранах, его нужно сохранять в увеличенном размере — как минимум в два раза больше.

<Img
img="/api/uploads/adaptaciya_emeilov_retina_fb8a496d59.jpg"
alt="Мобильная адаптация: ретина"
/>

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

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

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

Правильно адаптированные электронные письма, учитывающие различные устройства и размеры экранов, способствуют повышению вовлечённости и улучшают взаимодействие с вашими подписчиками.

В статье выясним, как делать емейлы, которые корректно отображаются на любых устройствах. А также расскажем, какие есть подходы к мобильной адаптации. 

small_adaptaciya-emeilov-main.jpg

thumbnail_adaptaciya-emeilov-main.jpg

adaptaciya-emeilov-main.jpg

Адаптивный дизайн: как делать красивые емейлы, которые правильно отображаются

Рассмотрим эффективность MJML и TJML-фреймворков при создании email-рассылок, определим преимущества и недостатки.

small_MJML-TJML.jpg

thumbnail_MJML-TJML.jpg

MJML-TJML.jpg

MJML или TJML: испытываем емейл-фреймворки на практике 

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

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

<Img
img="/api/uploads/Konstruktor_pisem_fc7bfa536f.jpg"
alt="Конструктор писем Pixcraft"
src="Конструктор писем для рассылки Pixcraft"
/>

## В чём преимущества конструкторов писем

**Быстрая сборка емейла.** Конструкторы предлагают готовые блоки и шаблоны: тексты, изображения, кнопки, которые можно просто перетащить в нужное место, а затем отредактировать. Это сокращает время на создание емейла, особенно если у вас уже есть стандартный шаблон письма.

**Качественная кроссплатформенная вёрстка.** Хорошие конструкторы формируют код так, чтобы письмо корректно отображалось на различных устройствах и в разных почтовых клиентах (Gmail, Outlook, Yandex, Apple Mail и т.д.). Конструктор сам решает вопросы совместимости.

**Не требует знаний вёрстки.** С помощью конструктора можно создать качественное письмо, даже не зная HTML и CSS. Все блоки автоматически подгоняются друг под друга и выравниваются так, чтобы письмо выглядело аккуратно и привлекательно. 

**Удобство работы с мастер-шаблонами.** В конструкторах обычно есть возможность создать мастер-шаблон с заранее подготовленными блоками, которые можно комбинировать для создания различных типов рассылок: [**триггерных**](https://altcraft.com/ru/glossary/chto-takoe-triggernye-rassylki), информационных, промоакций и других.

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

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

Мастер-шаблон идеально подходит компаниям, которые ценят порядок и единообразие. С помощью него все письма выглядят аккуратно и профессионально, что укрепляет [**имидж бренда**](https://altcraft.com/ru/blog/upravlenie-reputaciej-brenda).

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

## Недостатки конструкторов писем 

Конструкторы email-рассылок действительно удобны, но у них есть и свои минусы, которые могут создать сложности — особенно если вам нужен высокий уровень кастомизации. Рассмотрим основные недостатки:

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

**Иногда страдает качество верстки писем.**
Качество вёрстки сильно варьируется между конструкторами. Так, например, некоторые из них не способны обеспечить корректное отображение в том же Outlook или в почтовых клиентах, которые не поддерживают медиазапросы, к примеру, в Яндексе. Также многие блочные редакторы в принципе не учитывают отображение в менее популярных почтовиках, таких как Рамблер.

Некоторые конструкторы создают довольно «тяжелый» HTML-код из-за большого количества служебных тегов и атрибутов, которые они добавляют автоматически. Это важно, потому что, например, Gmail или Yahoo ограничивают размер кода до ~100 КБ, и если ваше письмо превышает этот лимит, оно может быть обрезано, а важные элементы — удалены. 

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

<Img
img="/api/uploads/kod_e2c9346c2e.jpg"
alt="Пример ограниченного кода"
/>

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

**Сложность редакторов.**
У некоторых конструкторов такой запутанный интерфейс, что разобраться в нём бывает непросто — особенно новичкам. В таких случаях создание email-рассылки может стать настоящим испытанием. Требуется определённый уровень подготовки и знаний. Иногда проще написать код самостоятельно, чем пытаться разобраться в интерфейсе конструктора. Если у вас нет опыта работы с такими инструментами, придется потратить немало времени или найти более «дружелюбный» [**блочный редактор**](https://pixcraft.io/ru). 

Pixcraft позволяет редактировать оформление, добавлять ссылки, менять тексты и даже использовать [**AMP-элементы**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe) —  при этом сразу видно, как будет выглядеть итоговое письмо. Работа идет быстро и плавно, без сложных настроек и перегруженных меню. На создание письма уходит всего несколько минут, и в итоге вы получаете оптимизированный HTML-код, который будет корректно отображаться в почтовых клиентах.

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

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

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

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



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

small_Konstruktory-pisem.jpg

thumbnail_Konstruktory-pisem.jpg

Konstruktory-pisem.jpg

Конструкторы писем: плюсы и минусы

Когда речь идет о создании эффективных email-рассылок, важно выбрать удобный инструмент. Pixcraft и Emailify — это два популярных плагина для Figma, которые предлагают разные подходы к разработке писем.

В статье сравним ключевые функции [**Pixcraft**](https://pixcraft.io/ru/figma) и [**Emailify**](https://www.hypermatic.com/emailify/), их возможности по настройке и интеграции, а также удобство использования, чтобы вы могли выбрать лучший вариант для своих рассылок.

## Emailify  

<Img
img="/api/uploads/emailify_new_email_a96b89d9f5.jpg"
alt="Создание емейла"
/>

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

<Img
img="/api/uploads/emailify_settings_d6be4a6562.jpg"
alt="Настройки емейла"
/>

Можно собрать письмо, используя эти заготовки, после чего отредактировать контент — заменить изображения и текст. 

Также есть возможность внести корректировки в оформление и отступы. Однако манипулировать структурой здесь нельзя.

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

При выделении блока можно перейти к детальным настройкам, нажав на кнопку «Настройки слоя».

Когда письмо готово, нажмите «Экспорт HTML». Здесь можно перейти в режим предпросмотра, указать тему письма и прехедер, а также выбрать формат для скачивания — HTML или MJML. Также есть возможность напрямую экспортировать в одну из поддерживаемых платформ ESP.

Важно отметить, что использование MJML для рендеринга сразу накладывает ряд проблем — там используется подход «mobile first» и медиазапросы, что ломает верстку в веб-интерфейсе Yandex. Также у MJML есть небольшие проблемы отображения в Outlook.

В плагине можно локализовать дизайн писем с помощью встроенных инструментов перевода. Emailify поддерживает экспорт и импорт переводов через Excel (XLSX) или интеграцию с платформами Lokalise и Crowdin, что упрощает создание емейлов для международной аудитории.

<Img
img="/api/uploads/emailify_background_color_1a27ab45ca.jpg"
alt="Конструктор писем. Настройки емейла"
/>

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

- **Есть бесплатная версия.** Подходит для тех, кто хочет протестировать возможности Emailify перед покупкой. План предоставляет 10 пробных попыток с полным доступом к функциям pro-версии. Пользователи могут создавать неограниченное количество шаблонов емейлов. Для активации бесплатной версии не требуется привязывать карту.
- **Pro-версия.** Оптимальный выбор для индивидуальных пользователей, которым нужен полный доступ к функциям. Pro-версия включает безлимитный экспорт HTML, неограниченное размещение изображений и GIF, загрузку на платформы и локализацию текста. Также в пакете предусмотрена поддержка клиентов. 
- **Версия для организаций.** Этот план разработан для крупных компаний и команд с высокими требованиями к email-рассылкам. Он предлагает доступ ко всем функциям, а также приоритетную техническую поддержку. 

### Главное 

- Инструмент довольно дорогой. Годовая подписка на pro-версию стоит больше $450, что может быть неподъемной суммой для небольших команд. 
- Нет возможности создавать [**AMP-письма**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). 
- Сервис зарубежный — могут быть проблемы с оплатой из России. 
- Использует MJML — отображение в Yandex будет некорректным.
- Emailify не предоставляет возможности глубокой кастомизации. Структура писем задается внутри плагина, что существенно ограничивает творческие возможности и гибкость в дизайне.
- Качество отображения может варьироваться в зависимости от почтового клиента. Использование MJML под капотом накладывает некоторые ограничения. Например, в России может возникнуть проблема с корректным отображением в Yandex. Также рекомендуется провести дополнительные тесты в Outlook.
- Интерфейс только на английском языке. 

## Pixcraft 

При первом запуске плагина вы видите пошаговую инструкцию. Здесь объясняется, как создать письмо, воспользоваться библиотекой и тонко настроить мобильную адаптацию.

<Img
img="/api/uploads/pixcraft_1_step_5de6220be0.png"
alt="Конструктор емейлов Pixcraft"
/>

В конце этого гайда у вас уже будет готовое письмо, и останется всего один шаг до его экспорта. Но обо всем по порядку. 

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

<Img
img="/api/uploads/pixcraft_2_step_d2270f16d0.png"
alt="Генератор писем Pixcraft"
/>

Библиотека ассетов разделена на категории: блоки, шапки, изображения, тексты, кнопки, футеры, AMP-компоненты и разделители. Здесь можно найти ассеты на любой вкус. Если же ничего не подошло, вы можете создать собственный блок в Figma, используя автолэйауты.

<Img
img="/api/uploads/pixcraft_step3_d1fb3048eb.png"
alt="Конструктор писем для рассылки Pixcraft"
/>

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

<Img
img="/api/uploads/pixcraft_4_step_0b1c123d97.png"
alt="Верстка email рассылок с Pixcraft"
/>

Вкладка «Нейросеть» поможет создать современное и стильное письмо. Если выделить изображение, откроются инструменты для генерации иллюстраций: с помощью Pixcraft можно задать стиль (арт, фото, скетч, мультик или аниме), выбрать настроение и описать, что должно быть на картинке. Нейросеть также работает с текстом — можно сгенерировать текст по запросу, сделать рерайт в нужном стиле или просто исправить ошибки.

<Img
img="/api/uploads/pixcraft_5_step_63c35ce41e.jpg"
alt="HTML конструктор Pixcraft"
/>

Когда письмо готово, можно перейти в режим предпросмотра, чтобы оценить, как оно выглядит на мобильных устройствах и в [**темной теме**](https://altcraft.com/ru/blog/invertirovanie-cvetov-v-rassylke). В этом режиме формируются как статичный HTML, так и интерактивная AMP-версия письма. Если всё отображается корректно, можно переходить к последнему шагу — экспорту.

На этапе экспорта указывается тема письма и прехедер (с возможностью выбрать короткий прехедер). По умолчанию выгружается только HTML-версия, но можно также добавить AMP и [**TJML**](https://pixcraft.io/ru/framework) или сразу экспортировать емейл в одну из поддерживаемых ESP.

<Img
img="/api/uploads/pixcraft_6_step_539a6c85c2.png"
alt="Поддерживаемые ESP"
/>

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

До регистрации доступны пять выгрузок. После создания аккаунта вы можете пользоваться pro-версией бесплатно две недели. Использование плагина можно добавить к любому из следующих планов:  

- **Тариф Personal.** Идеален для индивидуальных пользователей, которые работают над небольшими проектами. Подписка включает неограниченные черновики, до 50 сохраненных шаблонов и 1 проект. Также доступно 1 000 AMP-событий с возможностью увеличения их количества. 
- **Тариф Starter.** Этот вариант подойдет для небольших команд (три пользователя), которым требуется больше возможностей для работы. При этом доступны неограниченные черновики, до 300 сохраненных шаблонов и два проекта. Включено от 3 000 AMP-событий.
- **Тариф Pro.** Оптимальное решение для команд (десять пользователей) или компаний с более объемными задачами. Этот тариф включает неограниченные черновики, шаблоны и проекты. План также предлагает от 5 000 AMP-событий.

### Главное 

- Есть разные планы подписки, которые подходят как для фрилансеров, так и для больших команд. Вы можете выбрать то, что лучше всего соответствует вашим потребностям. 
- Поддерживает обычную HTML-верстку емейлов и интерактивные AMP-письма. 
- Pro-версия для 10 пользователей обойдется дешевле, чем план Enterprise для Emailify. 
- Российский сервис. 
- Поддерживает экспорт в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие.
- Интерфейс на русском, английском, испанском и французском языках. 

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

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

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


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

small_figma-plugins.jpg

thumbnail_figma-plugins.jpg

figma-plugins.jpg

Pixcraft или Emailify: какой плагин использовать для создания емейлов

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

Если при взаимодействии со взрослой аудиторией основная сложность заключается в обеспечении открытия email из-за огромного количества писем, то проблема [**рассылок**](https://altcraft.com/ru/blog/kak-dostat-klienta-v-rassilke) для детей —  отсутствие подходящего и интересного им контента.

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

## Проработка концепции

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

<Img
img="/api/uploads/pismo_struktura_11zon_48b5b42fe9.jpg"
alt="Проработка концепции"
/>

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

<Img
img="/api/uploads/pismo_soberi_monstrika_e658030d60.png"
alt="Вариант письма"
/>

Дизайнеры команды Mail к этому моменту концептуально проработали внешний вид и основные фичи, которые будут у нашего монстрика.

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

## Немного технических деталей

Естественно, для реализации подобного игрового письма может использоваться [**только AMP**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Так как письмо ориентировано главным образом для пользователей mail.ru, большинство увидят именно интерактивную версию. 

Для обеспечения корректного отображения письма и ускорения процесса использовали [**TJML-фреймворк**](https://pixcraft.io/ru/framework). Если говорить про особенности реализации интерактивности AMP — для каждого сервиса было предусмотрено свое состояние, которое принимало значение 1 (активно) или 0 (неактивно), и в зависимости от него мы показывали или не показывали определенный слой (с хвостом, ушками, глазами и т.д.).

Чтобы фиксировать данные о самых популярных сервисах среди детей, при сборке монстрика мы также формировали форму, куда добавляли выбранные сервисы и при клике «готово» отправляли в Pixcraft.

На последнем шаге мы показываем фотографию монстрика с именем — здесь также есть небольшая тонкость, которую следует упомянуть. Дело в том, что mail.ru не умеет работать с состояниями по умолчанию, то есть вот такая запись будет проигнорирована:

```xml
<amp-state id="names">
  <script type="application/json">
	["Цифрош", "Сервисио", "Файлер", "Отправита", "Мегагай", "Мэйлия", "Черновер"]
  </script>
</amp-state>
```
При этом в Gmail она бы отработала корректно.

Универсальным решением в нашем случае было задать массив возможных имен сразу для span, обратившись к случайному элементу массива:

```xml
<span [text]="['Цифрош', 'Сервисио', 'Файлер', 'Отправита', 'Мегагай', 'Мэйлия', 'Черновер'][floor(random() * 7)]"></span>
``` 
</br>
С обоями для телефона тоже получилось не все просто — 7 доступных сервисов позволяют сформировать 128 различных монстриков. Делать их вручную пришлось бы очень долго, поэтому мы написали небольшую программу, которая сгенерировала все возможные варианты.

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

## Статистика

После запуска письма мы собрали статистику за месяц и проанализировали. Так как речь идет об AMP-письмах, то для начала следует озвучить процент AMP-открытий: 

<Img
img="/api//uploads/welcome_pismo_statistika_1542f81de4.png"
alt="Статистика"
/>

Для  уникальных открытий — AMP 62%, html — 38%. А для неуникальных AMP — 66%, html — 34%. **Конверсия в отправку формы** (клик кнопки «готово») составила 19,9% от открывших письмо. Это говорит нам о том, что к [_AMP-письмам_](https://altcraft.com/ru/blog/chto-takoe-amp-pisma) неоднократно возвращались, открывали несколько раз, чтобы собрать разных монстриков, а значит, задача заинтересовать пользователя точно была выполнена.

Также мы проанализировали, какие сервисы для детей самые популярные и востребованные, и получили следующую картину:

|    |         | 
|------------|-----------------|
| Облако     | 44.29%          | 
| Мульты     | 46.20%          | 
| Матеша     | 44.85%          | 
| Игры     | 49.52%          | 
| Рисовалка     | 50.43%          | 
| Маруся     | 44.60%          | 
| Эмодзи     | 49.92%          | 

Но, есть вероятность, что дети просто выбирали самые красивые фичи для монстрика, а не сервисы, которые их действительно заинтересовали. Поэтому неудивительно, что «Рисовалку» добавили более 50% подписчиков — она добавляла симпатичный хвост-кисточку,  «Эмодзи», который выбрала почти половина — добавляла милые глазки, а «Игры», которые ненамного отстали по популярности — добавляли крылья.

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

Подобная проработка велком-писем позволяет выстроить доверительный диалог с аудиторией в самом начале пути. 

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

Важную роль в этом успехе сыграла платформа PixCraft. Она помогла быстро и легко создавать качественную верстку и обеспечило работу серверной части AMP-письма.

В статье расскажем, как мы прорабатывали концепцию велком-письма для сервиса «Детская почта». 

small_welcome-email-main.jpg

thumbnail_welcome-email-main.jpg

welcome-email-main.jpg

Как создать велком-письмо для сложной аудитории 

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

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

## [Mockup Plugin](https://www.figma.com/community/plugin/817043359134136295/mockup-plugin-devices-mockups-print-mockups-ai-mockups) 

<Img
img="/api/uploads/figma_mockup_706f96370e.jpg"
alt="Mockup плагин"
/>

Инструмент для создания мокапов.  

- Большая библиотека. В ней вы найдёте макеты устройств, брендовые элементы и другие уникальные решения. - У некоторых мокапов есть варианты — можно менять размер или цвет. Также есть возможность создавать свои макеты. 
- Есть ИИ. После загрузки [**лого**](https://altcraft.com/ru/glossary/logotip-chto-eto-i-kak-ego-sozdat) или ввода текста генерируется готовое решение. 
- Можно редактировать уже готовые мокапы. 
- Установка бесплатная. [**Подписка**](https://www.ls.graphics/unlimited-access) с безлимитным доступом ко всей библиотеке за $10 в месяц. 

## [Batch Styler](https://www.figma.com/community/plugin/818203235789864127/batch-styler) 

<Img
img="/api/uploads/figma_batch_styler_bd19fabb54.jpg"
alt="Batch Styler плагин"
/>

Бесплатный плагин для изменения цвета и стилей. 

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

## [Styles & Variables Viewer](https://www.figma.com/community/plugin/1332412206147274506/export-styles-and-variables-to-css)

<Img
img="/api/uploads/figma_styles_variables_0357b65b37.jpg"
alt="Styles and Variables плагин"
/>

После того как вы обновили стили, можно приступить к их выгрузке в CSS. В этом поможет наш плагин styles&variables viewer. Он позволит заменить dev-режим Фигмы, а в чем-то он даже значительно удобнее.

Отображает все переменные и стили из всех коллекций в удобном для разработчиков формате — в JSON, в виде переменных или классов CSS.

Существует 3 доступных режима работы:

- Вывод всех переменных Figma.
- Вывод всех стилей Figma.
- Вывод стилей для выбранного элемента.

Причем при выделении будут отображены:

- Все его CSS-стили;
- Если слой текстовый, то текст для удобного копирования;
- Если у слоя есть фоновое изображение, то кнопка для экспорта оригинального изображения;
- Если выбрано 2 слоя — размеры слоёв и расстояние между ними.

## [Dark Me](https://www.figma.com/community/plugin/1210863977149285175/dark-me) 

<Img
img="/api/uploads/figma_darkme_977ccc3dd6.jpg"
alt="Darkme плагин"
/>

Плагин для создания тёмной темы для пользовательского интерфейса или электронного письма. 

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

## [PixCraft Email Generator ](https://pixcraft.io/ru/figma)

<Img
img="/api/uploads/figma_email_generator_64873a39be.jpg"
alt="Email generator плагин"
/>

Плагин для создания писем. 

- **Позволяет легко создавать готовые к отправке HTML электронные письма.** Плагин обеспечивает корректное отображение в любых почтовых клиентах, включая мобильные и все версии Outlook. Помимо этого, мобильную адаптацию можно гибко настраивать.
- **Много готовых ассетов.** Библиотека содержит более ста готовых компонентов, включая блоки контента, шапки и подвалы писем, кнопки, изображения, текстовые блоки, разделители и AMP-компоненты. Также можно создавать свои собственные ассеты и разбивать их на категории. 
- **Есть возможность предпросмотра.** Не выходя из плагина, вы можете проверить, как письмо отображается на мобильных устройствах различной ширины, а также в тёмном режиме.
- **Экспорт.** Вы можете экспортировать макет прямо из плагина в [**Altcraft**](https://altcraft.com/ru), Unisender, Sendsay, Enkod, Dashamail, Mailganer и другие. Если же в списке нет подходящей ESP, то можно выгрузить в виде zip-архива.
- **Поддерживает** [**AMP**](https://pixcraft.io/ru/blog/amp-emails-chto-takoe). Можно экспортировать не только стандартный HTML, но и [**AMP HTML**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Вставляйте в письма формы, карусели и другие интерактивные элементы. 

## [Iconify](https://www.figma.com/community/plugin/735098390272716381/iconify)

<Img
img="/api/uploads/figma_iconify_e42c5c1996.jpg"
alt="iconify плагин"
/>

Библиотека векторных иконок. 

- Более 200 тысяч иконок и 150 наборов. 
- Можно импортировать иконки или просто перетаскивать их из плагина в Figma.
- Легко заменять выбранные иконки.
- Иконки всегда импортируются в формате SVG без дополнительной оплаты. 
- Сохраняется последняя посещённая вами страница — легко продолжить поиск. 

## [Isometric](https://www.figma.com/community/plugin/741184519069077841/) 

<Img
img="/api/uploads/figma_isometric_2c0427f0e7.png"
alt="Isometrics плагин"
/>

Простой плагин для Figma для создания изометрических слоёв. 

- Есть диалоговое окно, через которое можно одним щелчком мыши преобразовать макет в изометрический вид.
- Проект открыт для использования и распространяется под лицензией MIT.

## [Beautiful Shadows](https://www.figma.com/community/plugin/1068595505353552645/)

<Img
img="/api/uploads/figma_beautiful_shadows_9e754cc930.png"
alt="Beautiful Shadows плагин"
/>

Инструмент для создания и настройки теней. 

- Прост в использовании — достаточно перетащить источник света в окне плагина относительно центрального элемента.
- Цвет тени настраивается. 
- Имеет открытый исходный код и распространяется по лицензии MIT.

## [Remove BG](https://www.figma.com/community/plugin/738992712906748191/remove-bg)

<Img
img="/api/uploads/figma_plugins_remove_bg_f7409a4911.jpg"
alt="Remove BG плагин"
/>

Инструмент для удаления фонов. 

- Фон изображений удаляется автоматически всего одним кликом. 
- Можно добавить белый фон к фото, сделать его прозрачным (PNG); выделить, изолировать или получить вырезанный объект.
- Для использования требуется учётная запись remove.bg. Базовый план подписки — €0,90 за изображение, единоразовый платёж — €9. 

## [Jitter. Animation for Figma](https://www.figma.com/community/plugin/961270034818256057/) 

<Img
img="/api/uploads/figma_jitter_f4c1474d38.jpg"
alt="Jitter плагин"
/>

Простой бесплатный плагин для создания анимаций. 

- Позволяет легко анимировать интерфейсы (мобильные приложения, веб-сайты, лендинги, микровзаимодействия). Интуитивно понятный процесс создания анимаций. 
- Есть экспорт в формате видео (до 4K, 60 fps), GIF и Lottie. Поддерживается прозрачный фон.
- Можно создать свою систему моушн-дизайна.
- Легко делиться анимированными шаблонами.
- Есть возможность анимировать текст. 
- Есть готовые пресеты. Просто настройте их под свой проект в несколько кликов.

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

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

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

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

В статье разберем, какими плагинами для Figma пользоваться, чтобы сэконоить время и повысить эффективность работы. 

Блог