不用MCP也能设计稿一键转代码，端午活动页面快速上线！

端午节马上就要到了！老板想做个品牌宣传页、产品互动活动页面，但是：
👉 设计稿已交付，作为FE的你却忙不过来？
👉 身为一名运营，想搞节日活动，却没人手配合？
👉 计划用AI编程写前端，但配置MCP Server太复杂？
别担心，文心快码 F2C 插件来帮你啦！设计稿一键转代码，让节日页面开发像龙舟竞速一样快！

1 F2C是什么？

F2C，即Figma To Code，是YY F2C团队联合文心快码在VS Code中内置的工具。不用配置MCP Server就能将Figma设计稿一键转换为高可用代码。高还原、好维护、超便捷！拥有它，FE和产品/设计协作更高效！

2 安装插件

2-1 在Figma中安装F2C插件

2-1-1 在Figma桌面端或Web Figma中，打开一个Figma设计图。

以Figma桌面端为例，打开Figma设计图。

2-1-2 将设计图复制为自己的草稿。

*注意：为了获取编辑权限，如果您已经有设计图的编辑权限可以跳过这一步；无设计图编辑权限可能会不显示插件功能，可以复制当前设计图作为自己的草稿再进行测试。

2-1-3 搜索并安装Figma F2C插件。

点击左上方的Figma图标，选择Plugins，再选择Manage plugins... 打开插件市场搜索框，搜索F2C，点击 Save。

2-2 在VS Code中安装文心快码插件

进入文心快码官网，在VS Code中安装最新版的文心快码插件。这是实现设计稿到代码转换的关键一步！

3 开始F2C Workflow

👉点击观看视频教程

3-1 选择图层打开Baidu Comate

在Figma中，选择目标图层，右键选择Plugins → F2C → Baidu Comate。

3-2 复制指令到文心快码

在Figma打开F2C插件后，设置参数后复制指令；在VS Code的文心快码插件中「Chat」对话框上方选择F2CxComate，点击“生成代码”，粘贴指令后执行。

3-3 F2C生成代码

3-4 配置自定义规则

在F2C插件中，点击配置自定义规则。你可以规定图片和组件的写入路径，让生成的代码更加符合你的需求。

注意：CONFIG中可以规定图片和组件的写入路径，其中$name用来占位图层名称。注意CONFIG的结构不能修改。

3-5 使用Zulu进行优化

点击“使用Zulu”优化生成的可维护代码。Zulu将为你持续优化代码，确保代码的高可用性和可维护性。

3-6 端午活动页面，轻松搞定！

4 新功能预告

端午节后，文心快码即将上线新功能：
无需Figma插件，Comate Zulu直接从Figma链接为您生成代码。提供还原度优先和结构优先两种生成模式，适配各种业务需求，设计稿转代码更高效！
👉点击观看文心快码新功能预告视频

看到这里，你是否跃跃欲试啦？👉点击进入文心快码官网，立即下载文心快码开始F2C Workflow吧！