Framer X 已经发布好几个月了,相较于之前的 Framer Studio,X 不再分为设计模式和代码模式了,而是提供了「设计组件」和「代码组件」。「设计组件」和 Figma 的组件、Sketch 的 Symbol 大同小异,而代码组件则是完全使用代码编写的组件。同时,X 也摒弃了过时的 Coffeescript,而采用时下火热的 React。

代码组件,顾名思义是使用代码编写的,而不是通过拖拽图形组合而成的。X 的代码组件很特别的一点是可以自定义它的哪些属性可以调节,就像你在右侧设置一个矩形的背景色、圆角一样,你可以在右侧调整一个组件的自定义属性。

今天,我将通过一个简单的评论组件来介绍在 X 中如何使用代码编写组件。