F2C 用户手册

功能介绍

F2C（FigmaToCode）功能支持一键将 Figma 设计稿转换为高可用的代码，您可通过以下两种方式使用该功能：

（1）在Comate AI IDE中使用预览功能打开figma设计稿，选择设计稿任意元素添加到figma2code agent中进行对话
（2）在 VS Code Comate 插件中直接选择figma2code agent。

以下内容将详细介绍两种 F2C 功能。

1. Comate AI IDE中使用F2C （推荐）

1.1. 前置准备

首先安装 Comate AI IDE（v1.100.1以上），详见官网下载页面。

1.2. 使用预览功能打开figma设计稿

打开Comate AI IDE，点击左侧Open Preview按钮或点击输入框中的figma图标，即可使用预览功能打开figma（首次打开figma需要登录和授权）。

1.3. 选中设计稿元素发送到对话

在figma设计稿中选中任意元素，点击右下角发送到对话，在Figma2Code智能体中进行对话即可。

2. VS Code Comate中使用F2C

2.1. 前置准备

详见官网下载安装页面官网下载页面。

2.2. Figma 客户端或浏览器复制指令

启动 Figma 客户端或浏览器，打开 Figma 设计图demo，选择设计稿中的一个节点，右键 Copy/Paste as —> Copy link to selection 复制需要生成的设计稿链接。

2.3. 粘贴 Figma 链接至 Zulu 一键生成代码

（1）打开 VS Code Comate 插件，在 Zulu 对话框中选择并点击Figma2Code智能体，粘贴 Figma 中复制的链接（首次使用该功能需要点击获取授权码）。

（2）有两种生成策略可选：

• 还原度优先（代码将尽可能还原内容的原始样式和排版，不影响整体外观）
• 结构优先（代码强调内容结构，便于后续编辑和处理）生成策略选择完成后，点击开始执行按钮一键生成高可用的代码。