Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Большинство компаний делают рассылки как придется. Верстают письма в блоках Unisender и закрывают глаза на то, что выглядят они обычно не очень. Но если не умеешь дизайнить и кодить, выбирать не приходится. Мы, кажется, нашли неплохое решение. Чтобы сделать симпатичное письмо для рассылки, можно использовать плагин для Фигмы. Смотрите как.

Marka Email Generator — плагин для Фигмы. С ним можно собирать письма в графическом редакторе и сразу экспортировать их в HTML-документ. Разобраться с механикой интуитивно просто всем, кто хоть немного пользуется в работе Фигмой. Письма в плагине собирают из специальных блоков — ассетов. А чтобы отправить письмо пользователям, достаточно сохранить его и загрузить в любой сервис рассылки, например Unisender.

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

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

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

2. Готовые блоки. В плагине есть ассеты — готовые блоки, которые разбиты по категориям: шапка, подвал, контент, галерея, CTA. В каждой категории по несколько вариантов дизайна — можно примерить и выбрать наиболее подходящий.

Как в блочном редакторе. Можно выбрать шаблон письма и менять в нем контент. Готовые блоки (предустановленные) там тоже есть, но их очень мало, и они довольно топорные.

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

✅ В плагине можно делать нестандартные блоки и добавлять свои элементы.

❌ Не получится добавить анимацию, интерактивы и сложные механики. Такие элементы нужно делать через код с помощью верстальщика.

Как в блочном редакторе. Чтобы обрезать изображение или сгладить углы, нужно переходить в отдельное окно. Это не всегда удобно: изменения нельзя сразу увидеть в контексте письма. Еще один минус — сохранение по кнопке. Если забыл кликнуть «Сохранить» и вышел, придется делать всё заново.

✅ В редакторе можно сделать стандартный дизайн: изменить цвет кнопки, вставить иллюстрацию, наложить фильтр на картинку.

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

4. Работа в команде и автосохранение. В Фигме можно оставлять комментарии, смотреть работу одновременно и сразу вносить исправления. Не нужно ничего сохранять, отправлять по почте и скачивать себе на ноутбук. О сохранении вообще можно не переживать: всё происходит автоматически.

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

Когда будете выбирать инструмент, ориентируйтесь на свои возможности. Если у вас нет дизайнера, а письма пишет и верстает копирайтер, то вполне подойдет блочный редактор. Любой специалист, который занимается контентом, сможет быстро собрать в нем простое письмо. Если в команде есть дизайнеры и копирайтеры, которые работают в Фигме, можно делать письма с интересным визуалом через плагин. Мы, например, используем оба инструмента: обычные письма делаем в Unisender, а когда нужен креатив, идем в Фигму.

Для начала скачайте плагин. Чтобы запустить его и начать работу, в меню выберите Plugins → Marka Email Generator. Откроется окно с блоками, где нужно нажать на «+» и создать новый фрейм.

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

Когда письмо будет готово, нужно выделить фрейм и в окне плагина нажать на кнопку Preview. Здесь можно посмотреть, как будет выглядеть письмо на десктопной и мобильной версии.

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

Мы в редакции «Рыба» активно используем email-рассылку в работе. Можем и вам собрать письма с сильными текстами и приятным дизайном.