Wayne的技术博客
·
【笔记】Figma和AIGC（持续）
💡
原文中文，约1900字，阅读约需5分钟。
📝
内容提要
Figma支持在线协作和插件，AI技术推动设计稿生成和前端代码转化。通过Chrome插件可从网页复刻UI并生成Figma设计稿。Figma AI和Google Stitch等工具提升设计效率，支持自然语言生成设计稿，简单场景效果良好，但复杂页面仍需调整。
🎯
关键要点
- Figma具备在线多人协同能力和社区插件体系，类似于Sketch和PhotoShop。
- AI技术推动Figma设计稿生成和前端代码转化，正在迅速发展。
- 通过Chrome插件可以从网页复刻UI并生成Figma设计稿，当前UI界面复刻能力达到90%。
- 主要工具为html-to-figma，使用步骤包括爬取网站UI信息并生成json文件，导入Figma插件生成设计稿。
- Figma插件支持直接输入URL地址生成设计稿，类似产品还有demoway的html-to-figma。
- AI IDE如Cursor和Windsurf可以分析代码并生成Figma设计稿，但复杂页面仍需调整。
- Figma AI和Google Stitch等工具支持自然语言生成设计稿，简单场景效果良好，复杂页面需调整。
- Figma to Code功能正在发展，静态页面和官网场景可应用，但复杂场景仍需代码调整。
➡️
