百度 &YY 设计稿转代码的探索与实践
作者 | KyrieChen
导读
本文阐述了百度 &YY 互动团队在设计稿转代码方面的实践与沉淀，自研的 YYF2C 是 Figma & AI 相结合生成开发代码的一站式解决方案。文章将从遇到的痛点以及对应的方案成果来阐述，并介绍相对应的 YYF2C 功能点。
全文 3731 字，预计阅读时间 12 分钟。
01 背景
业务部门存在着大量的活动、后台等类型的需求。随着这些需求量日益上涨，对开发、验收与交付的效率提出了新的要求。为了应对当前痛点，我们着手与设计工具结合，借助设计工具生态的开放性来解决痛点。公司设计工具主要为 Figma，因此，我们致力于建立一套基于 Figma 设计工具的设计标准，并打造一个能够将设计稿转化为代码的生态系统。通过一年多的建设，公司内部大量的案例实践和洗礼，YYF2C 生态应运而生。
02 YYF2C
YYF2C 是什么？
YYF2C 是一个 Figma & AI 相结合生成开发代码的一站式解决方案。
YYF2C 有什么？
在 YYF2C 生态中，有Figma插件、Chrome插件、f2c-server，VSCode插件等。其中相关的功能有：静态代码生成、轻逻辑的支持、跨平台的代码输出和定制（DSL 平台）、图层标记关联组件、产物 SaaS 服务、替代 Figma Dev Mode 的图层查看、一键切图上传、变量扩展与导出等一系列功能。
03 静态代码
它的作用主要是还原 Figma 设计稿中静态部分，生成相对应的代码。例如设计稿中的静态的规则、表格、介绍等。这块内容也是我们第一个攻克的难点。在自研之前，我们也调研过市面上的产品，尝试以最小的成本实现我们的目的。但调研后发现，现有产品的还原度都达不到我们的需要，无法落地到我们日常需求开发中。具体在于还原度较低，需要进行大量修改。于是，自研成为了我们唯一的选择。YYF2C 在静态代码的还原度上，能满足我们日常需求中对其要求。在高还原度的加持下，使得使用者利用 YYF2C 转换出来的代码很少需要进行大量的手动调整，许多时候甚至不需要调整。这里举几个例子，分别是图层、特效、文本层面与市面上产品之间的对比。
△图层
上图是 YYF2C 对于多图层结构的还原结果，需要说明的是我们并不是一张图片直接输出，而是最大程度根据设计师的图层结构，进行合理的分析和排布得出的结果。通过与国内外主流工具的对比发现，YYF2C 在多图层还原度方面是做的比较好的。其它工具均出现了或多或少的问题，例如透明度的处理不当、图层的结构混乱、字体颜色的缺失、阴影无法兼容等问题。
△线性渐变
上图是 YYF2C 对于线性渐变的还原结果，我们能看到 YYF2C 是相对较好的。由于 Figma 对于渐变的描述是一个矩阵，我们需要分析矩阵并利用线性代数的知识将分析出渐变的角度、渐变的颜色、渐变颜色的起始位置。有趣的是，Dev Mode 作为 Figma 官方的功能，其对于线性渐变的还原度也不尽如人意。
△文本
上图是 YYF2C 对于文本的还原结果。可以看到对于文本间距和段落间距，YYF2C 的处理是相对较好的。其它工具或多或少出现了间距丢失以及间距过大的问题。
当然，还原度高也不代表能 100%还原成代码，这里涉及到很多 Figma 渲染和浏览器渲染的差异问题，这部分也在持续的迭代和优化。这部分内容由于篇幅的原因再次不做赘述，有兴趣的小伙伴可以关注【百度 Geek 说】留意后续技术文章。
04 AI 赋能语义化
通过 YYF2C 还原出来的静态代码默认情况下会出现类名语义化较差的问题，这一开始给用户在二次修改过程中造成了不小困扰。于是我们结合了 AI 的能力助力了代码优化，解决了代码可读性的问题。
05 轻逻辑代码
在完成静态部分的还原转码后就能够解决一部分问题。但是一个需求中静态部分的内容的占比是有限的，对于日常需求常见的都会有一些逻辑，例如按钮的点击、文本的动态生成、列表的动态展示，甚至是模块划分和父子组件的生成等。我们将上述部分称之为轻逻辑。如何更好的使用 YYF2C 静态还原带来的便利性，与轻逻辑相结合，成为了我们要考虑的问题。于是，我们提出了一系列高阶用法，这些高阶用法需要用户对制定图层附上标签（Layer Tag），标签能让 YY F2C 知道该图层需要调用什么轻逻辑的能力。标签目前有：
bg：
背景标签，主要用来表示该图层可以直接视作背景或图片，将以 png 格式的图片导出。用于解决复杂特效图层，减少分析成本。
var：
打上该标签的图层会在生成阶段为图层创建 React 组件的属性（Properties），使该图层（JSX 片段）拥有二次开发的能力。
列表 list 与 item：
list 和 item 标签主要用来处理列表中组件重复的使用场景。使用 list 标识列表的父组件，item 标识列表中需要抽象出来的子组件。
subComp：
该标签会将标识的图层下的所有图层作为子组件，更好的进行代码拆分。
slot：
slot 标签标识过的节点 slot-name，会在生成阶段创建 4 个属性 nameSlot、nameCss、nameProp、nameText，默认使用一张背景图片做占位，nameSlot 作为组件替换插槽位置。
module：
module 标签的用法与 subComp 一致，唯一的不同是 module 会将子组件抽取到单独的目录。
tab 相关的 tabList、tabPanel、tabSlider：
tabs 是一组标签组，用于标记类选项卡组件的界面，tabs 包含三种标签：
tabList 用于标识可以点击切换节点的父容器；
tabPanel 用于标记要切换内容的 panel 节点；
tabSlider 可选标记，用于标记的滑块节点。
下面快速介绍一下 tag 标识如何使用以及使用的效果，具体使用可以参考官网文档。
06 组件标记
对于成熟的业务组来说，有许多功能早就以组件的形式沉淀。对于一个常用的功能，在有组件可用的情况下，不可能使用 YYF2C 重新生成。并且对于组件样式参数在设计稿上获取和传递，成为了制约我们的开发效率。于是如何与先有组件结合，甚至与设计组件结合，成为了我们要面对的问题。
以下是 F2C 组件标记原理的简单示意图：
通过组件标记，我们目前实现了手 Y 的 RN 组件库、百轲管理后台组件库以及多业务活动组件的代码生成，极大扩展了 F2C 的使用场景。
07 多语言（DSL）
DSL(Domain-specific language)的全程是领域特定语言。在 F2C 转码过程中，我们把设计语言通过转换器实现转译为特定代码语言这个过程中的转换器实现，简称为 DSL。
F2C 通过 DSL 包开发和独立部署解决不同语言代码生成的开发问题。
F2C 通过 DSL 包与 Figma 插件约定数据规范，实现了不同 DSL 在 Figma 插件中定制 GUI 和转码行为的能力。
08 SAAS 服务
公司内部有许多低代码平台，本质是运用沉淀组件更好更快的迭代产品的需求。与组件一样，样式参数在设计稿上获取和传递，依旧比较繁琐。YYF2C 可以快递高效的获取到组件的样式参数，那如何与低代码平台结合，成为了我们要面对的问题。
为此我们搭建了基于 YYF2C 产物的 SAAS 服务（暂时对内），他的作用是将 YYF2C 生成的产物，包括：设计稿源代码、组件标记获取到的组件属性以及相关的资源图，上传至服务器并标识该次上传。用户若想使用这次上传的内容，则可以通过对外接口以及上传标识获取到产物，将产物作用于自身平台。
目前公司内部已经有多个业务接入该服务，其中不乏接入后业务产品运营可以直接通过低代码平台完成设计稿并自动上线的案例，对于接入方整体的提效约有 15%左右。
09 替代 Dev Mode
从 2024 年开始，Figma 的 Dev Mode 开始收费。这让我们使用者获取图层标注信息的便利性大大下降，对此社区有很多通过 window.figma 接口获取信息的 chrome 插件供我们使用。但是 2024 年 3 月 19 日开始，Figma 移除了 view-only 模式下的 window.figma 接口，这彻底堵死了用户在 view-only 模式下获取图层标注的能力（截止编写该文时 Figma 官方答应会加回接口，但是时间未定）。
为了降低此事对公司内部开发者的影响。我们在 YY F2C Figma 插件 v2 版本添加了图层查看功能。
并且推出 Chrome 插件，以应对 view-only 模式下的问题。
△chrome 插件
两者不同之处在于，图层查看功能需要用户有编辑权限，展示的内容更为丰富。Chrome 插件不需要用户有编辑权限，展示的内容则较为简单。通过这两个工具的加持，我们能基本将 Dev Mode 收费带来便利性下降的影响降到最低。
10 未来
AI：目前 YY F2C 对 AI 的使用局限于语义化，如今市面上已经有许多大模型 AI 实现了图片转代码功能，并且也有很多产品能直接优化我们的代码。这也许为我们指明了一个方向。
多平台：目前公司内部主要以 Figma 设计工具为主，但是市面上诸如 MasterGo、即时设计等产品也有许多人在使用。那么对于这些用户，我们后续会考虑兼容其插件生态体系。为更多用户提供能力。
持续优化功能模块：提高还原度、提升 DSL 接入便利性、开放自定义图片上传、开放自定义产物上传、拥抱和吸纳更多建议和意见。
和更多团队伙伴合作：在团队内部，YY F2C 已经落地了多个项目，目前正在和更多团队伙伴合作，希望 YY F2C 能够成为更多团队的标配。
如何获得 F2C：
Figma F2C 插件：
https://www.figma.com/community/plugin/1248187540929489451/yy-f2c
Chrome 插件：
https://chromewebstore.google.com/detail/figma-node-inspect/gmcgpjgoiidajfjhdooaajaeonnmikfc
F2C VSCode 插件：
https://marketplace.visualstudio.com/items?itemName=ron0115.f2c-vscode
F2C 官网：
视频教程：
如何和我们交流：
github：https://github.com/yylive/F2C/issues
点击此处查看原文，欢迎大家沟通、交流。
—————— END——————
推荐阅读：
Baidu Comate帮开发者“代码搬砖”，2天搞定原先3周工作量
百度官方技术账号 2021-01-22 加入
关注我们，带你了解更多百度技术干货。
评论