💡基础转换逻辑
了解基础的转换逻辑，可能对你使用 D2C 工具有帮助
Flex 布局还是绝对定位布局？
Figma to Code 转换结果中，只会有两种布局方式，Flex 布局和绝对定位布局。所以什么场景会对应什么布局呢？
- 当两个图层在同一层级，且出现图层相互遮挡时，此时会创建一个 Wrapper 容器，内部使用绝对定位布局。测试设计稿
- 当图层设置了 Auto Layout 时，会使用 Flex 布局。此时转换后 UI 具有一定的响应式能力。测试设计稿
- 其他情况下会默认使用 Flex 布局，此时会对子图层进行自动分组，从而应用 Flex 行布局和列布局。此时图层之间通过 margin 进行位置还原，因此不具备响应式效果。测试设计稿
如何自动分组？
当所有元素在同一层级时，默认会对图层自动进行分组后应用 Flex 布局，大致对元素分组的思路为：
- 首先判断子元素之间是否存在遮挡，如果是创建父容器
- 分别尝试对元素进行分组
水平方向存在交叠时，会按行分为一组；垂直方向存在交叠时，会按列分为一组；
- 按行分组，求分组元素数量的均值和方差
- 按列分组，求分组元素数量的均值和方差
- 根据均值和方差，判断按行还是按列分组，均值越小越好(分布越分散)，方差越小越好（分布越平均），如果最终按列分组，flex 布局方向为 'row'，如果最终按行分组，flex 布局方向为 'column'，同时分组内元素数量大于1的，自动创建父容器。
- 递归进行子图层的判断，进入步骤 1
哪些情况会转成图片？
当前共有四种情况会转译为图片：
- 当图层设置了 Export 时，该图层会被转译为图片；
- 当图层类型为 LineNode, VectorNode, StarNode, PolygonNode, BooleanOperationNode 时，该图层会被转译为图片；
- 当图层的所有子图层为 LineNode, VectorNode, StarNode, PolygonNode, BooleanOperationNode 时，该图层会整体转译为图片；
- 当图层被标记为 mask 时，所有在该图层之上的图层都会被转译为图片。
Class 名称是怎么确定的？
默认情况，会以图层名称作为 CSS class 来组织 CSS 样式，此时会对图层名称做如下改动：
- 中文名称会替换为图层类型名
- 太长的名称会进行截取前 20 个字符
- 重复图层名称会进行去重
- 不同图层名称样式相同时，会统一名称