F2C用户手册
F2C 用户手册
功能介绍
F2C(FigmaToCode)功能支持一键将 Figma 设计稿转换为高可用的代码,在 VS Code Comate 插件中您可通过以下两种方式使用该功能:
(1)Zulu 可基于 Figma 复制的设计稿链接一键生成可维护的高质量代码。
(2)Chat 可基于 Figma F2C 插件复制的指令一键生成代码。
以下内容将详细介绍两种 F2C 功能。
1. Zulu F2C 一键生成代码
1.1. 前置准备
首先在 VS Code 中安装 Comate 插件(v3.4.2以上),详见官网下载安装页面官网下载页面。
1.2. Figma 客户端或浏览器复制设计稿链接
启动 Figma 客户端或浏览器,打开 Figma 设计图demo,选择设计稿中的一个节点,右键 Copy/Paste as —> Copy link to selection 复制需要生成的设计稿链接。
1.3. 粘贴 Figma 链接至 Zulu 一键生成代码
(1)打开 VS Code Comate 插件,在 Zulu 对话框中输入" / ",点击 FigmaToCode 命令,粘贴 Figma 中复制的链接(首次使用该功能需要点击获取授权码)。
(2)有两种生成策略可选:
- 还原度优先(代码将尽可能还原内容的原始样式和排版,不影响整体外观)
- 结构优先(代码强调内容结构,便于后续编辑和处理)
生成策略选择完成后,点击开始执行按钮一键生成高可用的代码。



2. Chat F2C 一键生成代码
2.1. 前置准备
(1)Figma 浏览器或客户端安装 F2C 插件
(2)VS Code 安装 Comate 插件(v3.4.2以上)
2.1.1. Figma 浏览器或客户端安装 F2C 插件
可在 Figma 桌面应用或 Web Figma 安装插件,以下是安装插件的简要步骤:
(1)打开一个 Figma 设计图,以网页端为例,打开设计图demo。
(2)右键点击 Duplicate to your drafts 复制为您的草稿(为了获取编辑权限,如果您已经有设计图的编辑权限可以跳过这一步)。 无设计图编辑权限可能会不显示插件功能。如果无编辑权限,可以复制当前设计图作为您的草稿再进行测试。
(3)点击 Figma 网页左上方的 Figma 图标,选择 Plugins,再选择 Manage plugins... 打开插件市场搜索框。
(4)在插件市场搜索栏输入 F2C 搜索,选择图中 F2C 插件,点击 Save。


更多信息:F2C使用指南
2.1.2. VS Code 安装 Comate 插件(v3.4.2以上)
详见官网下载安装页面官网下载页面。
2.2. Figma 客户端或浏览器复制指令
(1)选择目标图层,右键选择 Pluins —> F2C —> Baidu Comate。
注意:无设计图编辑权限可能会不显示插件功能。如果无编辑权限,可以复制当前设计图作为您的草稿再进行测试。
如无权限,点击 Duplicate to your drafts,在草稿中操作。
(2)打开 F2C 插件后,按照您的自定义需求设置参数,点击 复制 Comate 指令。
2.3. 粘贴 Figma F2C 指令至 Chat 一键生成代码
(1)Comate Chat 中输入@,选择 F2C x Comate,粘贴 Figma 中复制的指令并点击执行按钮,Comate 开始生成代码,生成后可批量采纳。



(2)点击配置自定义规则可进行规则配置,注意:CONFIG 中可以规定图片和组件的写入路径,其中$name用来占位图层名称。注意 CONFIG 的结构不能修改。
