FishyerGarden前端工程师的必备神器-Figma
type
status
date
slug
summary
tags
category
icon
password
今天深度体验了一下这2个Figma插件:
- Codia AI Design 截图转设计稿
- Codia AI Code 设计稿转代码
不得不感叹一句:真的太方便了!
唯一可惜的是:免费版有次数限制,不过它真的可以给设计师和前端工程师省不少事.
有此神器在手,以后想复刻哪个网页的效果,真的是分分钟的事!
1-截图转设计稿
安装Codia AI Design插件以后,在设计页面使用插件,选择图片即可
可以看到:生成的设计稿和原始截图几乎是一模一样.
然后呢,我在原始截图的上面改了几个文字和logo,表示这确实是拆分成了各个独立的可编辑元素
2-设计稿转代码
安装Codia AI Code,在设计页面使用插件,选择设计稿中页面的根元素即可
这是我部署后的网页效果: https://vue.vip.cpolar.top/figmaLogin
这个网页上我给3个按钮都加上了吐息提示,表示这几个元素确实是可交互的
3-后续优化
不过呢,它自动生成的代码,虽然页面看起来对了,但是里面的各种命名都是background-1 background-2 background-3 image-4 image-5 image-6之类的,这种代码的可读性太差了,后期维护的话会相当头疼.同时也还存在一些其它的问题,总结了一下,后续大概要做的优化点:
- 命名优化
- html层次结构优化
- 公共style的优化
- 响应式布局的优化
如果手动去做的话,那肯定不是我的风格.这里我们可以再用Cursor来帮我们针对以上四点做一下优化.
然后,我们再随便加上点交互逻辑+数据处理,就可以愉快的早点下班回家了.🎉
其它类似插件
个人感言
我觉得用Figma设计组件的逻辑跟前端写UI组件的逻辑,有很大程度的相似,两者的合一再配合AI工具的使用是一种趋势.
这个比https://v0.dev这种纯由AI来直接从截图到代码的黑盒生成,更实用.感觉用v0时,AI生成什么样的页面,很靠运气.而现在用Figma插件,虽然中间多了一步设计稿的转换,但是正是因为有了设计稿,才有了人工微调的机会,而不必在生成代码以后再去大动干戈.
我觉得调整设计稿,要比调整代码,还是方便很多的.就算只是把Figma当做一个布局工具来用,也是蛮香的.
参考资料
上一篇
从 Obsidian 的最强编辑器-Bear 聊起
下一篇
模板说明
Loading...