Скачать готовую 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 с другими способами создания вёрстки:

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

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

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

Мыадаптировали дизайн мастер-шаблона под логику 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 есть свой обучающий мануал, но подойдёт он не всем. Для правильной работы нужно разбираться в Фигме хотя бы на среднем уровне.