Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.

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

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

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

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

Возможности плагина

Качество вёрстки на уровне высококлассного верстальщика.
К анализу и доведению до ума вёрстки, которую генерирует новый плагин для Фигмы, были привлечены наши ведущие верстальщики. Поэтому объём кода существенно снизился и сам код стал максимально соответствовать стандартам нашего агентства.
Адаптивность.
Имеется поддержка адаптивности — её теперь полностью контролирует дизайнер.
Поддержка Outlook.
Вёрстка электронных писем, которую генерирует плагин, постоянно тестируется в emailonacid.com и поддерживается популярными почтовыми клиентами, включая Outlook.
Поддержка произвольной базовой ширины письма.
Оптимальной считается базовая ширина 600px, но это не закон. Часто для лучшего результата требуется большая или меньшая базовая ширина. Плагин способен на программном уровне устанавливать базовую ширину в соответствии с шириной вашего дизайн-макета.
Возможность добавлять в письмо блоки с шириной, отличной от базовой.
Если необходимо сделать подвал, шапку письма или какой-то акцентный блок в содержимом шириной 100%, в Marka такое возможно.
Поддержка тёмных тем.
Письма в большинстве случаев достойно выглядят в тёмных версиях различных браузеров. А если всё же что-то не так — этим можно управлять.
Управление видимостью блоков на десктопе/мобильных.
Если требуется десктопной и мобильной аудитории показывать разные варианты одного и того же блока или вовсе не показывать одной из аудиторий определённый контент, то в Marka это очень просто реализовано.
Возможность использования Google-шрифтов.
Вы можете использовать в Фигме любой шрифт из коллекции Google Fonts — плагин автоматически добавит шрифты в письмо.
Автоматическая конвертация SVG-графики в растровую.
Плагин при выгрузке кода определяет фреймы с векторной графикой и преобразует их в PNG-формат.
Поддержка шахматных блоков.
В дизайне иногда используются блоки с чередованием: изображение-текст, текст-изображение, изображение-текст. Тогда в адаптивной версии у этих блоков должно быть чёткое следование: изображение-текст, изображение-текст, изображение-текст. Marka может и такое.
Выгрузка письма в архив с изображениями для экспорта этого архива в большинство сервисов рассылки.
MailChimp, ExpertSender, MindBox и другие системы рассылки позволяют загружать письмо в вёрстку в виде архива и сразу кодом в html-документе, где есть относительные ссылки до изображений в архиве. Marka умеет выгружать вёрстку писем в таком формате.
Опциональная автозагрузка изображений письма на облачный хостинг.
При активации этой опции плагин отдаст только вёрстку, а все изображения письма будут загружены на Яндекс.Облако.
Опциональная обработка текста письма «Типографом».
Позволяет на лету, как обещает описание к программе, «вместо знаков дюйма поставить нормальные кавычки («ёлочки» и „лапки“), поубивать лишние пробелы, в нужных местах заменить дефисы на тире, неразрывным пробелом „привязать“ все короткие союзы и предлоги к следующим за ними словам и произвести кучу других операций».
Опциональная минификация кода.
Если письмо весит больше 102 кБ, почтовый клиент Gmail отобразит его не полностью.
Если вы делаете в Marka письмо, которое не вписывается в лимит, то можно использовать опцию минификации. Она уберёт лишние символы (пробелы, переносы, комментарии) и сократит «вес» кода на 40%.
Возможность добавления невидимого прехедера.
Прехедер — это текст, который отображается в списке писем почтового клиента сразу после темы письма.

Как собирается письмо из мастер-шаблона с помощью Marka Email Generator

Лучше один раз увидеть

Сравним использование плагина для Фигмы с другими способами вёрстки

Marka Email Generator — удобное No-code решение с агентским качеством вёрстки писем на выходе. Marka предоставляет новый подход к процессу создание письма и новые возможности. Сравним подход Marka с другими способами создания вёрстки:

	Вёрстка писем в редакторе кода	Создание письма в блочном редакторе	Использование плагина Marka
Трудозатраты	Необходим верстальщик, который воплотит в коде дизайн письма. Наиболее трудозатратный способ.	Чаще всего верстальщик не нужен. Письмо собирает менеджер или дизайнер.	Верстальщик не нужен. Письмо собирает менеджер или дизайнер.
Возможности дизайна	Ограничены уровнем верстальщика и здравым смыслом.	Ограничены предустановками и функциональностью блочного редактора. Невозможно реализовать нестандартные решения без вкрапления вёрстки.В некоторые редакторы можно внедрить свой дизайн блоков, но для этого необходим верстальщик	Ограничены только логикой структуры макета, которую необходимо поддерживать для возможности выгрузки.
Качество кода	Зависит от уровня верстальщика.	В большинстве современных редакторов оставляет желать лучшего.	На уровне вёрстки писем агентства Email Soldiers.
Pixel Perfect — попадание вёрстки в макет	Полностью в руках верстальщика и зависит от опыта.	100% Pixel Perfect	100% Pixel Perfect
Объём кода	Зависит от уровня верстальщика. При высоком уровне — минимальный объём кода.	Большой. Очень большой.	Средний
Удобство модификации и повторного использования	Верстальщики повторно используют решения, но от дизайнеров часто приходят задачи, требующие вёрстки с нуля.	По сути работа строится на использовании готовых решений.	Работа с адаптированным мастер-шаблоном напоминает работу с блочным редактором.

Боевое применение нового плагина для Фигмы

