最前端｜Locofy试用报告：设计稿直接转换为代码

目录

一、调研目的

二、调研报告设计

三、调研报告

（一）操作步骤

（二）结果初见

(三）初步结论

四、总结

五、补充

---

一、调研目的

初步调研的目标：

• locofy 的 实操流程
• locofy 涉及到的相关工作角色及其职责的变化
• locofy 能干什么以及不能干什么
• locofy 到底能带来多少效率提升

提示：
Frontend development accelerated with AI Turndesignsintofrontend codefor web & mobile. Buildfull apps,screens,components&design systems! Ship products 10x faster with your existing design tools, libraries, tech stack & CI/CD workflows
这段文字摘自 locofy 官网, 简单来讲 locofy 是一个设计器插件，它可以将设计文档直接转换成前端的代码, 从而提高交付效率

二、调研报告设计

首先我选一个经典的网页设计稿Easybank landing page

接下来我利用 locofy 将这个设计稿转换成代码

基于转换后的代码, 我会对比其与知名 IT 博主写的fem-easybank 源代码, 分析他们的区别在哪里

最后针对本次调研目标, 我会给出我的初步结论

三、调研报告

首先我强烈建议你先看看这个 locofy 官方视频, 这个视频会让你对 locofy 有一个大致的了解：

【Locofy.ai Recorded Demo】 Locofy.ai Recorded Demo_哔哩哔哩_bilibili

（一）操作步骤

//启动插件

这个步骤是将 locofy 插件安装到你的设计器里面, 这里我选择的是 figma

• 在设计稿中使用 locofy 插件, 启动插件面板
• 在 Easybank 案例里面有 3 个 Page, 我选择的是Page Set
• 在 Easybank 案例里面有 3 个 Frame 我选择的是Desktop

//步骤一：优化设计 Optimise Design

这个步骤是代码转换前的预处理, 将 Figma 稿件中不必要的元数据去掉 例如group

这里 locofy 提供了 3 个子优化步骤, 这里我尽可能选择默认的选项, 减少人工的干预

• 优化 设计结构Fix Design Structure
• 自动布局Auto Layout
• 适应不同屏幕大小handle different screen sizes

//步骤二：打标签 Tag interactive elements / Tag your layers

这个步骤是为了告诉 locofy 哪些元素是可以交互的, 例如buttoninput等等

• 手动打标签
• 自动打标签Auto Tag

同样的, 这里我选择自动, 但是实际上你依然需要针对每个标签进行手动确认

//步骤三：编辑样式与布局 Edit Style and Layout

这一步暂时省略

//步骤四：增加动作 Add Actions

这一步暂时省略

//步骤五：生成代码 Sync to Locofy Builder

这个步骤是生成代码并同步到 locofy 的代码编辑器里面

• 这里用的是NextJS框架
• 样式架构 是 CSS In Module
• 识别组件

//步骤六：同步项目 Sync Project

这个步骤是把 locofy 的代码同步到你的项目里面 这里支持Github

• 同步到 我的仓库locofy-demo在新窗口打开
• clone 这个仓库到本地

◆安装依赖包

◆启动

◇解决了一个CSSProperties无法变异的问题

propWidth?: CSSProperties["width"]; // 修改前 
propWidth?: React.CSSProperties["width"]; // 修改后

（二）结果初见

令人期待的结果来了

(三）初步结论

1、locofy 的实操流程

• 整个流程本质上就是在给人工智能打标签做转换
• 打标签的过程目前还需要人工干预和确认

2、locofy 涉及到的相关工作角色及其职责的变化

• 设计师的产出物需要更加规范化, 以便于 locofy 自动识别
• 前端工程师需要熟悉 locofy 的代码生成规则, 才能充分发挥 locofy 的自动化能力

3、locofy 能干什么以及不能干什么

能：

• 自动识别设计稿中的元素, 并生成对应的代码
• 自动纠正设计稿中的元素, 使其符合 locofy 的代码生成规则
• 自动识别源代码中的组件, 避免生产代码的重复

不能：

• 它是效率工具, 不是代替人工的工具

4、locofy 到底能带来多少效率提升

• 从默认的实现效果来看如果不给予足够的人工干预, locofy 生成的代码是无法直接投入生产
  
  ◇ 目前看, 主要问题是响应式, 定位的问题，这些问题都需要人工干预, 但是我相信如果工程师熟悉掌握后, 带来的效率提升是非常可观的

• 从生成的代码来看, locofy 生成的代码是规范和直观的, 方便工程师理解和维护
  
  ◇ 代码风格肯定和纯人工编写的代码有差异, 简洁直观死板而有失优雅, 但是方便维护
  
  ◇ AI 提供了组件识别 这样可以避免重复代码
  
  ◇ 数据处理代码部分还没有看到官方的方案, 目前来看要人工完成

四、总结

传统开发, 低代码, 人工智能，他们三者都会在未来的应用研发领域各自占据一部分市场。

• 低代码面向的是非专业开发人员, 他们可以通过低代码平台快速的搭建出一个应用，但是一旦涉及到定制化的需求, 低代码平台就会显得力不从心；
• 人工智能面向的是专业开发人员, 它是效率工具, 但是效率的高低取决于工程师的熟练程度；
• 传统开发我认为在未来的一段时间内, 仍然是主流, 但是随着人工智能的发展, 传统开发的效率会被人工智能逐渐超越, 这是必然的趋势
  
  ◇ 这就好比发生在飞机驾驶舱中的变化, 过去我们看到飞机驾驶舱里面有很多的仪表, 需要飞行员去操作, 但是现在的飞机驾驶舱里面的仪表越来越少, 因为飞行员的工作已经被自动驾驶系统取代了。

五、补充

在本周的调研最后, 我浏览了文档所有章节, 其中UI Libraries & Design System吸引了我的注意, 尤其是Bring your own storybook components这一节

简单来说在 figma 中, 你可以导入你的组件库, 设计师可以直接把组件库里面的组件拖拽到设计稿中, locofy 会自动识别组件库中的组件, 并生成对应的代码

这可以说是杀手锏, 现在我最想探索的就剩下如何处理数据状态了

作者：范轶洁| 资深前端开发工程师

版权声明:本文由神州数码云基地团队整理撰写，若转载请注明出处。

公众号搜索神州数码云基地，了解更多技术干货。