Плагин для Figma как no-code подход при создании писем
Figma стала своего рода стандартом в веб-дизайне — большинство макетов лендингов, сайтов и писем делается именно в ней.
И в этой статье я расскажу о плагине, который поможет вам получить из макета в Figma уже готовую адаптивную верстку письма. Причем не просто html-код, но и amp-версию рассылки.
Если вы впервые сели за подготовку письма, то очень быстро обнаружите, что тут не обойтись обычной html-версткой. Табличная основа с блочными перестроениями, vml-включениями, инлайновыми стилями и так далее — всё это составляет отдельное направление, которое называют email-версткой.
И чтобы сделать её качественно, придётся
- Либо долго погружаться в тему;
- либо воспользоваться вспомогательными инструментами. Например, email-фреймворком, о котором я рассказывал в прошлой статье;
- либо использовать визуальный редактор. Об одном из которых — плагине для Figma Ampier — и пойдёт речь дальше.
Для начала работы перейдите по ссылке в сообщесто Figma.
Собираем письмо в figma за минуту сразу с вёрсткой
Для начала создадим пустую заготовку письма:
И воспользуемся заготовками (ассетами), которые предлагает плагин:
Они разбиты на категории:
- block - полноценные блоки - новостные, товарные, баннерные и т.д.
- header - “Шапки” писем;
- image - Блоки, состоящие из картинок;
- text - Всевозможные тексты - текстовые блоки, списки и т.д.
- CTA - Кнопки;
- footer - “Подвалы” писем;
- AMP - Формы и html-версия для них;
- divider - разделители.
Для вставки нужного блока достаточно просто кликнуть на него. Для примера можно выбрать одну из “шапок”, добавить 1 текстовый ассет, затем выбрать подходящий блок и “подвал” - и наше письмо почти готово!
Осталось добавить контент — заменить дефолтные картинки и текст:
Вёрстка готова, осталось получить её код.
Для этого вновь открываем плагин (если ранее его закрыли) и, выделив родительский фрейм, нажимаем
Перед вами появится окно тестирования получившейся вёрстки:
В панеле инструментов доступны следующий инструменты:
- Back - кнопка возврата в режим редактирования;
- type - переключатель режима HTML и AMP-версии письма;
- desktop\Mobile - переключатель режима отображения десктопной\мобильной версии письма;
- dark Mode Check - проверка отображения письма в темной теме. Большинство мобильных почтовых клиентов автоматически преобразуют письмо, если выбрана темная тема - данный инструмент позволяет проверить как письмо будет выглядеть при таком преобразовании цветов. Помимо обычной темной темы, также есть режим проверки полной инверсии, который характерен для темной темы в приложении gmail на iOS;
- show code - Переключатель позволяет посмотреть получившейся код письма, а также размер кода и сжать его при необходимости;
- download - Позволяет скачать архив с кодом письма и всеми изображениями (уже адаптированными для отображения на экранах с повышенной плотностью пикселей);
- screen - Создает скриншот письма. Будет полезен, например, чтобы сделать скрин мобильной версии или темной темы для отправке клиенту\руководителю.
После всех проверок нам достаточно сохранить получившееся письмо, для этого кликаем “Download”.
Погружаемся глубже
Мы сделали простое письмо буквально за несколько минут, а если хочется чего-то необычного? А как же ссылки и обещанная поддержка AMP?
Прописываем ссылки
Для добавления ссылки внутрь текста достаточно просто выделить текст и добавить ссылку средствами Figma:
После чего, можно выделить ее цветом:
С картинками и кнопками немного сложнее.
Придётся прибегнуть к условностям: выбираем слой элемента, на который нужно повесить ссылку, и переименовываем его следующим образом:
Например:
Картинки
“Сказать” плагину, что тот или иной блок не нужно рендерить в виде кода, а нужно всего-лишь выгрузить картинкой, очень просто — оберните его в группу. Всё, что в неё попадает, воспринимается как единое изображение.
Управляем адаптацией
Возможны 2 варианта адаптации в письмах: масштабирование и перестроение.
В большинстве случаев нам нужен именно вариант перестроения, и он работает по умолчанию.
Если вам необходимо масштабировать определённые блоки, выберите их родительский блок и spacing mode “space between”
Чтобы у изображения были прописаны размеры в процентах, и оно хорошо тянулось при адаптации, в том числе в таком масштабируемом блоке, поставьте его ширину равной ширине родительского блока.
Кнопки
Как плагин отличает обычный текст от кнопки?
Тут есть несколько критериев:
- Кнопка — единственный дочерний элемент с текстовым типом у фрейма
- Текст не должен превышать 60 символов
- У фрейма есть обводка или цвет, который отличается от цвета родителя
Если выполняются все эти условия, то такой фрейм будет распознаваться как кнопка и выделяться соответствующим тегом.
Иногда бывает ситуация, когда текст нужно выделить, но он не должен быть кнопкой, например для промокода в письме.
Чтобы предотвратить распознавание кнопки - переименуйте слой в
AMP-формы
Ampier для Figma поддерживает использование AMP-форм. Самый простой вариант — вставить заготовку из раздела AMP.
Чтобы сделать форму самостоятельно, необходимо построить следующую структуру:
Важно! Все элементы формы должны быть обернуты во фрейм с названием #amp-form , а поля формы необходимо разместить во фрейме с названием #form-body .
На текущий момент поддерживаются поля 2х типов: text и textarea.
Чтобы сформировать поле типа text, необходимо ему дать название
А для textarea:
Чтобы добавить сообщение об успешной отправке формы, оберните текст сообщения во фрейм с названием:
При успешной отправке, сервер возвращает сообщение, которое можно вставить в текст, используя переменную [[success]].
А для отображения ошибок текст необходимо обернуть во фрейм с названием
При возникновении ошибки сервер возвращает массив полей, где возникли ошибки, которые также можно вывести в сообщении:
Условный рендеринг HTML\AMP
AMP-форма не будет работать в HTML-версии письма, более того, она даже не будет в ней отрендерена.
Для HTML-версии обычно делают отдельный блок с предложением перейти на сайт или на веб-версию письма, чтобы заполнить форму. А в AMP-версии письма часто добавляют блок с информацией о том, что это письмо интерактивно.
Чтобы сообщить плагину, что тот или иной фрейм нужно рендерить только в одной из версий, необходимо дать ему название
для отображения только в html-версии письма.
для отображения только в amp-версии письма.
Нужно больше шаблонов?
Вы можете создавать собственные уникальные шаблоны, заточенные под ваш бренд и бизнес, используя autolayout. Или быстро собирать их из ассетов.
Мы также подготовили наборы шаблонов, которые вы сможете взять их за основу целиком или отдельными блоками.
Без регистрации доступно 15 скачиваний готовой верстки, а далее по 1 скачиванию в день.
Ребята подскажите пожалуйта, возникает проблема отображения картинок, они не отображаются почемуто, никто не сталкивался с проблемой такой?
Экспорт по-умолчанию осуществляется через скачивание архива и все изображения в коде прописываются через относительные пути. Также следует отметить, что в верстке 3 html файла:
html - версия письма
amp - версия письма
письмо на языке Ampier-фреймворка (tjml).
Если ваша ESP поддерживает загрузку шаблона в виде архива, то вам необходимо удалить amp и tjml верстку, оставив только html. Иначе вам необходимо загрузить изображения из папки img на какой-либо сервер и прописать в верстке абсолютные пути до картинок перед отправкой.