发布于 2026-10-12 · 作者 MarkupGen 团队
Email Ready：用 Figma 设计或图片生成 HTML 邮件
把设计稿变成 HTML 邮件，比变成网页更难，因为收件箱不是浏览器。Email Ready 是 MarkupGen 专门为此打造的输出模式，它提供两种方式：从 Figma 设计生成邮件 HTML 代码，或者把设计图切片并加上可点击链接，从图片创建邮件。本文说明这两种方式、各自的适用场景，以及工具替你处理的全部细节。
什么是 Email Ready
每个 MarkupGen 项目都有一种输出格式。Responsive HTML 用于网站和落地页。Email Ready（中文界面显示为“邮件就绪”）用于新闻简报和营销邮件：它不使用 flexbox 和 grid，而是生成带内联 CSS 的表格布局 HTML——这正是 Gmail、Outlook 和 Apple Mail 能够正常渲染的格式。
在项目的布局设置中选择它并生成，得到的是一份完整的邮件文档，而不是一个网页。
方式一：生成邮件就绪的 HTML 代码
这是默认方式，适合以文字、按钮和简单图片为主的邮件。
- 表格布局加内联 CSS。 没有 flexbox，没有 grid，也没有会被邮件客户端剥离的外部样式表。
- 真实文字。 标题和段落保持为文本，可以选中，可以被屏幕阅读器读出，图片被屏蔽时依然可见。
- 邮件无法渲染的效果会转换为图片。 设计中没有邮件安全等价写法的部分会被栅格化，而不是丢失或错乱。
- 合法的 XHTML 1.0 Transitional 文档。 导出时会规范化 doctype、命名空间和属性，因为这是 Outlook、Gmail 和 Apple Mail 处理最稳定的声明。
- 原地编辑。 导出前可在编辑器中修改文案、替换图片。
- 体积计量。 “邮件导出”卡片显示当前 HTML 体积与上限，让你先于订阅者发现问题。
102KB 问题：Gmail 为什么会截断邮件
只要邮件的 HTML 超过约 102KB，Gmail 就会将其截断。收件人只能看到邮件开头和一个“查看完整邮件”链接——截断线以下的内容被隐藏，而那里往往正是行动号召按钮和退订链接。
一份包含许多区块的丰富设计，写成代码后可能超过这个上限。MarkupGen 会在 100KB 时发出警告——在布局面板中提示一次，在测试发送对话框中再提示一次——并提供第二种方式。
方式二：从图片创建邮件
“从图片创建邮件”采用相反的思路。它不再用代码描述设计，而是直接使用设计图本身，将其切成若干切片，再用一个轻量表格拼回去。HTML 中只有表格和图片引用，因此无论设计多复杂，体积通常只有几 KB。
工作流程：
- 从一张图片开始。 项目的设计图会自动载入，你也可以上传其他图片——Figma 画板、横幅、海报都可以。
- 绘制可点击区域。 在图片上拖拽，为每个按钮、横幅或商品画一个框。可以移动、从任意边或角调整大小、用方向键逐 1px 微调，或直接输入精确坐标。
- 添加链接和替代文本。 每个区域可设置链接（
http(s)://、mailto:或tel:）、名称和替代文本。 - 设置邮件宽度。 默认 600px，可按模板需要修改。
- 生成。 MarkupGen 对图片切片并构建表格。
- 预览、测试并导出。 检查桌面端和移动端（375px）预览，发送测试邮件，然后把代码应用到项目或带到别处使用。
这个过程中工具替你处理的事情：
- 只在需要的地方切割。 图片沿每个区域的上边缘和下边缘切开。相邻且没有链接的切片会被合并，图片更少，请求也更少。
- 切割线清晰可见。 黄色参考线准确显示切割位置，方便你把切线放在空白背景上，而不是穿过一行文字。
- 像素级精确拼合。 切割位置会按显示尺寸对齐到整数像素，切片拼合后与原图完全一致，没有缝隙，列也不会错位。
- 无损切片，自动托管。 切片以 PNG 保存并自动上传，使用绝对 URL——你不需要自己托管任何东西。2x 图片按邮件宽度显示而不被缩小，因此保持清晰。
- 针对 Outlook 的专用标记。 固定宽度、面向 Outlook 基于 Word 的渲染引擎的条件注释，以及避免切片之间出现多余空隙的重置样式。
- 只接受安全链接。 凡不是
http(s)、mailto或tel的内容都会被拒绝；没有有效链接的区域会被跳过并给出提示，而不会输出一个坏链接。 - 区域随项目保存。 之后可重新打开工具修改链接或移动区域，无需全部重画。
- 宽松的上限。 每封邮件最多 200 个链接区域、400 个切片，图片宽度最大 4000px。
应该用哪一种？
| 生成 HTML 代码 | 从图片创建邮件 | |
|---|---|---|
| 最适合 | 文字较多的简报、通知类邮件 | 视觉型活动、促销横幅、复杂布局 |
| 文字 | 真实文本，可选中 | 属于图片的一部分 |
| HTML 体积 | 随设计增大 | 通常只有几 KB |
| 与设计的一致性 | 接近，受邮件客户端限制 | 完全一致——它就是设计本身 |
| 图片被屏蔽时是否可见 | 可见 | 只显示替代文本 |
一条实用规则：先用生成的代码。当体积计量超过上限，或设计依赖邮件客户端无法还原的字体和效果时，再改用图片方式。
拿到结果后可以做什么
两种方式最终殊途同归：
- 发送测试邮件到真实收件箱，直接在编辑器中完成。如果设计中还有未分配的文字或图片，发送会被阻止。
- 预览：发送前在桌面端和移动端查看。
- 复制代码、下载 .html 文件，或分享链接，指向一份已托管的邮件副本。
- 应用到项目并保存，让邮件与项目的其他内容放在一起。
- 使用你的语言——界面支持 10 种语言。
想进一步了解测试环节，请阅读生成并测试发送营销邮件 HTML。
坦率地说说取舍
基于图片的邮件并非没有代价。其中的文字无法选中、复制或搜索。如果客户端默认屏蔽图片，收件人在允许显示图片之前只能看到替代文本——这正是工具要求为每个区域填写替代文本的原因。布局是固定宽度的，在小屏幕上会整体缩放而不是重新排版，请务必查看移动端预览。还有，浏览器预览从来不能作为依据：一定要在受众实际使用的客户端里打开测试邮件。
常见问题
为什么 Gmail 会截断我的邮件？ Gmail 会截断 HTML 超过约 102KB 的邮件，并把其余部分隐藏在“查看完整邮件”链接之后。MarkupGen 会显示当前体积，并在 100KB 时发出警告。
我能把一张图片变成带可点击链接的 HTML 邮件吗？ 可以。“从图片创建邮件”会对图片切片，把你绘制的每个区域包裹在各自的链接中，并把图片重建为邮件客户端能够稳定渲染的表格。
我需要自己托管图片吗？ 不需要。切片会自动上传并以绝对 URL 引用，邮件一发出即可正常显示。
基于图片的邮件能在 Outlook 中正常显示吗？ 输出使用表格布局、固定宽度和针对 Outlook 的条件标记。不过在正式发送活动之前，仍建议向 Outlook 收件箱发一封测试邮件。
生成之后还能修改链接吗？ 可以。区域会随项目保存，你可以重新打开工具，修改链接或移动区域，然后再次生成。
它只能用于 Figma 设计吗？ 生成代码的方式从 Figma 设计开始。图片方式还支持你在 Email Ready 项目中上传的任意图片。
如果你的邮件活动还躺在 Figma 里——或者只是一张图片——现在就可以免费开始，几分钟内拿到可直接发送的 HTML。营销团队可以在 MarkupGen 营销团队方案中了解完整流程。