F2C - Figma to Code: React, RN, Vue, HTML YY D2C 研发工具

About this plugin

由YY直播的互动团队和YDC团队打造的Figma生态插件

功能

1. 代码生成。支持React ，React Navie, 鸿蒙， Taro，Vue等设计稿代码直出
2. 代码优化。通过图层标记实现代码变量预埋，代码列表循环结构，代码分块等功能
3. 设计标注工具。支持查看设计标注，一键切图等
4. 组件支持。提供一套开箱即用、可被D2C识别且与代码严格对齐的组件标记工具，并支持标记第三方组件库
5. 图像上传（仅内部）。支持内部业务自定义图片上传接口

如何使用

1. 安装插件
2. 选择图层并开始转码。 （如果没有编辑权限，可以使用Figma【复制到我的草稿】功能）
3. 安装 F2C-VSCode插件
4. 选择图层, 点击【生成】

更多教程请查看官网

使用提示

1. 为了更好的布局效果，请遵循设计规范
2. 可以开启AI智能命名以获得更好的CSS类名命名(仅内部)

高阶用法

1. 标记组件库。使用插件标记组件或组件集，实现第三方组件库的D2C识别。
2. 图层打Tag。将图层打上不同特征标记以获得不同的代码效果。

实验性

1. MaskGroup, Drop shadow包裹的内容会转化为图片，Drop shadow提供实验性选项保留CSS属性

更多教程请查看

官网：f2c.yy.com