AB
AB
AiBoss站

全部分类

教程

Locofy

教程

用 Locofy 把 Figma 设计稿转成可导出的前端代码

从注册账号、在 Figma 中运行 Locofy 插件，到选择框架与 UI 库、用 Lightning 流程转换设计、借 Agent Mode 修正响应式与无障碍问题，最后通过 Locofy Builder 导出项目。文中给出每一步的实际操作路径、可选框架清单、一次最多 5 个设计的限制，以及 LDMtoken 用量与账单的查看方式。

Locofy 是一个把设计稿转成前端代码的工具，它以插件形式运行在 Figma 里，读取画布上的 frame、图层和组件结构，再按你选定的框架与 UI 库生成可导出的项目。它适合两类人：一类是希望把设计稿快速变成可运行页面骨架的设计师，另一类是接手设计稿、不想从零手写布局的前端开发者。除了自动转换，它还提供 Agent Mode 用自然语言继续修改生成结果，以及 Locofy Builder 作为导出前的整理工作区。如果你只是想先看看站内还有哪些同类工具，可以从 Locofy 这一条目入手，再回到本文按步骤操作。

下面这条路径覆盖从注册到导出的完整链路：账号、插件、项目、转换、增强、导出。整个过程不需要手动切图或导出素材，Locofy 直接在你的设计文件上工作。

准备工作

账号

Locofy 的插件、项目与代码导出都挂在同一个账号下，所以第一步是注册。打开 Locofy 首页点击 Get Started，可以用 Google、GitHub、SAML SSO 或邮箱注册，然后完成引导流程，填写姓名、角色以及你打算如何使用 Locofy。这些信息只影响引导体验，不影响后续功能。

设计文件

你需要一个包含待转换界面的 Figma 文件。Locofy 直接作用于画布，所以必须处在定义了屏幕或组件的那个文件里，而不是一个空文件或只放了参考图的文件。

设计模式的选择

Locofy 在 Design Mode 和 Dev Mode 下都能运行，但两者能力不同：

  • Design Mode：用于创建和编辑布局，对 frame、auto layout 和结构有完整控制权。第一次使用建议在这个模式下操作。
  • Dev Mode：偏向查看与交付，开发者可以用它查看属性和间距，但编辑能力有限。

两种模式都能跑插件，但首次转换放在 Design Mode 更稳妥，因为 Locofy 依赖设计结构，而结构在 Design Mode 下才完整可编辑。

字体文件

如果设计里用了自定义字体，Locofy 在转换过程中会检测到缺失，并提示你从本机上传对应的字体文件。提前准备好字体文件可以少一次中断。

操作步骤

第一步：在设计工具中运行 Locofy 插件

打开包含目标界面的 Figma 文件，然后按下面的路径找到插件：

  1. 点击顶部工具栏的 Actions（快捷键 ⌘ / Ctrl + K）。
  2. 切换到 Plugins 标签页。
  3. 搜索 “Locofy”。
  4. 在结果列表中点击 Run。

插件面板会在文件内打开，此时它开始读取并处理你的设计。

第二步：连接账号

首次运行时，插件面板里会显示 Connect Account。点击后浏览器会打开一个新窗口，用你的 Locofy 账号登录，然后回到 Figma。插件随后显示为已连接状态，之后就可以对任意选中的 frame 或组件使用。

第三步：创建或选择项目

打开插件后会看到项目选择器。新建项目的流程是：点击 “Select project” 字段，点击 “Create new”，输入项目名称。接着需要做三项配置：

框架

平台可选框架
WebReact、Next.js、HTML/CSS、Gatsby、Vue、Angular
移动端Flutter、React Native、Swift、Jetpack Compose

UI 库

Web 项目可选 Material UI、Chakra UI、Ant Design、Bootstrap 等；移动端项目可选 React Native Kitten。选哪个取决于你现有技术栈，因为生成代码会直接引用该库的组件。

组件映射（可选）

如果 Web 项目里已经有现成的代码组件，可以把它们映射到对应的 Figma 组件上，这样生成的代码会复用你已有的实现，而不是重新生成一套。这一步可以跳过，后续再补。

第四步：转换第一个设计

Locofy 按选区工作，而不是整个文件。所以先选中要转换的部分：一个 frame，或界面中的某个具体区块，比如一个屏幕、一个导航栏、一个组件。选中后，在插件里点击 Convert to Code，这会启动 Lightning 流程，也就是自动转换过程。

一次最多可以选择 5 个设计进行转换。

Lightning 流程中，Locofy 会依次做这些事：

  • 分析布局结构，包括 frame、auto layout 和分组关系。
  • 应用响应式规则。如果 frame 命名保持一致，例如 Homepage - Desktop 与 Homepage - Mobile，它会识别出多个断点。
  • 检查缺失的自定义字体，并提示你从本机上传正确的字体文件。
  • 为元素打标签，识别按钮、输入框、图片等类型。
  • 检测可复用的组件。
  • 生成可直接用于代码的结构和预览。

流程结束后，插件内会出现实时预览以及生成的结构。后续如果设计有改动，可以用 Smart Regenerate Code Flow 检测 Figma 中的变化，只重新生成发生变化的部分，而不是整份重来。

