把 Figma 转成 HTML 一定要用插件吗?

搜索"figma to html without plugin"通常意味着两件事之一:你不想安装任何东西,或者你对把 Figma 账号访问权限交给第三方工具心存顾虑。两者都是合理的直觉。下面来看看那些不用插件的替代方案实际是怎么做的,以及它们的不足之处。

"不用插件"通常意味着什么

跳过插件这一步的工具,通过以下两种方式之一获取你的设计数据:

• 共享的 Figma 链接 + Figma REST API。 你粘贴一个公开(或已共享)的文件链接,工具请求一个 OAuth 令牌,然后通过 Figma 的 API 拉取文件数据。这确实可行,但这意味着要授予一个可以读取你整个账号或团队的令牌——比交出一个画框的访问范围大得多。
• 截图或导出的图片。 你上传一张 PNG 或粘贴一张图片,AI 视觉模型从像素中猜测布局。没有 Auto Layout 数据,没有真实的间距数值,没有组件结构——只是对这张图片"大概"是什么代码的一种估计。

这两种方式并非在所有场景下都不合适。但它们都放弃了插件本可以免费获得的信息。

插件实际上放弃了什么,又换来了什么

Figma 插件运行在 Figma 自己的沙盒插件 API 内部。它只能看到你打开的文件,并且只有在你明确选中一个画框并导出时才会发送数据——不是你的整个账号,也不是你的其他项目。这是比长期存在的 OAuth 令牌更窄的访问授权,而不是更宽。

作为交换,它获得的是真实数据:Auto Layout 的方向、间隙和内边距作为真实数值、缩放约束、组件结构、文字样式和图片资源——全部直接从设计中读取,而不是从一张截图中重建。这就是 Auto Layout 干净利落地映射到 Flexbox,和 AI 模型从一张图片里瞎猜间距之间的区别。

安装插件的真实成本

安装一个 Figma 插件所花的功夫,和点一个链接差不多:打开文件,从 Community 标签页(或你团队的私有插件)添加插件,之后它就会一直出现在右键菜单里。你完全不用离开 Figma 就能完成,也不会像基于 OAuth 的网页工具那样弹出一个单独的、涵盖整个账号的权限申请页面。

MarkupGen 的选择

MarkupGen 有意选择了插件方案。你在 Figma 中选中一个画框,用插件把它发送到你的工作区,AI 就会根据设计的真实结构——而不是它的截图——生成 HTML、CSS 或 Tailwind。如果避免安装一次性、范围受限的插件是你工作流程里的硬性要求,那么基于链接或截图的工具会更适合你。如果你愿意用这次安装,换取真正从设计中推导出来、而不是靠猜的标记代码,这正是插件存在的意义。

免费转换 — 无需信用卡。