背景
在 Figma 推出 Dev Mode 之前，图层节点的标注信息（包括 CSS 代码）可以在免费、只读模式下查看，如下图所示（2022 年 Figma 界面）：
右下角展示了图层节点的 CSS 代码。然而，随着 Dev Mode 的推出，未购买席位的开发者需要付费才能查看这些信息，如下图所示：
在 Dev Mode 中，开发者可以复制部分样式，但若需完整样式，需逐个点击复制，操作繁琐。
Figma 插件的局限性
为方便公司内部未购买 Dev Mode 席位的开发者，F2C 团队开发了 Figma 插件，用于提取图层节点信息。然而，该插件要求开发者拥有编辑权限，这意味着需要将设计稿复制到本地草稿。如果设计稿内容较多，复制过程耗时较长。
基于以上问题，全新 F2C Chrome 插件 应运而生，解决了在只读权限下查看图层信息和生成代码的痛点。
快速使用指南
前置条件
- 下载 F2C Chrome 插件。
- 安装 IDE，推荐使用 Comate，也支持 VSCode、Trae、Cursor 等。
- （可选）安装 F2C-MCP，若使用 VSCode、Trae、Cursor 等 IDE 需安装此工具。
开始生成代码
- 打开设计稿并选择节点
在浏览器中打开 Figma 设计稿，选中需要转换的图层节点，点击浏览器右上角的 F2C 插件代码图标：
-
授权与代码生成
若未授权，插件会跳转至 Figma 官方授权页面。授权后，界面如下，包含"下载代码"、"预览代码"和"跳转 Comate"三个选项。点击"跳转 Comate"：
-
运行生成代码
跳转至 Comate 后，插件会自动生成 Prompt，点击运行即可生成代码：
若使用非 Comate 的 IDE，需安装 F2C-MCP。可通过复制插件中的链接生成代码：
功能介绍
F2C Chrome 插件 允许开发者在只读权限下完成以下操作：查看图层节点信息、切图下载或上传、生成代码等。
1. 图层标注信息
选中任意图层节点，可查看类 DevTools 风格的盒模型信息、CSS 代码或 JavaScript 内联代码，以及相关属性和背景颜色：
2. 切图功能
选中图层节点后，可预览图片，点击"添加至图层列表"将其加入切图列表。操作栏功能（从左到右）包括：
- 下载到本地
- 上传至 Bos（仅限 YY 内部）
- TinyPNG 压缩
- 预览模式
若预览大图层文件时出现卡顿，可关闭预览模式，点击右上角"添加"按钮将图片加入列表：
TinyPNG 压缩
点击"压缩图片"按钮，弹出选项：不压缩、自定义 Token、YY 内部压缩。选择后两项可自动压缩图片：
自定义 Token 可通过 TinyPNG 开发者页面 获取，每用户每月可免费压缩 500 次。获取 Token 后填入保存即可：
3. 生成代码
点击右上角代码按钮生成代码。首次使用需通过 Figma 官方授权获取合法 Token，点击"Allow access"完成授权：
授权后，可预览图层节点代码，操作选项包括：
- 下载代码文件到本地
- 浏览器预览代码
- 跳转至 Comate IDE
跳转至 Comate IDE 后，Zulu 工具会自动生成代码：
4. 工具栏
工具栏提供以下功能：
-
深层节点选择 ：相当于 Figma 快捷键 Ctrl（Windows）或 Meta（Mac）：
-
自动测量 ：相当于 Figma 快捷键 Alt，启用测量功能：
-
单位与平台支持：兼容 Web、Android 和 iOS 平台，Android 和 iOS 使用 dp 单位。
5. 插件兼容性
F2C Chrome 插件完全兼容 Tempad-Dev：
与其他插件的对比
市面上已有类似插件，如 Tempad-Dev 和 Fubukicss-Tool。F2C Chrome 插件在借鉴其优秀功能的基础上，增加了与 F2C 和 Comate 生态的深度整合，具体优势如下：
| 功能/插件 | F2C Chrome 插件 | Tempad-Dev | Fubukicss-Tool |
|---|---|---|---|
| 只读权限支持 | ✅ 支持 | ✅ 支持 | ✅ 支持 |
| 图层信息查看 | ✅ 类 DevTools 盒模型、CSS/JS 代码 | ✅ 部分支持 | ✅ 部分支持 |
| 切图功能 | ✅ 下载、上传 Bos、TinyPNG 压缩 | ❌ 不支持 | ❌ 不支持 |
| 代码生成 | ✅ 高还原度，集成 Comate IDE | ❌ 不支持 | ❌ 不支持 |
| 生态整合 | ✅ 支持 F2C、Comate、F2C-MCP | ❌ 无整合 | ❌ 无整合 |
| 代码拟人化 | ✅ 工业级代码输出 | ❌ 不支持 | ❌ 不支持 |
| 平台支持 | ✅ Web、Android、iOS（dp 单位） | ✅ 部分支持 | ✅ 部分支持 |
F2C Chrome 插件通过与 F2C-MCP 和 Comate IDE 的整合，生成高还原度、拟人化的工业级代码，显著提升开发者效率。
未来计划
结合 F2C 和 Comate 生态，F2C Chrome 插件未来将推出以下功能：
- 自定义图片上传服务：支持用户自定义上传目标。
- 设计稿信息配置上传：简化设计稿信息管理。
- Prompt to Figma：通过一句话生成 Figma 设计稿（已有进展）。
- 智能组件识别：打通 Prompt to Figma to Code 流程，自动识别设计与开发组件（已有进展）。
总结
F2C Chrome 插件通过在只读权限下提供图层信息查看、切图管理和代码生成功能，解决了 Figma Dev Mode 付费限制和传统插件编辑权限的痛点。结合 F2C 和 Comate 生态，插件显著提高了设计转代码的效率，未来还将推出更多智能化功能，敬请期待。