最前端｜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 会自动识别组件库中的组件, 并生成对应的代码

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

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

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

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