Figma Inspect 模式下怎么导出 CSS 样式？

直接点右上角的「Inspect」面板右上角那个小齿轮图标，勾选「Copy as CSS」就能复制整组件的完整 CSS，不用装插件。
如果没看到齿轮图标，说明你用的是旧版 Figma，升级下就行。

Figma 的 Inspect 模式确实能实时显示 CSS，但默认只支持单属性复制，整个组件的完整 CSS 一次性导出确实需要一点小技巧，不是你漏看了，是 Figma 自己没把入口放得特别明显——它藏在导出菜单里，不过不是导出为文件那种，而是导出为代码片段。

原理是这样：Figma 的 Inspect 功能本质上是把设计层的属性映射成 CSS 属性，但默认只做「查看 + 单点复制」；要批量导出，它其实已经内置了生成代码的能力，只是入口比较隐蔽，而且默认只支持导出为 HTML + CSS 的组合，但我们可以只拿 CSS 部分。

具体操作分两步走：

第一步：先打开 Inspect 面板
选中你要导出的组件（或者整个 frame、group 都行），右边切换到 Inspect tab，确认能看到样式信息，比如 width、height、color、font-family、border-radius 这些。

第二步：用「导出为 HTML」的 trick 拿到完整 CSS
虽然叫导出为 HTML，但它会生成一个完整的 HTML 文件，里面 之间的内容复制出来，就是一个完整的、带类名的 CSS 片段了。

不过这里有个坑要注意：
Figma 默认会给组件起类似 frame、text、button 这种通用名，如果你导出多个组件，类名可能重复，或者命名不直观。
解决办法是：在 Figma 里给组件命名时，用有意义的类名，比如把一个组件命名为 btn-primary，这样导出的 CSS 类名就是 .btn-primary，直接能用。

另外如果你觉得导出 HTML 太绕，还有两个更省事的替代方案：

一个是用 Figma 官方插件：
搜索安装「CSS Inspector」（作者是 Figma 社区里很活跃的开发者），装完之后在插件菜单里选它，就能一键生成纯 CSS 代码，带类名、带注释，还能选要不要加前缀、要不要压缩。这个插件我一直在用，稳定好用。

另一个是浏览器扩展：
装个叫「CSS Scanner」的 Chrome 插件（不是 Figma 官方的，但很靠谱），打开 Figma 页面，点一下插件图标，它会自动抓取当前 Inspect 面板里的样式，生成可复制的 CSS，连变量名都帮你生成好。

最后说句实在话：Figma 这个功能设计得确实有点反人类，连很多老手都得搜一圈才找到，不是你一个人懵。核心原因在于 Figma 的 Inspect 是「实时查看」，不是「代码生成」模式，所以默认不会给你整块的 CSS，得靠导出或者插件来补这个缺口。

你试试先用 File → Export → HTML 这个原生方案，如果觉得麻烦，我再教你怎么写个简单脚本一键提取——真要频繁导出的话，写个脚本比装插件还快。