Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы
Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.
До 2019 года мы знали два способа создания вёрстки: в редакторе кода и в блочных редакторах. Идеальный блочный редактор пока не изобрели, поэтому свою агентскую вёрстку мы создавали в редакторах кода. До настоящего момента.
В конце 2019 года появился плагин для Фигмы, который позволяет, при соблюдении определённых правил при создании дизайн-макета, выгружать макет в готовое для отправки письмо.
В начале возможности плагина были ограничены, но идея нас зацепила. На тот момент казалось, что плагин может облегчить процесс создания простых дайджестов и триггеров. Мы познакомились с разработчиком плагина Григорием Машковцевым и предложили свою экспертную помощь в развитии продукта.
Мы предлагали разработчику исправления и фичи, участвовали в тестировании. В процессе работы над плагином стало очевидно, что мы недооценивали потенциал продукта, ведь в новом инструменте удалось реализовать поддержку даже самых сложных подходов и особенностей email-вёрстки.
Возможности плагина
1. Качество вёрстки на уровне высококлассного верстальщика.
К анализу и доведению до ума вёрстки, которую генерирует новый плагин для Фигмы, были привлечены наши ведущие верстальщики. Поэтому объём кода существенно снизился и сам код стал максимально соответствовать стандартам нашего агентства.
2. Адаптивность.
Имеется поддержка адаптивности — её теперь полностью контролирует дизайнер.
3. Поддержка Outlook.
Вёрстка электронных писем, которую генерирует плагин, постоянно тестируется в emailonacid.com и поддерживается популярными почтовыми клиентами, включая Outlook.
4. Поддержка произвольной базовой ширины письма.
Оптимальной считается базовая ширина 600px, но это не закон. Часто для лучшего результата требуется большая или меньшая базовая ширина. Плагин способен на программном уровне устанавливать базовую ширину в соответствии с шириной вашего дизайн-макета.
5. Возможность добавлять в письмо блоки с шириной, отличной от базовой.
Если необходимо сделать подвал, шапку письма или какой-то акцентный блок в содержимом шириной 100%, в Marka такое возможно.
6. Поддержка тёмных тем.
Письма в большинстве случаев достойно выглядят в тёмных версиях различных браузеров. А если всё же что-то не так — этим можно управлять.
7. Управление видимостью блоков на десктопе/мобильных.
Если требуется десктопной и мобильной аудитории показывать разные варианты одного и того же блока или вовсе не показывать одной из аудиторий определённый контент, то в Marka это очень просто реализовано.
8. Возможность использования Google-шрифтов.
Вы можете использовать в Фигме любой шрифт из коллекции Google Fonts — плагин автоматически добавит шрифты в письмо.
9. Автоматическая конвертация SVG-графики в растровую.
Плагин при выгрузке кода определяет фреймы с векторной графикой и преобразует их в PNG-формат.
10. Поддержка шахматных блоков.
В дизайне иногда используются блоки с чередованием: изображение-текст, текст-изображение, изображение-текст. Тогда в адаптивной версии у этих блоков должно быть чёткое следование: изображение-текст, изображение-текст, изображение-текст. Marka может и такое.
11. Выгрузка письма в архив с изображениями для экспорта этого архива в большинство сервисов рассылки.
MailChimp, ExpertSender, MindBox и другие системы рассылки позволяют загружать письмо в вёрстку в виде архива и сразу кодом в html-документе, где есть относительные ссылки до изображений в архиве. Marka умеет выгружать вёрстку писем в таком формате.
12. Опциональная автозагрузка изображений письма на облачный хостинг.
При активации этой опции плагин отдаст только вёрстку, а все изображения письма будут загружены на Яндекс.Облако.
13. Опциональная обработка текста письма «Типографом».
Позволяет на лету, как обещает описание к программе, «вместо знаков дюйма поставить нормальные кавычки («ёлочки» и „лапки“), поубивать лишние пробелы, в нужных местах заменить дефисы на тире, неразрывным пробелом „привязать“ все короткие союзы и предлоги к следующим за ними словам и произвести кучу других операций».
14. Опциональная минификация кода.
Если письмо весит больше 102 кБ, почтовый клиент Gmail отобразит его не полностью.
Если вы делаете в Marka письмо, которое не вписывается в лимит, то можно использовать опцию минификации. Она уберёт лишние символы (пробелы, переносы, комментарии) и сократит «вес» кода на 40%.
15. Возможность добавления невидимого прехедера.
Прехедер — это текст, который отображается в списке писем почтового клиента сразу после темы письма.
Как собирается письмо из мастер-шаблона с помощью Marka Email Generator
Лучше один раз увидеть:
Сравним использование плагина для Фигмы с другими способами вёрстки
Marka Email Generator — удобное No-code решение с агентским качеством вёрстки писем на выходе. Это совершенно новый подход к созданию письма и новые возможности. Сравним подход Marka с другими способами создания вёрстки:
Боевое применение нового плагина для Фигмы
Летом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.
Одним из первых заказчиков, для которых мы использовали новый инструмент, стал туроператор «Алеан».
Мы адаптировали дизайн мастер-шаблона под логику Marka Email Generator. Финальную сборку писем сейчас делает сам заказчик, и этот процесс напоминает работу с блочным редактором.
Ещё одна работа — письма для агентства i-Media:
Что говорят клиенты
Туроператор «Алеан»
Агентство интернет-рекламы i-Media
Как отреагировала команда
Что говорит дизайнер
Что говорит менеджер
Подытожим
Мы открыли новый путь создания вёрстки, были участниками его создания. Нашим клиентам тоже понравилось. Советуем использовать для своих задач Marka Email Generator, а сделать первые шаги поможет обучение, библиотека базовых компонентов от разработчика плагина.
Дата: 27.11.2020
Блин, не понимаю что делаю не так, сделал фрейм шириной 600 пикселей, "нарисовал" письмо, пытаюсь его сформировать через плагин Marka Email Generator, но всё едет вкривь и вкось, изображение становится уже а текст наоборот из аккуратного квадрата расползается в длинные строки. Никаких настроек в плагине не нашёл :(((. Или он работает только в "родных" базовых компонентах?