Locofy 6 月重磅更新:全面支持 Figma Dev Mode 与 Vue.js 原生生成
Locofy.ai 在 2023 年 6 月推出了多项关键功能升级,旨在解决开发者在 Figma 设计稿转代码过程中面临的痛点。此次更新不仅深度整合了 Figma 最新的 Dev Mode,还显著增强了技术栈的兼容性与代码生成的智能化程度。
核心功能突破
1. 全面支持 Figma Dev Mode
Locofy 正式接入 Figma Dev Mode,这是本次更新的最大亮点。开发者现在可以直接在 Figma 的 Dev Mode 中查看实时、响应式的预览,并一键复制或下载驱动该预览的完整代码。这一功能消除了传统模式下需要手动截图或导出代码的繁琐流程,实现了设计与代码的无缝衔接。
2. 新增 Vue.js 代码生成能力
此前 Locofy 主要专注于 React 生态,此次更新正式引入对 Vue.js 的支持。用户现在可以从 Figma 设计稿中生成像素级精准、生产就绪的 Vue.js 代码,极大地拓宽了构建者的技术栈选择,满足了更多前端团队的需求。
3. 高级 CSS 样式库集成
为了提升组件的定制化能力,Locofy 新增了 Styled Components 和 Emotion (CSS in JS) 两种强大的样式选项。开发者可以像编写普通 JS 代码一样管理样式,实现更灵活的组件定制和主题切换。
4. React Native 标签库扩展
移动端开发体验进一步优化,Locofy 新增了 Video, Audio, Lottie, Accordion, Badge 等 5 个新的 React Native 标签。这使得将移动设计稿转化为原生代码变得更加直观和高效。
5. 智能对齐修复与 UX 优化
AI 引擎在一致性处理上迈出了新的一步,不仅能提示修复不一致的对齐问题,还能主动建议多种对齐方案。此外,插件内的标签组织方式也得到了简化,新增搜索栏功能,让用户能更快速地定位所需标签。
开发者价值与应用场景
这些更新显著降低了 Figma 设计稿转代码的门槛。对于 Web3 初创公司如 Terraspaces,Locofy 已帮助其节省超过 90% 的开发时间;而对于数字代理 Forga,Locofy 助力其快速构建了 3 个应用,节省了 50% 的开发周期。无论是构建复杂的 Web 应用还是移动端产品,Locofy 都能提供从设计到代码的一站式解决方案。
总结
Locofy 此次更新通过深度集成 Figma Dev Mode 和拓展 Vue.js 支持,进一步巩固了其作为设计转代码工具的领导地位。对于追求高效交付和灵活技术栈的开发者而言,这些功能无疑是一次重要的生产力提升。
"We are thrilled to announce that Locofy.ai now supports Figma Dev Mode... allowing you to take full advantage of the latest features offered by Figma."
—— Locofy 官方团队