Locofy 6 月重磅更新:全面支持 Figma Dev Mode 与 Vue.js 原生生成

ADK Locofy官方 / ADK编译 2023-07-10 5 分钟 64 次浏览
速览导读 / Summary

Locofy 于 6 月迎来重大更新,正式支持 Figma Dev Mode,实现设计稿与代码的实时双向同步。新增 Vue.js 原生代码生成能力,并引入 Styled Components 与 Emotion 等高级 CSS 方案。同时扩展 React Native 标签库及智能对齐修复功能,大幅提升开发者从设计到代码的转化效率与灵活性。

新增技术栈支持 Vue.js 支持从 Figma 生成生产就绪的 Vue 组件代码
Figma 深度集成 Dev Mode 支持实时预览查看与代码直接导出
新增 React Native 标签 5 个 包括 Video, Audio, Lottie, Accordion, Badge

Key Insights / 核心看点

  • 1 正式支持 Figma Dev Mode,实现设计稿与代码的实时双向同步与一键复制
  • 2 新增 Vue.js 原生代码生成能力,打破单一 React 生态限制
  • 3 集成 Styled Components 与 Emotion,提供更高阶的组件样式定制方案
  • 4 扩展 React Native 标签库并引入智能对齐修复 AI 功能

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 ComponentsEmotion (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 官方团队

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 官方团队

同主题深度资讯

查看更多 →
产品动态 2026-09-15

Topview 发布 Codex 插件工作流:在 ChatGPT 生态内实现 AI 视频生成

Topview 正式宣布其插件工作流集成至 OpenAI 的 Codex 代理系统,支持在本地桌面端或 CLI 中直接调用生成式模型创建 AI 视频。文章详细区分了 ChatGPT 网页版插件目录与 Codex 本地代理的架构差异,明确了安装路径、OAuth 认证流程及 Canvas 画布工作流。该更新旨在解决开发者在 ChatGPT 生态内调用视频生成模型(如 Seedance, Wan 3.0 等)的碎片化问题,强调 Pro 及以上订阅计划对自动化工作流的必要性。

Topview官方 / ADK编译 5 分钟
AI 工具 2026-09-08

Accio Work 2026 安全剃须刀刀片评测指南发布:覆盖敏感肌与硬茬胡须的全场景解决方案

Accio Work 于 2026 年 9 月发布最新评测指南,针对 2026 年湿剃市场的演变,深度解析了 8 款最佳安全剃须刀刀片。指南涵盖从 Astra Superior Platinum 的全能王者到 Feather Hi-Stainless 的极致锋利,特别强调了针对敏感肌肤(如 Derby Extra Super Stainless)和环保需求(如 Personna Lab Blue)的专项解决方案,为不同肤质与胡须类型的用户提供精准选型建议。

Accio Work官方 / ADK编译 3 分钟
AI 工具 2026-09-08

Accio Work 发布厨房研磨工具智能指南:材料选择与性能优化解析

Accio Work 发布了一篇关于研磨钵(Mortar and Pestle)最佳材料选择的深度指南。文章详细对比了花岗岩、大理石、陶瓷、木材及不锈钢等主流材质在研磨性能、耐用性、维护难度及美学风格上的差异。该指南旨在帮助消费者及零售商根据烹饪需求(如香料粉碎、酱汁制作)做出精准决策,体现了 Accio Work 在垂直领域知识库构建与搜索优化方面的技术实力。

Accio Work官方 / ADK编译 3 分钟
AI 工具 2026-09-08

Accio Work 2026 年迷你喷射快艇设计趋势:电动化与模块化重塑水上运动

Accio Work 发布 2026 年迷你喷射快艇设计趋势报告,展示了 9 款重新定义水上运动的新概念。核心亮点包括革命性的充气式电动快艇、热插拔电池系统的通勤者设计、以及专为家庭安全优化的模块化构建方案。这些设计利用先进复合材料与零排放电动动力,解决了传统水上运动便携性差、续航焦虑及安全性不足的问题,为个人娱乐与商业租赁市场提供了全新灵感。

Accio Work官方 / ADK编译 3 分钟