发布于 2026-10-12 · 作者 MarkupGen 团队
用 MarkupGen 从 Figma 创建 HTML5 Banner：设计、转换并在 Studio Editor 中编辑
一个 Banner 在 Figma 里看起来早就完成了，但离代码完成还很远。还得有人用 HTML 和 CSS 把标题、产品图和按钮重新搭一遍——文案一改、按钮挪 8px、活动再加三个尺寸，就得再来一次。这些时间大多花在零碎的修改上，而不是第一次搭建上。
MarkupGen 同时缩短这两部分工作。它把 Figma Frame 转成 HTML 和 CSS，之后你可以在 Studio Editor 中继续以可视化方式调整结果，不必为每个小改动回到 Figma。本文完整介绍 Figma to HTML5 banner 的流程，并明确说明工具能做什么、不能做什么。
Figma 设计 → MarkupGen 插件 → 生成 HTML/CSS → Studio Editor → 检查 → 导出
将 Figma 设计转换为 HTML5 Banner
流程从 MarkupGen Figma 插件开始。选中 Banner 的 Frame 并发送，Frame 的结构、文字和图片会作为一个项目出现在 MarkupGen 工作区，你在那里生成代码。
Banner 的转换方式和其他 Frame 相同，因此常见的 Banner 元素都会保留：
- 标题和促销文案保持为真实文本，而不是被压进一张图片。
- 产品图和背景图随项目一起导出。
- CTA 按钮保留填充、圆角和文字。
- 形状、图层、字体排版和间距读取自设计文件，而不是根据截图估算。
得到的是一个通常与设计相当接近的起点，而不是像素级一致的保证。特殊效果、不在 Google Fonts 上的自定义字体以及层叠较多的图层，是最该先检查的地方。想进一步了解转换如何读取设计，请看 MarkupGen 的 Figma 转 HTML/CSS 是如何工作的。
在 Studio Editor 中直接编辑 Banner
这正是 MarkupGen 不只是代码生成器的原因。生成的代码很少是 Banner 的最终版本：法务文字变长了，CTA 需要更多留白，客户想把 Logo 放大。在多数工具里，这意味着手改 CSS，或者回到 Figma 重新转换。
在 MarkupGen 中，你在项目工具栏开启可视化编辑器——项目工作室的编辑模式——然后直接在 Banner 上操作。
MarkupGen 可视化编辑器的真实截图（英文界面），此处打开的是一个产品页设计。选中元素后会展开它的内容、链接和布局字段。
在预览或 HTML 树中选中任意元素，检查器会显示可以修改的内容：
| 你想修正的内容 | Studio Editor 提供的能力 |
|---|---|
| 文案和链接 | 原位编辑文字（在预览中双击），设置链接以及是否在新标签页打开 |
| 尺寸和间距 | 宽度、高度，以及各边的 margin 和 padding |
| 位置和对齐 | 在 flex 或 grid 父元素中对齐、调整顺序、设置 z-index、旋转 |
| 字体排版 | 字号、字重、行高和文本对齐 |
| 外观 | 背景色和文字颜色、不透明度、边框、圆角、阴影，以及模糊、亮度等滤镜 |
| 可见性 | 隐藏、显示或删除元素 |
实际带来的好处：
- 调整布局和位置：对受支持的元素操作，无需打开样式表。
- 微调尺寸、间距和对齐：使用精确数值。
- 直接做可视化修改，不必为每个小改动回到 Figma。
- 立即看到结果，可以撤销或重做，满意后保存。
- 减少设计与代码之间的来回。 每次改动都会写回 HTML 和 CSS，所以导出的代码就是你看到的 Banner。
有两点限制需要说明。编辑方式是选中元素后在检查器中修改属性——它不是自由拖放的画布。而且编辑是单向的：改的是生成的代码，不会改动你的 Figma 文件。
Studio Editor 包含在 Free 套餐中，与每月生成额度共用；付费套餐不限次数。
多种代码生成选项
对于响应式 HTML 输出，你可以选择用哪种 CSS 工具集来写代码：
- Vanilla CSS——无依赖的原生 CSS，最容易放进广告位或 CMS 区块。
- Tailwind CSS——工具类，适合 Banner 所在站点本身使用 Tailwind 的情况。
- Bootstrap——适合页面已经加载 Bootstrap 的团队。
这三种在 Free 套餐中都可以使用。Bulma、Materialize 和 Pico CSS 同样支持，需要付费套餐。如果不确定选哪个，可以参考 Vanilla CSS vs Bootstrap vs Tailwind。对于独立的 Banner，Vanilla CSS 通常文件最小、最便于移植。
Free 套餐每月包含 5 次代码生成；付费套餐按每日额度计算。
预览、AI 评估与调整
生成之后，在工作区中将预览与原始设计图对比，并在 Studio Editor 中修正你看到的问题。
在付费套餐中，AI 评估提供另一重参考。它将生成结果与原始设计对比，按六项加权标准——布局与结构、间距与对齐、字体排版、颜色、内容与图片、尺寸与效果——给出 0 到 10 的匹配分数，并附上差异列表和一段可编辑、可用于重新生成的提示词。
请把分数当作“该看哪里”的指引。它衡量的是与设计的视觉匹配度，并不能证明 Banner 像素级一致、可直接上线或在所有浏览器中表现一致。如何评估 AI 生成的 HTML 列出了值得手动检查的项目。
导出并使用你的 HTML5 Banner
Banner 调整好后保存，将 HTML 连同图片和字体下载为 .zip，或直接复制代码。付费套餐还可以把同一设计导出为 React、Vue、Svelte 或 Angular 组件。
有三样东西常常都被叫作“HTML5 Banner”，区分开来会更清楚：
| 是什么 | 在 MarkupGen 中 | |
|---|---|---|
| HTML/CSS Banner | 以标记和样式呈现的 Banner 布局 | 支持——这是核心流程 |
| 动画与交互 | 动效、悬停状态、脚本行为 | 部分支持——提供入场动画预设（fade、slide、zoom、flip），在元素进入视口时播放，可设置时长、延迟和缓动；没有时间轴或关键帧编辑器 |
| 广告平台投放包 | 符合某个广告网络规范的 ZIP：点击跟踪、体积限制、命名规则 | 不支持——需要你自行准备并验证 |
也就是说，导出的是属于你自己的干净 Banner 标记。如果 Banner 要投放到广告网络，请之后自行加入该平台的点击跳转代码并按要求打包，再用平台自带的校验工具检查。如果是放在自己的网站、落地页或 CMS 中，导出的 HTML 和 CSS 通常就够用了。用于邮件的 Banner 请参考 Email Ready。
这个流程适合谁
- 前端开发者省去重建工作，把时间花在需要判断的部分。参见面向开发者的 MarkupGen。
- 设计师和创意团队可以直接在真实 Banner 上修正间距和文案，而不用写修改需求。
- 数字营销团队无需等待开发排期，就能把活动设计变成可用的标记。参见面向营销团队的 MarkupGen。
- 代理商和广告制作团队把一轮轮客户反馈当作编辑来处理，而不是重做。参见面向代理商的 MarkupGen。
流程小结
- 在 Figma 中设计 Banner，每个尺寸一个 Frame。
- 用 MarkupGen Figma 插件传送 Frame。
- 按需要的工具集生成 HTML 和 CSS。
- 在 Studio Editor 中调整 Banner。
- 对照设计检查预览；如果套餐包含，可用 AI 评估进行评估。
- 导出代码，并在 Banner 实际投放的环境中测试。
常见问题
MarkupGen 能导出可直接用于 Google Ads 或其他广告网络的 ZIP 吗？ 不能。MarkupGen 导出的是 Banner 的 HTML、CSS、图片和字体。点击跟踪、体积限制以及各广告平台的打包规则不在处理范围内，需要你自行添加并验证。
可以给 Banner 加动画吗？ 可以为元素应用 fade、slide、zoom、flip 等入场动画预设，它们在元素进入视口时播放，并可设置时长、延迟和缓动。没有时间轴或关键帧编辑器。
Free 套餐可以使用 Studio Editor 吗？ 可以。可视化编辑包含在 Free 套餐中，并与每月生成额度共用。AI 评估需要付费套餐。
我的修改会同步回 Figma 吗？ 不会。修改只作用于生成的 HTML 和 CSS，你的 Figma 文件不会被改动。
Banner 会和我的设计完全一致吗？ 通常相当接近，但不保证完全一致。请将预览与原稿对比，并在 Studio Editor 中修正差异。
把你的 Figma 设计变成可编辑的 HTML5 Banner
在 Figma 中设计，用 MarkupGen 生成代码，在 Studio Editor 中打磨你的 Banner。