使用 Emailify,这是 Hypermatic 的 Figma 插件,设计响应式电子邮件并将其添加到您的 Omnisend 电子邮件中。
正在寻找 Omnisend 的原生 Figma 集成? 了解如何将 Figma 与 Omnisend 集成
工作原理
Emailify 是一个 Figma 插件,可以将您的 Figma 设计转换为生产就绪的响应式 HTML 电子邮件代码。它包括一个 Omnisend 导出预设,生成适用于 Omnisend 自定义 HTML 活动的 HTML 格式。
该流程分为两个阶段:
在 Figma 中设计和导出。 使用 Emailify 的组件构建电子邮件,选择Omnisend 在导出面板中,导出 HTML。
导入到 Omnisend。 使用 Omnisend 的自定义 HTML 功能将导出的 HTML 粘贴到活动中。
这是一个手动导出和粘贴的集成。Emailify 不会自动将模板上传到 Omnisend,因此没有 API 连接,没有身份验证步骤,也没有数据在两个平台之间传输。
开始之前
确保:
您拥有一个可以运行插件的 Figma 账户。
Emailify 插件已安装在 Figma 中。
您拥有一个可以访问电子邮件活动的 Omnisend 账户。
您的电子邮件图像托管在公共 URL 上,或者您准备托管它们。
此集成涉及三个平台。以下是每个平台的要求:
平台 | 要求 |
Figma | 任何计划,包括免费计划。您需要一个具有完全设计访问权限的席位,因为仅查看席位无法运行插件。 |
Emailify | 免费版本适用于基本导出。该插件包括 10 次免费专业使用,之后某些导出选项需要专业许可证。 |
Omnisend | 任何计划,包括免费计划。所有计划均可使用自定义 HTML 活动。 |
dd Emailify 仅适用于在插件内构建的电子邮件。您无法转换未使用 Emailify 组件创建的现有 Figma 设计。
设置过程
步骤 1。 在 Omnisend 中,前往 应用 搜索 Emailify 应用程序并单击立即连接。
步骤 2. 在 Figma 中安装 Emailify:
打开一个 Figma 设计文件。
转到 工具 插件 Emailify。
插件面板在您的画布上打开。
步骤 3. 构建您的电子邮件。在插件面板中,打开新电子邮件 部分。
选择 空模板,或从 布局 或 Figma 模板 中选择一个起点。
步骤 4. 导出 Omnisend 的 HTML:
在插件头部选择 导出 HTML。
在导出面板中,打开导出类型下拉菜单。
在平台集成列表下,选择 Omnisend。
选择 导出到 Omnisend。
Emailify 生成 HTML,您可以将其下载到计算机上。
步骤 5. 托管您的图像
导出包括您的图像作为本地文件。电子邮件客户端无法显示本地图像,因此在导入 HTML 之前,每个图像都需要一个公共 URL。
您有两个选项:
使用 Emailify 的图像托管。 在导出设置中启用托管图像选项,以便导出的 HTML 指向公共 URL。
自己托管图片。 将它们上传到自己的CDN或文件存储中,然后替换每个
HTML中的src值为托管的URL。
检查导出的HTML中的图片URL,然后再导入。如果任何src仍然指向本地文件路径,图片将无法在发送的邮件中加载。
步骤 6. 将 HTML 导入 Omnisend。
有关Omnisend自定义HTML要求的详细信息,请参阅添加和配置自定义HTML项目。
步骤6。 添加个性化和必需的链接。
Emailify生成静态HTML。任何特定于Omnisend的内容将在导入后添加:
个性化标签。 插入Omnisend标签,例如
[[ contact.firstName ]] 直接放入HTML中,您希望动态值出现的地方。退订链接。 每个活动都需要一个退订链接。如果设计中尚未包含,请将Omnisend的退订URL添加到页脚。
在浏览器中查看链接。 Emailify的预头组件包括一个"在浏览器中查看"占位符。用Omnisend的链接替换占位符。
验证集成
在安排活动之前发送测试邮件。
在Omnisend中打开导入的活动。
向您自己的地址发送测试邮件。
确认所有图片加载。
确认布局在桌面和移动设备上正确呈现。
在多个客户端中检查邮件,例如Gmail和Outlook。
确认退订链接有效。
确认任何个性化标签解析。
ddd Omnisend预览和发送的测试邮件可能会产生不同的结果。使用发送的测试邮件作为最终检查。
故障排除
导入时HTML被拒绝
Omnisend的自定义HTML导入有格式要求。检查代码是否符合要求,并在粘贴之前删除任何不支持的元素。
图片无法加载
检查以下内容:
每个
src指向公共URL而不是本地文件路径。托管的图片URL在浏览器中正确打开。
在活动发送之前,图片文件已上传。
在Outlook中布局破裂
Outlook使用与大多数客户端不同的渲染引擎。在Emailify中:
重新导出并配置网络安全字体后备。
检查受影响组件的移动覆盖设置。
在每次更改后重新测试,因为无法从Figma预览中验证Outlook渲染。
插件无法在Figma中打开
如果Figma显示"请求Figma设计以运行插件"消息,您的席位没有完全的设计访问权限。插件无法在仅查看席位上运行。向您的Figma管理员请求设计访问权限。
Figma中的更改不会出现在Omnisend中
这两个平台之间没有实时连接。在编辑设计后,再次导出HTML并重新导入到新的活动中。
常见问题解答
Emailify是否会自动将模板上传到Omnisend?
否 Omnisend导出生成一个HTML文件,您需要手动将其粘贴到Omnisend中。
我需要Omnisend API密钥吗?
否 此集成不使用Omnisend API。
我需要付费的Emailify许可证吗?
不一定。该插件包括10次免费专业使用,之后仍可使用免费版本。检查Emailify插件面板,查看您当前版本包含哪些导出选项。
我需要付费的Omnisend计划吗?
否 所有计划均可使用自定义HTML活动,包括免费计划。
导入后我可以在Omnisend中编辑设计吗?
导入的HTML以代码形式编辑,而不是在Omnisend的拖放编辑器中。在Figma中进行设计更改并重新导出。
我可以将相同的设计用于多个活动吗?
是的。 保存导出的HTML文件并将其粘贴到每个新活动中。
我可以将现有的 Figma 邮件设计导入到 Emailify 吗?
否 Emailify 仅导出使用其自身组件构建的电子邮件。
这适用于自动化工作流电子邮件吗?
导出的 HTML 可以在 Omnisend 接受自定义 HTML 的任何地方使用。检查您工作流电子邮件中可用的自定义 HTML 选项。
没有找到您的问题的答案? 通过应用内聊天或在 [email protected] – 我们全天候 24/7 提供服务。

