Figma 转 HTML / 导出代码：可行方式与注意点 #
搜「figma 转 html」「figma 导出 html」「figma to html」时，意图多半是：少写手工 CSS，尽快把设计变成网页。需要先对齐预期：Figma 是设计与协作工具，不是保证像素级可维护前端工程的「导出 IDE」。下面按官方能力与常见辅助路径说明。
路径一览 #
| 路径 | 适合 | 说明 |
|---|---|---|
| Dev Mode | 设计师 ↔ 工程师交接 | 查看尺寸、色值、部分代码片段；见 Dev Mode |
| Figma MCP | AI 编程助手读设计 | 让 Cursor 等工具按文件上下文生成代码；见 Figma MCP |
| Figma Sites | 在 Figma 内发布站点 | 设计 + 发布响应式站点（能力以官方为准）；见 Figma Sites |
| Figma Make | 提示词 / AI 生成界面 | 偏生成与迭代，不完全等于导出静态 HTML；见 AI 与 Make |
| 导出 PNG/SVG/PDF | 切图与分享 | 传统资源导出；见 如何导出资源 |
| Community 插件 | 实验性转码 | 第三方维护，输出质量参差；安装见 插件指南 |
Dev Mode：先让开发「读得懂」 #
对多数产品团队，可维护的前端仍由工程师在目标框架里实现。Dev Mode 提供规格、标注与代码提示，减少来回截图。
- 打开设计文件，切换到 Dev Mode（权限与席位要求见官网与 价格页导读）。
- 选中 Frame / 图层，查看 CSS 等提示与资源导出。
- 用注释和组件文档补充交互，而不是只依赖自动代码。
用 MCP / AI 辅助写 HTML #
若你的编辑器已接 Figma MCP，可让助手读取当前选区或文件结构再生成 HTML/CSS/框架代码。务必：
- 人工检查语义标签、响应式与无障碍
- 不要把含私密业务的数据文件随意授权给不明工具
- 生成结果当草稿，纳入你们的代码规范
Sites：官方「设计即发布」方向 #
若目标是营销页 / 简单站点而不是复杂 Web App，优先评估 Figma Sites：在 Figma 内完成布局与发布，减少「先导出再粘贴」的步骤。复杂交互与后端仍需其它工程手段。
插件与第三方「一键转 HTML」 #
社区里有多种 design-to-code 插件与外部服务。选用时建议：
- 看 Concavity / 更新时间、权限范围、是否开源或可审计
- 小 Frame 试转，检查 class 命名、绝对定位滥用、图片体积
- 商用前读清插件与生成代码的许可
本站旧文中有第三方工具介绍，仅供参考，不构成官方能力。更稳妥的工程路径仍是 Dev Mode + 设计系统 + 前端实现，或 Sites / Make 按场景选用。
和「导出」一词的区分 #
相关页面 #
来源：Figma 产品帮助与定价公开说明；具体菜单名以账号内版本为准。