Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

0 0

Большинство компаний делают рассылки как придется. Верстают письма в блоках Unisender и закрывают глаза на то, что выглядят они обычно не очень. Но если не умеешь дизайнить и кодить, выбирать не приходится. Мы, кажется, нашли неплохое решение. Чтобы сделать симпатичное письмо для рассылки, можно использовать плагин для Фигмы. Смотрите как.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Marka Email Generator — плагин для Фигмы. С ним можно собирать письма в графическом редакторе и сразу экспортировать их в HTML-документ. Разобраться с механикой интуитивно просто всем, кто хоть немного пользуется в работе Фигмой. Письма в плагине собирают из специальных блоков — ассетов. А чтобы отправить письмо пользователям, достаточно сохранить его и загрузить в любой сервис рассылки, например Unisender.

Что такое есть у плагина, чего нет у блочного редактора

Собирать письма в Фигме удобнее и быстрее, чем в блочном редакторе.

1. Все письма на одном экране. В Фигме можно собрать всю цепочку писем на одной странице. Так их легче сравнивать и анализировать — всё находится перед глазами одновременно. Чтобы письма было удобнее редактировать, можно сделать отдельный фрейм с базовыми элементами: цвета, шрифты, логотип, кнопки, рамки, блоки.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Как в блочном редакторе. Письма собираются отдельно. Чтобы посмотреть, какой текст или кнопка были в предыдущем письме, нужно переходить в другое окно. Постоянное переключение между окнами подбешивает.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

2. Готовые блоки. В плагине есть ассеты — готовые блоки, которые разбиты по категориям: шапка, подвал, контент, галерея, CTA. В каждой категории по несколько вариантов дизайна — можно примерить и выбрать наиболее подходящий.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Как в блочном редакторе. Можно выбрать шаблон письма и менять в нем контент. Готовые блоки (предустановленные) там тоже есть, но их очень мало, и они довольно топорные.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

3. Большая вариативность в дизайне. В плагине можно сделать аккуратную рамку для текста, кнопку любой длины и ширины, добавить на изображение тень или блюр. Все изменения визуала здесь видно сразу — можно играть с настройками и подбирать решения, ориентируясь на дизайн письма целиком.

✅ В плагине можно делать нестандартные блоки и добавлять свои элементы.

❌ Не получится добавить анимацию, интерактивы и сложные механики. Такие элементы нужно делать через код с помощью верстальщика.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Как в блочном редакторе. Чтобы обрезать изображение или сгладить углы, нужно переходить в отдельное окно. Это не всегда удобно: изменения нельзя сразу увидеть в контексте письма. Еще один минус — сохранение по кнопке. Если забыл кликнуть «Сохранить» и вышел, придется делать всё заново.

✅ В редакторе можно сделать стандартный дизайн: изменить цвет кнопки, вставить иллюстрацию, наложить фильтр на картинку.

❌ Не получится добавить тень, рамку, анимацию, интерактивы или сложные механики.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

4. Работа в команде и автосохранение. В Фигме можно оставлять комментарии, смотреть работу одновременно и сразу вносить исправления. Не нужно ничего сохранять, отправлять по почте и скачивать себе на ноутбук. О сохранении вообще можно не переживать: всё происходит автоматически.

Как в блочном редакторе. Можно открыть доступ в личный кабинет, чтобы редактор или дизайнер что-то поправили, но это неудобно. Если удалить какой-то элемент, быстро поставить его обратно не получится. А если сделать дубль письма, то легко запутаться в версиях.

Если верстать письма в HTML или блочном редакторе, проще сначала создать прототип в Фигме — продумать структуру и дизайн. С плагином в Фигме сразу получится сделать готовое письмо — с дизайном и кодом.

Когда будете выбирать инструмент, ориентируйтесь на свои возможности. Если у вас нет дизайнера, а письма пишет и верстает копирайтер, то вполне подойдет блочный редактор. Любой специалист, который занимается контентом, сможет быстро собрать в нем простое письмо. Если в команде есть дизайнеры и копирайтеры, которые работают в Фигме, можно делать письма с интересным визуалом через плагин. Мы, например, используем оба инструмента: обычные письма делаем в Unisender, а когда нужен креатив, идем в Фигму.

Коротко: как сделать письмо с помощью плагина

Для начала скачайте плагин. Чтобы запустить его и начать работу, в меню выберите Plugins → Marka Email Generator. Откроется окно с блоками, где нужно нажать на «+» и создать новый фрейм.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Теперь нужно переносить на фрейм блоки и редактировать их. Чтобы в готовом письме всё отображалось правильно, обязательно работайте в рамках блоков плагина. В плагине можно задавать письму любую ширину и использовать гугл-шрифты. Еще он автоматически конвертирует векторную графику в растровую, в нем есть поддержка шахматных блоков и обработка типографом.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Когда письмо будет готово, нужно выделить фрейм и в окне плагина нажать на кнопку Preview. Здесь можно посмотреть, как будет выглядеть письмо на десктопной и мобильной версии.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Готовый файл можно загружать в сервис email-рассылок и настраивать рассылку. Например, в Unisender нужно зайти в личный кабинет, выбрать редактирование писем в HTML-редакторе, загрузить туда письмо и отправить.


                    Плагин для Фигмы, который поможет собрать красивое письмо для рассылки без кода

Мы в редакции «Рыба» активно используем email-рассылку в работе. Можем и вам собрать письма с сильными текстами и приятным дизайном.

Посмотреть на Рыбу 4.6K показов 411 открытий

Источник: vc.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.