CodeFun
优势：
- 生成代码速度快，导入设计图后，几分钟生成代码
- 支持的平台较多!
缺点：
- css样式命名及写法不太规范，需要改动
收费情况
pxCode
优势：
- 生成的代码质量高
- 支持多种平台
- 支持响应式布局，适配多端，功能强大，具有可视化界面，支持添加动画等功能
缺点：
- 上手较codeFun困难些，需要学习如何结构化设计图，合理结构化之后才能导出代码，否则不能导出，这也是为什么产出的代码质量比较高
- 对设计稿要求要严格一些，设计稿切图需要规范、合理，否则产出的代码会达不到效果，需要修改，影响效率
收费情况：
Figma to Code
免费，使用人数最多，但是输出的代码是行内样式
或者是生成tailwindcss代码
Locofy Lightning
现在是免费测试版，具有免费天数，提交反馈就可以增加免费天数
优点：
- 免费，一键生成代码，速度较快
- 支持的类型较多
缺点：
-
使用了太多的绝对定位布局，有些需要手动修改（是个别设计稿的原因）
-
并不能100%完全还原设计稿，不过每个插件都有这个问题，需要做修改
-
vuejs版本只支持3.0，不过这个工具最多用来生成布局和样式，不太影响使用
Anima
使用人数很多
收费情况
由于是免费账号，好多其他功能看不到
优点：
- 支持vuejs, reactjs, html
- 生成代码速度快
缺点：
1. 生成的vuejs项目，组件划分的太细，不够合理（有可能与设计图有关）
2. css命名不够规范
总结
- 调研的所有工具css命名规则都不能遵循css 的bem规范，如果使用这些插件，需要抛弃bem规范
- 所有的工具生成的代码都需要做一些改动，但是绝对会节约写静态页面的时间
- 建议大家可以先使用Locofy Lightning，这个现在是免费，上手很快，使用人数也很多，支持vuejs， reactjs
- 也可以使用pxCode，这个生成的代码质量最优，但是需要设计稿要规范，否则不会节约太多时间 www.youtube.com/@pxcode_zh