第五步：用 Agent Mode 继续修改

Lightning 生成预览之后，可以用 Agent Mode 通过自然语言提示继续调整代码。它作用在 Lightning 产出的像素级代码之上，所以每次修改都建立在已有结构上，而不是推倒重来。实时预览会同步更新，方便你立刻用眼睛验证改动是否符合预期。

适合交给 Agent Mode 的几类任务：

  • 响应式：例如“在小屏幕上把这一行改成纵向排列，并保证触控目标至少 44px”。
  • 无障碍：例如“给这些只有图标的按钮补上合适的标签，并确保焦点顺序合理”。
  • 深色模式：例如“为这个屏幕加一套深色主题，背景与文字的对比度要可读”。

第六步：导出项目

生成和修改都满意之后，就可以把项目导出。Locofy 提供多种导出方式，取决于你想怎么使用代码。对大多数项目来说，推荐先走 Locofy Builder。

Locofy Builder 是一个暂存工作区，生成的项目在这里被组织、审阅并准备导出。适合在这些情况下使用：

  • 想先审阅和调整生成的屏幕与组件。
  • 需要在上生产环境之前有一个受控环境。
  • 需要配置框架和项目设置。
  • 需要和开发者一起协作处理生成的代码。

它之所以被当作默认流程，是因为在最终导出前给了你可见性和控制权。如果你更习惯命令行，Locofy 也提供 CLI；如果你习惯在编辑器里用 MCP，也有对应的接入方式。

一个完整示例

下面把上面的步骤串成一个最小可跑通的流程，假设你要把一个首页设计转成 React 项目。

  1. 在 Locofy 首页点击 Get Started，用 GitHub 账号注册并完成引导。
  2. 打开 Figma 中包含首页设计的文件，确认处在 Design Mode。
  3. 按 ⌘ / Ctrl + K 打开 Actions，切到 Plugins，搜索 Locofy 并点击 Run。
  4. 在插件面板点击 Connect Account，浏览器登录后回到 Figma，确认插件显示已连接。
  5. 点击 “Select project” → “Create new”，输入项目名，例如 marketing-site。
  6. 框架选 React，UI 库选 Material UI。如果已有现成组件，此时可以顺手做映射，没有就跳过。
  7. 在画布上选中首页的 frame。如果同时准备了桌面版和移动版两个 frame，且命名分别为 Homepage - Desktop 与 Homepage - Mobile，可以一起选中，但总数不超过 5 个。
  8. 点击 Convert to Code，等待 Lightning 流程完成。若弹出字体缺失提示，从本机上传对应字体文件后继续。
  9. 在插件内查看实时预览，确认结构符合预期。
  10. 打开 Agent Mode，输入一条提示，例如“在小屏幕上把顶部导航改成纵向堆叠，按钮触控区域不小于 44px”，观察预览更新。
  11. 进入 Locofy Builder，检查生成的屏幕与组件，确认框架与项目设置无误。
  12. 从 Builder 导出项目，把代码放进你的开发环境。

这条流程跑通之后，后续迭代可以改用 Smart Regenerate Code Flow：改完设计稿，只重新生成变化的部分，再重复第 10 到 12 步。

用量与账单

Locofy 的用量以 LDMtoken 计量。在 Locofy Dashboard 的 Plan and Usage 页面可以查看订阅、追踪 token 消耗并管理账单；也可以随时从侧边栏的 Your plan 下点击 View Plan & Usage 进入。

Plan Summary 区域显示当前套餐与订阅状态，包括到期时间。在这里可以点击 Upgrade Plan 升级，或点击套餐操作旁的三个点（⋯）管理订阅，例如取消套餐或更新支付方式。

LDMtoken 用量历史 表格按行记录 token 的消耗与增加，每行包含这些字段：

字段含义
Datetoken 被消耗或增加的日期
Description触发该次用量的动作，例如运行 Lightning 或提交一次 Agent Mode 提示；增加则可能来自订阅套餐
Team Member执行该动作的成员
Project用量所属的项目
Balance该次动作增加或扣除的 token 数，以及剩余余额

用这张表可以判断 token 花在了哪里，并监控剩余额度。页面下方还有 Billing History，用于查看历史发票与付款记录。

注意事项

  • 按选区转换：Locofy 处理的是你选中的 frame 或区块，不是整个文件。选错范围会得到不符合预期的结果。
  • 一次最多 5 个设计：批量选择时注意数量上限。
  • 断点依赖命名：多断点识别依赖 frame 命名的一致性，例如 Homepage - Desktop 与 Homepage - Mobile。命名随意会导致响应式规则无法正确套用。
  • 自定义字体需手动上传：Lightning 流程检测到缺失字体会中断并提示，需要你从本机提供字体文件。
  • 首次使用选 Design Mode：Dev Mode 编辑能力有限，首次转换放在 Design Mode 更合适。
  • Agent Mode 建立在 Lightning 结果之上：它是对已生成代码的修改，不能替代第一步的转换。
  • 套餐、token 额度与价格会变动：本文不列具体数字，请以 Locofy 官网当前信息为准。
返回