Как превратить макет из Figma в письмо: почему экспорт не работает и что делать вместо него

Экспортировать макет из Figma в готовое письмо одной кнопкой нельзя: Figma отдаёт разметку с абсолютным позиционированием и современным CSS, а почтовые клиенты требуют таблиц и инлайновых стилей. Ниже — почему так устроено, и три способа перенести дизайн в рассылку, которые действительно работают.

Почему экспорт из Figma не подходит для почты

Figma создавалась для интерфейсов, которые открываются в браузере. Браузер понимает флексбокс, гриды, абсолютное позиционирование и внешние таблицы стилей. Почтовые клиенты не понимают почти ничего из этого списка.

• абсолютное позиционирование игнорируется большинством почтовых клиентов
• флексбокс и грид не поддерживаются в классическом Outlook
• внешние таблицы стилей вырезаются, стили нужны инлайновые
• вложенность слоёв Figma не соответствует табличной структуре письма
• шрифты из макета в почте чаще всего недоступны и заменяются системными

Результат прямолинейного экспорта предсказуем: в браузере всё выглядит правильно, а в почте макет рассыпается. Причём хуже всего именно там, где сидят корпоративные подписчики.

Способ первый: ручная вёрстка по макету

Классический путь. Верстальщик открывает макет, снимает размеры, цвета и отступы, и собирает письмо на таблицах с нуля. Способ даёт максимальный контроль и лучший результат, но требует специалиста и времени.

Подводный камень, о котором забывают дизайнеры: макет обычно рисуется под десктоп шириной 600 или 640 пикселей, а большинство писем открывают с телефона. По данным Litmus на первом месте по открытиям идёт Apple Mail, следом Gmail — и в обоих случаях это преимущественно мобильные экраны.

Поэтому макет для письма стоит рисовать сразу в двух состояниях: как выглядит на широком экране и как блоки перестраиваются на узком. Иначе решения за вас примет верстальщик, и не всегда так, как вы задумали.

Способ второй: пересборка в блочном конструкторе

Вместо того чтобы верстать код, дизайн собирается из готовых блоков: шапка, баннер, текст, кнопка, товары, подвал. Каждый блок уже совместим с почтовыми клиентами, и задача сводится к подбору блоков под макет и настройке цветов и отступов.

Способ быстрее ручной вёрстки и не требует знания HTML. Ограничение очевидно: макет придётся адаптировать под доступный набор блоков, а не воспроизводить пиксель в пиксель. На практике это редко проблема — письма строятся из ограниченного набора паттернов, и хороший конструктор их покрывает.

Способ третий: распознавание макета

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

Работает это не как копирование пикселей, а как разбор структуры. На выходе получается редактируемое письмо на совместимых блоках, а не картинка. Точность зависит от того, насколько макет похож на обычное письмо: типовые раскладки распознаются хорошо, экспериментальные — хуже.

• по ссылке на макет — точнее, потому что доступна структура слоёв
• по скриншоту — работает с любым изображением, включая чужое письмо
• по готовому HTML — если письмо уже свёрстано и его нужно отредактировать

Что проверить после переноса любым способом

Независимо от выбранного способа, письмо перед отправкой стоит прогнать по короткому списку. Именно эти пункты чаще всего ломаются при переносе из макета.

• ширина письма: 600 пикселей — безопасный стандарт
• отступы заданы ячейкам таблиц, а не блокам
• кнопки кликабельны целиком, а не только по тексту
• у всех изображений заполнен альтернативный текст
• вес письма ниже 102 килобайт, иначе Gmail обрежет
• шрифты имеют системные запасные варианты

Как это устроено в Mailvex

Конструктор поддерживает все три сценария: сборку из блоков вручную, импорт по ссылке на макет Figma и распознавание по загруженному скриншоту. Готовое письмо можно дополнительно перекрасить под брендбук, чтобы цвета и шрифты подтянулись автоматически, а не подбирались вручную.

На выходе получается редактируемое письмо на совместимых блоках и чистый HTML для любого сервиса рассылок.

Частые вопросы

Можно ли добиться попиксельного совпадения с макетом?

В большинстве случаев — нет, и это нормально. Почтовые клиенты по-разному отрисовывают шрифты и отступы, поэтому одно и то же письмо всегда немного отличается в разных почтах. Задача переноса — сохранить структуру, иерархию и фирменный стиль, а не совпасть попиксельно.

Что делать со шрифтами из макета?

Указывать их первыми в списке, а следом добавлять системные запасные варианты. Часть почтовых клиентов загрузит нестандартный шрифт, часть подставит запасной — и письмо должно выглядеть достойно в обоих случаях.

Как быть со сложными раскладками в несколько колонок?

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