第一性原理：将设计意图收敛到一个对象中 -> 只存在一个 Source of Truth（SoT）。

已有的设计过程

理想的设计过程

设计阶段

组件设计

  1. 设计组件，业务组件基于已有的组件进行设计，已有的组件均可配置化 （ SoT 为代码）。
  2. 需要自定义的部分可以自定义设计，自定义设计来源 （SoT 为设计稿）。
  3. 任何参数和属性均可以被定义为 design-token，数值、颜色、圆角、描边等等各种样式；

页面设计

  1. 页面由若干个组件集合而成；
  2. 布局前期采用自动布局工具进行布局方法探索；布局后期采用 flexbox/css grid 进行规范化约束。

协作阶段

页面设计部分

  1. 可查看组件的配置化的信息（React 组件+ props 参数）；实现单个组件到代码的直出，类似 overlay 的效果；
  2. 可查看整个页面的代码信息（同上，包含组件和样式，以及相应的类型定义）

功能逻辑部分

  1. 可以查看页面路由关系，以节点编程式进行呈现；

以理想的设计过程为样本

会遇到的问题

  1. sketch 无法安全持久化组件信息（例如 Group 解组后就会丢失所有配置信息）；
  2. 如果基于生成组件进行了自定义，无法保证自定义部分的设计可以被准确还原（例如修改了table中的一部分内容，无法在外部可视化出来）；

上述问题的理想解法

  1. 每一个生成的组件均是一个组件（图层树中不包含子级）
  2. 针对需要自定义的部分，呈现一个slot，覆盖原有内容。（在图层树中显示一个slot 子级，slot 子级可以被认为是一个新的组件对象）