Как перенести макет письма из Figma в HTML через плагин Mailvex
Фрейм в Figma → импорт в Mailvex → проверка письма → экспорт HTML
Mailvex · 9 августа 2026 · 4 мин чтения
Чтобы превратить макет email-письма из Figma в HTML, перенесите выбранный фрейм через плагин Mailvex, проверьте импортированное письмо и экспортируйте результат. Простого копирования веб-CSS для этого недостаточно. Ниже — порядок работы для дизайнера или маркетолога, а также случаи, когда макет лучше адаптировать вручную.
Макет письма уже готов? На странице плагина есть установка из Figma Community и подключение аккаунта.
Открыть плагин Mailvex для FigmaПочему макету письма нужен отдельный HTML
Макет в Figma описывает внешний вид, но ещё не является готовым email-письмом. Почтовые клиенты отличаются от браузера и друг от друга: при переносе нужно учитывать структуру письма, изображения, запасные шрифты и отображение на узком экране.
- Не рассчитывайте на одинаковую поддержку современного CSS во всех почтовых клиентах.
- Проверьте, как колонки перестраиваются на телефоне.
- Добавьте запасные системные шрифты.
- Текст, ссылки и кнопки проверяйте в готовом письме, а не только в макете.
Практическая цель переноса — получить письмо, которое можно проверить и отправить через вашу платформу рассылок. Совпадение с макетом оценивайте вместе с читаемостью и работой ссылок.
Способ первый: ручная вёрстка по макету
Верстальщик собирает HTML по макету и отдельно проверяет нужные почтовые клиенты. Такой путь подходит, когда требуется особая структура или точечная доработка кода; срок зависит от сложности дизайна и объёма проверок.
Перед переносом определите не только вид письма на широком экране, но и порядок блоков на телефоне. Например, в карточке товара название и цена должны оставаться рядом с соответствующим изображением.
Для проверки выберите устройства и почтовые клиенты, важные именно для вашей аудитории. Откройте в них тестовое письмо и сравните порядок блоков, размеры текста и работу кнопок.
Если мобильного макета нет, заранее решите, какие колонки складываются в одну и какие изображения можно уменьшить. Это сократит число правок после импорта.
Способ второй: пересборка в блочном конструкторе
Другой путь — собрать письмо из готовых блоков: шапки, текста, изображений, кнопок и подвала. В Mailvex можно начать с шаблона и адаптировать его под задачу, если точное повторение исходного макета не требуется.
Этот вариант удобен для повторяющихся промо-писем и рассылок с простой структурой. Сначала подберите близкую композицию, затем замените содержание и проверьте итоговый HTML.
| Способ | Когда подходит | Что проверить |
|---|---|---|
| Ручная HTML-вёрстка | Нужны особая структура или точечные изменения кода | Отображение, ссылки и мобильную версию |
| Готовый шаблон и блочный редактор | Макет можно адаптировать под существующую композицию | Содержание, цвета, изображения и порядок блоков |
| Импорт через плагин Figma | Уже есть фрейм email-письма в Figma | Результат переноса, сложную графику и элементы, оставшиеся изображениями |
Способ третий: импорт через плагин Mailvex для Figma
Плагин Mailvex Figma to Email работает внутри Figma и отправляет выбранный фрейм в Mailvex. Для работы нужны аккаунт Mailvex и доступ к файлу с макетом. Плагин доступен в Figma Community.
Импорт не отменяет проверку результата: сложная графика может остаться изображениями. Не рассчитывайте, что любой элемент исходного макета станет отдельным редактируемым блоком или будет одинаково выглядеть во всех почтовых клиентах.
- Откройте Mailvex Figma to Email из Figma Community в файле с макетом.
- Подключите аккаунт Mailvex с помощью одноразового кода.
- Выберите нужный фрейм письма и отправьте его через плагин.
- Откройте импортированное письмо в Mailvex и проверьте результат перед экспортом.
Что проверить после переноса любым способом
Независимо от выбранного способа, письмо перед отправкой стоит прогнать по короткому списку. Именно эти пункты чаще всего ломаются при переносе из макета.
- Проверьте порядок блоков, ширину и читаемость на телефоне.
- Проверьте тексты, изображения и запасные шрифты.
- Откройте каждую ссылку и убедитесь, что она ведёт к нужной странице.
- Добавьте осмысленные альтернативные тексты к содержательным изображениям.
- Проверьте размер итогового HTML и отсутствие обрезки после загрузки в платформу рассылок.
- Отправьте тест через платформу рассылок и откройте его в нужных почтовых клиентах.
От импортированного макета к отправке рассылки
После импорта в Mailvex исправьте содержание и ссылки, проверьте изображения и предпросмотр. Если важный текст остался частью изображения, оцените, будет ли письмо понятно при отключённой загрузке картинок. При необходимости адаптируйте этот участок в редакторе.
Затем экспортируйте HTML и загрузите его в платформу рассылок, которая поддерживает импорт собственного кода на вашем тарифе. Там проверьте персонализацию, ссылку отписки и тестовую отправку. Лимиты импорта и экспорта Mailvex указаны на странице тарифов.
Нужны подробности подключения? Перейдите к инструкции Mailvex по импорту из Figma.
Открыть инструкцию по импортуЧастые вопросы
Можно ли добиться попиксельного совпадения с макетом?
Перенос из Figma не гарантирует попиксельного совпадения с исходным макетом. Кроме того, почтовые клиенты могут показывать один HTML по-разному. Проверьте структуру, фирменный стиль, читаемость и работу ссылок; сложные элементы при необходимости упростите.
Что делать со шрифтами из макета?
Проверьте, какой шрифт сохранился после импорта и как письмо выглядит с системной заменой. Одного названия нестандартного шрифта в HTML недостаточно: он должен быть доступен получателю или подключён способом, который поддерживает его почтовый клиент. Подберите читаемый запасной вариант и проверьте полученное письмо.
Как быть со сложными раскладками в несколько колонок?
Проверьте, в каком порядке колонки складываются на узком экране и остаются ли текст и кнопки читаемыми. Если сложная композиция плохо переносится, упростите её или адаптируйте в редакторе, затем повторите тестовую отправку.
