Figma插件导出的HTML不可直接使用，因其生成的是无语义、无响应、无交互的静态快照，含大量内联样式、px单位、随机class名、base64图片及缺失字体资源。
导出的 HTML 根本不能直接用，为什么？
因为 figma to html 类插件（比如 figma2html、anima、zeplin 导出器）生成的代码不是“可运行网页”，而是带大量内联样式、无语义标签、无响应逻辑的静态快照。它不处理交互、不兼容现代 css 布局（如 flex 或 grid 会被转成固定像素值），也不考虑浏览器差异。
常见错误现象：margin 全是 px、font-size 写死、div 嵌套爆炸、class 名像 layer_12345、没有 alt 属性、图片路径是 base64 而非相对路径。
- 使用场景仅限：临时预览、给非前端同事看结构、作为手写代码的视觉参考
- 千万别把它当交付物或直接扔进 Vue/React 项目里
- 如果图层用了 Figma 的「Auto Layout」，部分插件会生成一堆
display: inline-block+vertical-align: top，而不是真正语义化的flex
Figma 插件生成的 class 名怎么改才不至于崩溃？
默认导出的 class 名（如 group-789、text-style-42）毫无维护性，但直接全局替换会断掉插件后续更新——因为插件靠这些 class 名映射图层样式。想改，只能在导出后手动处理，且必须同步改 CSS 和 HTML。
- 导出前，在 Figma 里给关键图层手动设好有意义的
Layer Name（比如header-logo、cta-button），部分插件（如Anima）会优先读这个名 - 导出后立刻搜索替换：
class=".*?"→ 改成你约定的 BEM 风格，比如class="header__logo" - 别动
id属性——有些插件靠它定位动态内容，乱改会导致 JS 初始化失败 - 注意：
Anima导出的 CSS 里有大量[data-anima]属性选择器，删了就丢交互动效
图片和字体资源导出后打不开怎么办？
插件默认把图片转成 base64 内联，字体只导出名称（如 "Inter"），不打包文件。本地打开 index.html 时，浏览器因安全策略禁止读取本地 font 文件，base64 图片又没压缩，体积暴增。
- 图片处理：用编辑器批量把
src="data:image/.*?base64,替换为src="./images/xxx.png"，然后把对应图片从 Figma 导出（右键图层 →Export），存到./images/目录 - 字体处理：不要指望插件帮你下 Inter 或 Roboto。得自己去
fonts.google.com拿@import或<link>，再把 CSS 里的font-family值对齐（注意 fallback，比如font-family: "Inter", -apple-system, sans-serif） - 绝对别用插件导出的
@font-face块——它通常指向不存在的本地路径，比如url("./fonts/Inter-Regular.woff2")
用 Anima 导出 React 组件，props 怎么接才不翻车？
Anima 的「Export as React」功能看似智能，实际只把图层名当 prop 名，且所有 props 默认是 string 类型。一旦设计稿里有开关、列表、图标状态，生成的组件根本没法传布尔值或数组。
立即学习“前端免费学习笔记（深入）”；
- 导出前，在 Figma 中给需要动态控制的图层加命名后缀，比如
button-primary--disabled，Anima 会识别--disabled并生成disabledprop - 导出后立刻打开
.tsx文件，把自动生成的props: { children: string }改成完整类型定义，比如interface Props { disabled?: boolean; icon?: ReactNode } - 插件生成的
className是硬编码字符串，别直接传className={props.className}——它不合并外部 class，要用clsx或模板字面量拼接 - 最坑的是：Anima 不处理
key，循环列表导出后全是<div>item</div>，没key，React 会报警告
真正难的从来不是“一键生成”，而是生成后那堆没声明的变量、没处理的边界 case、和设计稿里没标注的悬停/加载/错误态——这些插件一个都看不见。
