C2D 代码转设计稿是怎么实现的？

是怎么实现的？"/>

C2D 代码转设计稿是怎么实现的？

前面调研过 D2C，也就是设计稿转代码，它的原理是 figma、sketch 等插件可以拿到设计稿的数据，因为是矢量设计稿，所以存储的是一个 JSON，类似这样：

而且这个结构和网页的基础组件是能对应上的，也就能完成到网页的转换，然后通过不同的模版，打印成 React、Vue 等不同框架的代码。

不过很多设计稿的数据需要经过一些处理才能用，比如处理成合适的分组、计算出 flex / 绝对定位的布局、处理成语义化的 className、标注组件等：

D2C 在特定场景下还是很有意义的。

那 C2D 呢？

C2D 是代码转设计稿，举两个实际应用的案例：

semi design 是抖音开源的组件库，它支持主题的自定义，比如指定不同的主题色、字体大小、圆角尺寸等，而且提供了一个可视化的主题编辑器：

改了主题变量后可以直接预览：

再来试一个：

这样配置主题确实方便了很多。

但有个问题，antd 组件是有设计稿资源的，设计师可以用那些来设计页面，但是你这里改了主题之后，设计师那里用的设计稿是不是也得跟着改。

怎么办呢？

于是 semi design 就做了 C2D 功能，编辑完主题之后可以用这个来生成对应的 figma 设计稿资源。

还有一个场景，是之前调研 D2C 的时候，Locofy 提供的 figma 插件是能拖拽组件到设计稿里的，这也是 C2D，用代码生成设计稿：

至少这两种场景下是需要 C2D 的功能的。

那 semi design 是怎么实现这种 C2D 的呢？

这次调研的是 figma 插件里实现这个功能，所以去 figma 插件文档里找一下：

可以在插件文档里找到创建各种图形的 api，我们试一下：

比如 createRectangle:

createStar：

各种形状和图片都能画，这样不就能把组件库里的组件画出来么？

这个思路是可以，但是总不能手动用 api 画一遍吧，那肯定不靠谱。

如果设计稿中也支持组件，改了主题之后只要改下那个组件的参数就好了。

这个思路就对了，figma 还真支持组件功能。

figma 里的组件可以创建实例，当组件改动的时候所有它的实例都会跟着改，而且实例还可以传参数。

比如 semi design 的 figma 组件库里的 button 组件：

这参数是不是感觉网页的组件库没啥区别了？

能不能插件里直接引用这个 figma 组件库里的组件，传入不同的参数把它画到 figma 画布里呢？

可以的，插件有这个 api：

figma 插件提供了 importComponentByKey 的 api，可以从团队 figma 组件库（team library）中引入一个组件，

然后调用下 ComponentNode 的 createInstance 方法创建个实例：

设置下组件的参数：

然后就可以在 figma 设计稿中画出来了，这不就实现了 C2D 了么？

至于拖拽功能，figma 提供了对应的事件来处理，这部分可以看文档：

至此，如何实现 C2D 我们已经理清了。

其实做 C2D 还有第三种目的，就是为后续 D2C 服务，可以在生成的 figma 组件实例里加入一些标注信息，用于后面 D2C 的识别。

semi design 也是这样做的：

总结

D2C 是拿到设计稿的 json 经过一系列处理转成各种框架的代码，而 C2D 则是用代码把组件在设计稿中画出来。

C2D 的作用我们举了两个真实的案例：

• semi design 提供了主题编辑器，配置好新主题之后可以用 C2D 的能力生成对应的设计稿资源。

• Locofy 支持拖拽组件到设计稿中

基于 figma 的 C2D 的实现有两种思路

• 用 figma 提供的 api 来手动画，这个画点简单的还行，复杂的组件不靠谱

• 做一个和网页组件库对应的 figma 组件库，用 figma 的插件 api 从中引入组件，设置参数，然后加到 figma 画布里

第二种思路更靠谱一些，figma 的组件可以设置参数，和网页的组件很像了，用起来体验差不多。semi design 的 C2D 也是这么实现的。

做 C2D 其实更重要的目的是在设计稿中加入一些埋点信息，可以在后面拿到设计稿 json 做 D2C 的时候能够根据这些信息生成组件代码。

总之，C2D 的实现还是依赖设计师提供的和网页组件库对应的 figma 组件库，代码里只需要引入组件传入参数，然后在 figma 设计稿画出来就可以了，代码部分相比 D2C 是简单很多的。

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。