Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.
До 2019 года мы знали два способа создания вёрстки: в редакторе кода и в блочных редакторах. Идеальный блочный редактор пока не изобрели, поэтому свою агентскую вёрстку мы создавали в редакторах кода. До настоящего момента.
В конце 2019 года появился плагин для Фигмы, который позволяет, при соблюдении определённых правил создания дизайн-макета, выгружать макет в готовое для отправки письмо.
Читайте также
Почему мы перешли с Фотошопа на Фигму
В начале возможности плагина были ограничены, но идея нас зацепила. На тот момент казалось, что плагин может облегчить процесс создания простых дайджестов и триггеров. Мы познакомились с разработчиком плагина Григорием Машковцевым и предложили свою экспертную помощь в развитии продукта.
Григорий Машковцев,
разработчик Marka Email Generator
Мы предлагали разработчику исправления и фичи, участвовали в тестировании. В процессе работы над плагином стало очевидно, что мы недооценивали потенциал продукта, ведь в новом инструменте удалось реализовать поддержку даже самых сложных подходов и особенностей email-вёрстки.
Возможности плагина
- Качество вёрстки на уровне высококлассного верстальщика.
- Адаптивность.
- Поддержка Outlook.
- Поддержка произвольной базовой ширины письма.
- Возможность добавлять в письмо блоки с шириной, отличной от базовой.
- Поддержка тёмных тем.
- Управление видимостью блоков на десктопе/мобильных.
- Возможность использования Google-шрифтов.
- Автоматическая конвертация SVG-графики в растровую.
- Поддержка шахматных блоков.
- Выгрузка письма в архив с изображениями для экспорта этого архива в большинство сервисов рассылки.
- Опциональная автозагрузка изображений письма на облачный хостинг.
- Опциональная обработка текста письма «Типографом».
- Опциональная минификация кода.
- Возможность добавления невидимого прехедера.
К анализу и доведению до ума вёрстки, которую генерирует новый плагин для Фигмы, были привлечены наши ведущие верстальщики. Поэтому объём кода существенно снизился и сам код стал максимально соответствовать стандартам нашего агентства.
Имеется поддержка адаптивности — её теперь полностью контролирует дизайнер.
Вёрстка электронных писем, которую генерирует плагин, постоянно тестируется в emailonacid.com и поддерживается популярными почтовыми клиентами, включая Outlook.
Читайте также
Как создать шаблон письма для Outlook
Оптимальной считается базовая ширина 600 px, но это не закон. Часто для лучшего результата требуется большая или меньшая базовая ширина. Плагин способен на программном уровне устанавливать базовую ширину в соответствии с шириной вашего дизайн-макета.
Если необходимо сделать подвал, шапку письма или какой-то акцентный блок в содержимом шириной 100%, в Marka такое возможно.
Письма в большинстве случаев достойно выглядят в тёмных версиях различных браузеров. А если всё же что-то не так — этим можно управлять.
Если требуется десктопной и мобильной аудитории показывать разные варианты одного и того же блока или вовсе не показывать одной из аудиторий определённый контент, то в Marka это очень просто реализовано.
Вы можете использовать в Фигме любой шрифт из коллекции Google Fonts — плагин автоматически добавит шрифты в письмо.
Плагин при выгрузке кода определяет фреймы с векторной графикой и преобразует их в PNG-формат.
Читайте также
Конвертация SVG в PNG: а воз и ныне там, но есть варианты
В дизайне иногда используются блоки с чередованием: изображение-текст, текст-изображение, изображение-текст. Тогда в адаптивной версии у этих блоков должно быть чёткое следование: изображение-текст, изображение-текст, изображение-текст. Marka может и такое.
MailChimp, ExpertSender, MindBox и другие системы рассылки позволяют загружать письмо в вёрстку в виде архива и сразу кодом в html-документе, где есть относительные ссылки до изображений в архиве. Marka умеет выгружать вёрстку писем в таком формате.
При активации этой опции плагин отдаст только вёрстку, а все изображения письма будут загружены на Яндекс.Облако.
Позволяет на лету, как обещает описание к программе, «вместо знаков дюйма поставить нормальные кавычки («ёлочки» и „лапки“), поубивать лишние пробелы, в нужных местах заменить дефисы на тире, неразрывным пробелом „привязать“ все короткие союзы и предлоги к следующим за ними словам и произвести кучу других операций».
Читайте также
Поправь то, не знаю что: как понять, что вам не нравится в тексте
Если письмо весит больше 102 кБ, почтовый клиент Gmail отобразит его не полностью.
Если вы делаете в Marka письмо, которое не вписывается в лимит, можно использовать опцию минификации. Она уберёт лишние символы (пробелы, переносы, комментарии) и сократит «вес» кода на 40%.
Прехедер — это текст, который отображается в списке писем почтового клиента сразу после темы письма.
Как собирается письмо из мастер-шаблона с помощью Marka Email Generator
Лучше один раз увидеть:
Сравним использование плагина для Фигмы с другими способами вёрстки
Marka Email Generator — удобное No-code решение с агентским качеством вёрстки писем на выходе. Это совершенно новый подход к созданию письма и новые возможности. Сравним подход Marka с другими способами создания вёрстки:
| Вёрстка писем в редакторе кода | Создание письма в блочном редакторе | Использование плагина Marka | |
| Трудозатраты | Необходим верстальщик, который воплотит в коде дизайн письма. Наиболее трудозатратный способ. | Чаще всего верстальщик не нужен. Письмо собирает менеджер или дизайнер. | Верстальщик не нужен. Письмо собирает менеджер или дизайнер. |
| Возможности дизайна | Ограничены уровнем верстальщика и здравым смыслом. | Ограничены предустановками и функциональностью блочного редактора. Невозможно реализовать нестандартные решения без вкрапления вёрстки. В некоторые редакторы можно внедрить свой дизайн блоков, но для этого необходим верстальщик. |
Ограничены только логикой структуры макета, которую необходимо поддерживать для возможности выгрузки. |
| Качество кода | Зависит от уровня верстальщика. | В большинстве современных редакторов оставляет желать лучшего. | На уровне вёрстки писем агентства Email Soldiers. |
| Pixel Perfect — попадание вёрстки в макет | Полностью в руках верстальщика и зависит от опыта. | 100% Pixel Perfect. | 100% Pixel Perfect. |
| Объём кода | Зависит от уровня верстальщика. При высоком уровне — минимальный объём кода. | Большой. Очень большой. | Средний. |
| Удобство модификации и повторного использования | Верстальщики повторно используют решения, но от дизайнеров часто приходят задачи, требующие вёрстки с нуля. | По сути работа строится на использовании готовых решений. | Работа с адаптированным мастер-шаблоном напоминает работу с блочным редактором. |
Боевое применение нового плагина для Фигмы
Летом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.
Одним из первых заказчиков, для которых мы использовали новый инструмент, стал туроператор «Алеан».
Мы адаптировали дизайн мастер-шаблона под логику Marka Email Generator. Финальную сборку писем сейчас делает сам заказчик, и этот процесс напоминает работу с блочным редактором.
Ещё одна работа — письма для агентства i-Media:
Красиво сверстаем ваши письма
Дизайн и вёрстка email-рассылокЧто говорят клиенты
Туроператор «Алеан»
Технология Marka Email Generator вызвала у нас большой интерес: из макета, сделанного в Фигме, буквально за пару секунд получается письмо, свёрстанное в лучших практиках HTML.
Ребята из Email Soldiers подготовили для нас два мастер-шаблона, с блоками, которые можно в различных конфигурациях применять в письмах. Из них мы создали уже около 20 разных писем. Очень трудно остановиться на стандартном шаблоне, когда можно постоянно применять что-то новое 🙂
Что нам понравилось:
- Самое главное — возможность самостоятельно создавать красивые дизайнерские письма, где блоки компонуются в разных вариациях. Этих возможностей не хватает в стандартных шаблонах сервисов рассылок.
- Перед выгрузкой письма из Фигмы можно сразу проверить, как оно будет выглядеть в десктопной и мобильной версии.
- Сразу в Фигме можно обработать довольно много изображений и даже gif-анимацию и вставить в письмо.
- Плагин стоит всего 7$ в месяц.
- Ребята готовы помогать в работе с плагином и гибко совершенствовать функционал для удобства работы с ним.
Агентство интернет-рекламы i-Media
Мария Гудкова, маркетолог i-Media:
У нас в i-Media 13 услуг, которые мы продвигаем, и пять отраслей бизнеса, на которые мы нацелены. Под каждую услугу и отрасль регулярно верстаем email-рассылки, отправляем дайджесты для клиентов и наших сотрудников. В месяц у нас выходит от трёх до восьми писем.
До внедрения плагина отправка рассылки запускала долгий процесс подготовки, от которого становилось немного дурно. Сначала отрисовка уникального дизайна, потом вёрстка писем, потом опять мы бежали к дизайнеру, потому что на тестах какой-нибудь элемент стремился занять не своё место. В общем, каждый раз мы испытывали себя на терпимость.
Пару месяцев назад мы одними из первых попробовали плагин Marka Pro и, если честно, очень сомневались и переживали. Думали, что ручной труд профессионального верстальщика заменить невозможно. Но мы попробовали и не пожалели.
Теперь маркетологи сами справляются со всем процессом. Тратим гораздо меньше времени и сил на email-письма. С плагином от идеи до отправки письма проходит не больше 2 часов.
Как отреагировала команда
Что говорит дизайнер
Фигма — простой графический редактор без излишеств, у неё нет, как в Фотошопе, множества функций. Но, несмотря на простоту Фигмы, в неё удалось добавить сложный плагин, от которого наши дизайнеры, верстальщики и разработчики до сих пор под впечатлением. Он генерирует html-код для писем прямо из дизайн-макета.
Подойдёт не любой дизайн-макет, а только тот, который сделан по правилам разработчика плагина. В гайде к Marka описаны основные функции плагина для Фигмы и даны подробные разъяснения про его работу. Но главное, что нужно для успешной работы с Marka, — практика. Мы до сих пор открываем для себя особенности этого инструмента.
Работая с Marka, нужно мыслить блочно, создавать блочную модель исходного макета. И в этом плагине всё идёт в работу, каждая кнопочка несёт свою функцию и каждая функция плагина привязана к какому-то элементу интерфейса.
Можно загружать любые изображения, любой текст — всё автоматически переходит в код.
Раньше при сборке мастер-шаблона, чтобы что-то там изменить, необходимо было идти в код. То есть клиент вносит правки текстом или другим образом, а верстальщик идёт в код и правит. Сейчас клиент самостоятельно заходит в макет и меняет его.
Подводные камни нового плагина для Фигмы
Особенности плагина обнаруживаются, в большинстве своём, методом проб и ошибок.
Можно изучить гайд для разработчиков, но что-то придётся открывать напрямую в работе. Например, в письмах задан кёрнинг (расстояние между буквами) в 3%, а плагин для Фигмы не считал эту информацию. Приходится поправлять руками.
Ещё пример: мобильная версия рассылок работает не так, как на сайтах, и в Marka есть возможность перенести картинку на следующую строку мобильной версии, тогда как в веб-версии картинки расположены на одной строке. Обнаружили это тоже только на практике.
Плюсы Marka
Здесь я вижу один весомый плюс, который перевешивает все недостатки: с новым плагином всё делается быстрее — и дизайн, и вёрстка электронных писем, при этом дизайнер может выступать в роли верстальщика, не затрагивая вёрстку.
Что говорит менеджер
Сергей Соболевский, интернет-маркетолог Email Soldiers:
Я часто занимаюсь задачами, связанными с мастер-шаблонами, и создание таких шаблонов отнимает много времени у команды. Новый плагин для Фигмы помогает отказаться от работы верстальщиков, а по качеству исполнения не уступает результату работы специалиста.
Marka отлично подойдёт клиентам, у которых нет верстальщика в штате.
Плагин для Фигмы гораздо эффективнее классических блочных редакторов: у последних много ограничений при подготовке письма.
У Marka Email Generator есть свой обучающий мануал, но подойдёт он не всем. Для правильной работы нужно разбираться в Фигме хотя бы на среднем уровне.
Подытожим
Мы открыли новый путь создания вёрстки и были участниками его формирования. Нашим клиентам тоже понравилось. Советуем использовать для своих задач Marka Email Generator — сделать первые шаги помогут обучение и библиотека базовых компонентов от разработчика плагина.
Задавайте вопросы и делитесь мнением о происходящем в нашем CRM-Chat. А дополнительные полезности и актуальные новости из мира онлайн-маркетинга в формате постов-трёхминуток выходят в нашем Телеграм-канале «Маркетинг за три минуты».