Летом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.

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

Мы адаптировали дизайн мастер-шаблона под логику Marka Email Generator. Финальная сборка писем сейчас производится на стороне заказчика и напоминает работу с блочным редактором.

Ещё одна работа — письма для агентства i-Media:

Что говорят клиенты

Туроператор «Алеан»

Анна Сахарова, интернет-маркетолог туроператора Алеан:

Технология Marka Email Generator вызвала у нас большой интерес: из макета, сделанного в Фигме, буквально за пару секунд получается письмо, свёрстанное в лучших практиках HTML.
Ребята из Email Soldiers подготовили для нас два мастер-шаблона, с блоками, которые можно в различных конфигурациях применять в письмах. Из них мы создали уже около 20 разных писем. Очень трудно остановиться на стандартном шаблоне, когда можно постоянно применять что-то новое ?
Что нам понравилось:
Самое главное — возможность самостоятельно создавать красивые дизайнерские письма, где блоки компонуются в разных вариациях. Этих возможностей не хватает в стандартных шаблонах сервисов рассылок.
Перед выгрузкой письма из Фигмы можно сразу проверить, как оно будет выглядеть в десктопной и мобильной версии.
Сразу в Фигме можно обработать довольно много изображений и даже gif-анимацию и вставить в письмо.
Плагин стоит всего 7$ в месяц.
Ребята готовы помогать в работе с плагином и гибко совершенствовать функционал для удобства работы с ним.

Агентство интернет-рекламы i-Media

Мария Гудкова, маркетолог i-Media:
У нас в i-Media 13 услуг, которые мы продвигаем и пять отраслей бизнеса, на которые мы нацелены. Под каждую услугу и отрасль регулярно верстаем email-рассылки, отправляем дайджесты для клиентов и наших сотрудников. В месяц у нас выходит от трёх до восьми писем.
До внедрения плагина отправка рассылки запускала долгий процесс подготовки, от которого становилось немного дурно. Сначала отрисовка уникального дизайна, потом вёрстка писем, потом опять мы бежали к дизайнеру, потому что на тестах какой-нибудь элемент стремился занять не своё место. В общем, каждый раз мы испытывали себя на терпимость.
Пару месяцев назад мы одними из первых попробовали плагин Marka Pro и, если честно, очень сомневались и переживали. Думали, что ручной труд профессионального верстальщика заменить невозможно. Но мы попробовали и не пожалели.
Теперь маркетологи сами справляются со всем процессом. Тратим гораздо меньше времени и сил на email-письма. С плагином от идеи до отправки письма проходит не больше 2 часов.

Как отреагировала команда

Что говорит дизайнер

Андрей Ведерников, дизайнер Creative Soldiers:

Фигма — простой графический редактор без излишеств, у неё нет, как в Фотошопе, множества функций. Но, несмотря на простоту Фигмы, в неё удалось добавить сложный плагин, от которого наши дизайнеры, верстальщики и разработчики до сих пор под впечатлением. Он генерирует html-код для писем прямо из дизайн-макета.
Подойдёт не любой дизайн-макет, а только который сделан по правилам разработчика плагина. В гайде к Marka описаны основные функции плагина для Фигмы и даны подробные разъяснения про его работу. Но главное, что нужно для успешной работы с Marka, — практика. Мы до сих пор открываем для себя особенности этого инструмента.
Работая с Marka, нужно мыслить блочно, создавать блочную модель исходного макета. И в этом плагине всё идёт в работу, каждая кнопочка несёт свою функцию и каждая функция плагина привязана к какому-то элементу интерфейса.
Можно загружать любые изображения, любой текст — всё автоматически переходит в код.
Раньше при сборке мастер-шаблона, чтобы что-то там изменить, необходимо было идти в код. То есть клиент вносит правки текстом или другим образом, а верстальщик идёт в код и правит. Сейчас клиент самостоятельно заходит в макет и меняет его.
Подводные камни нового плагина для Фигмы
Особенности плагина обнаруживаются, в большинстве своём, методом проб и ошибок.
Можно изучить гайд для разработчиков, но что-то придётся открывать напрямую в работе. Например, в письмах задан кёрнинг (расстояние между буквами) в 3%, а плагин для Фигмы не считал эту информацию. Приходится поправлять руками.
Ещё пример: мобильная версия рассылок работает не так, как на сайтах, и в Marka есть возможность перенести картинку на следующую строку мобильной версии, тогда как в веб-версии картинки расположены на одной строке. Обнаружили это тоже только на практике.
Плюсы Marka
Здесь я вижу один весомый плюс, который перевешивает все недостатки: с новым плагином всё делается быстрее — и дизайн, и вёрстка электронных писем, при этом дизайнер может выступать в роли верстальщика, не затрагивая вёрстку.

Что говорит менеджер

Сергей Соболевский, интернет-маркетолог Email Soldiers:
Я часто занимаюсь задачами связанными с мастер-шаблонами, и создание таких шаблонов отнимает много времени у команды. Новый плагин для Фигмы помогает отказаться от работы верстальщиков, а по качеству исполнения не уступает результату работы специалиста.
Марка отлично подойдёт клиентам, у которых нет верстальщика в штате.
Плагин для Фигмы гораздо эффективнее классических блочных редакторов: у последних много ограничений при подготовке письма.
У Marka Email Generator есть свой обучающий мануал, но подойдёт он не всем. Для правильной работы нужно разбираться в Фигме хотя бы на среднем уровне.

Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы