引言

在实际开展的项目里头，进行开发工作时，存在着需要反复去实现设计的情况，这样做很容易出现差错，而且维护所需要花费的成本也是比较高的。因此，“设计稿到代码”这么个状况向来是致使人们感到头疼不已的一个问题。

不论究竟是因排期太紧，还是这之间存在沟通上的偏差，反复返工以及还原程度大打折扣，竟然差不多变成了一直以来的常态现象。而且呢，还极有可能得去处理移动端适配方面的问题，还有响应式布局的情况，以及新增加出来的鸿蒙原生应用适配上的要求。要是代码生成工具弄出来的是一堆根本没法读懂的“一次性代码”，那倒不如自己手写呢。

诸多开发切实在意的“设计稿转代码”，并非可不可以“转”，而是“可维护性”，也就是所生成的代码要如同人所编写的，甚至比普通人编写的更为规范，下面就依据国内主流设计协作平台墨刀推出的——D2C设计转代码功能，瞧瞧它是怎样将设计稿转换为真正具备可维护性、高质量的代码的。

一、墨刀D2C到底是干什么的？

简而言之，D2C 即为 -to-Code，将视觉语言加以“翻译”从而转换为编程语言。它能够把 UI 设计稿直接转变为前端代码，且此代码具备可运行、可维护以及组件化的特性。并非以一种傻瓜式的方式把图片切碎后去拼凑 HTML，而是尝试去理解结构。它可以识别容器、文本、图片之间的逻辑关系。

除了像 HTML/CSS 这样的主流代码框架，以及 Vue、React 等，还有一个能让开发人员眼前一亮的，那便是对鸿蒙 ArkUI 的支持，这意味着在开发鸿蒙 App 的时候，能够直接把设计稿转化为 ArkUI 页面代码，从而节省大量的手工编码时间，降低出错风险，并且还能够保证风格统一。

现在有多支团队正从事鸿蒙原生应用的迁移工作，ArkUI的声明式语法尽管简洁，然而从零开始亲手书写布局依旧耗费时间。D2C能够直接生成契合鸿蒙规范的ets代码，对于那些需要迅速验证鸿蒙版UI的团队而言，这一步骤能够节省诸多基础布局的时间。如此一来，UI还原度的问题在代码生成阶段便得以解决，随后讨论的重点自然而然地回归到了业务上面。

二、3步实现设计稿转可用代码

采用 D2C 达成设计稿转代码这件事实际上是颇为简易的，其核心流程能够被归结为三步。

第一步：确认设计稿

这一步具备相当灵活性，可以直接于墨刀设计当中制作设计稿，要是你惯于运用其他设计软件，那么也能够导入诸如或Figma这样的设计文件，此处重点在于确保组件清晰，保证布局完整，保障交互明确，组件化设计越臻于完善，所生代码便越是易于维护。

第二步：进入开发者模式sketch ios ui design，选择 D2C

设置里有个关键点。设计稿定稿之后，在项目右上角，要打开“开发者模式→ D2C”。别急着直接复制，而是先去设置里选择目标代码。目标代码是Vue3吗？目标代码是React吗？目标代码是鸿蒙ArkUI吗？在这儿，要简单配置一些参数，像是组件库映射、样式选项等等，之后系统会解析设计稿，映射成对应的前端组件。

第三步：下载代码包，本地编辑器用

生成完完整代码之后，你能够去下载整个代码包，然后直接在本地编辑器当中打开它。在大多数的情形之下，代码是具备可运行性的，与此同时组件化结构清晰明了。要是存在需要针对复杂逻辑或者特殊交互予以微调的状况，同样能够在本地编辑器里面直接进行修改。如此这般，设计稿就摇身一变成为了可用且可维护的代码，而且迭代起来也十分便利。当设计进行更新之后，再次生成一遍便大功告成了。

三、产设研一体化协作的价值

D2C 不单单是代码生成工具，它还使得产设研协作变得更加高效，这是由于它嵌入在了一个协作平台当中。

1.所见即所得

先前交付之时，所给出的是一张标注图，而如今的交付情况呢，却是直接给上一套基础代码。设计师对间距作出了调整，D2C 生成的样式代码便会自动发生变化。前端人员无需再去拿着尺子测量“究竟是 10px 或者 12px”。

2.让开发回归逻辑

不停地写样式，反复调制 CSS，这可算得上是前端开发之中最为枯燥、极为耗时并且极易出现细微 BUG 的环节。将这部分工作交付给 D2C 工具，其生成的代码规范是统一的，变量命名、组件结构都能给你弄得清清楚楚，如此一来开发就能抽出精力去编写业务逻辑，去打造交互，去优化性能。

在产设研一体化的那个平台当中sketch ios ui design，从原型走向设计，再到开发的这样一个流程，变得越发顺畅了。身为设计师的人员能够直接目睹所生成的代码呈现出来的效果，而从事开发工作的人员也无需老是去费尽心思地琢磨设计方面的意图，不管是进行迭代还是交付，速度都能够快出许多。起码在交付这个环节的时候，设计与开发二者之间少掉了一层类似“翻译”的东西。D2C 这种模式同样使得设计、产品以及开发之间的协作变得更为紧密，让整个流程具备可追踪以及可维护的特性，进而减少重复的沟通以及返工的情况发生。

总结

东西作为工具，向来是为人服务的，不存在任何工具能达成让你“完全不写代码”的情况，墨刀D2C当下也绝对无法百分百完美取代人工精细调优，然而它却给出了一个极其高的“起跑线 ”。

尤其是针对那些想要以低成本试探性进行鸿蒙开发的团队，或者是被多端适配折腾得焦头烂额的团体而言，此项功能值得你去体验一番。它的运用流程极为直观，具体如下：先对设计稿进行整理，再利用 D2C 予以转换，接着在本地进行细微调整，最后进行协作迭代。在大多数情形下，将设计稿整理妥当后运行一次 D2C，随后在本地补充逻辑，便能够直接步入开发节奏当中，效率提高着实相当显著。

如有侵权请联系删除！