本系列文章将直接从实践角度出发，本着「写完一篇文章再砍掉一半」的原则，不必要的解释和说明没有展开。阅读前请精读 Framer JS 官网的 Learn 并在阅读中配合官方文档实时查阅。本系列文章将不定期连载，最终制作成电子书，名为《写给设计师看的 Framer JS》
1. 不要上传带有 Artboard 的 Sketch 文件。Artboard 过大可能引起 bug（Framer 自身暂时的原因）Artboard 会天然限制画幅范围Artboard 会让后天调整损失灵活性

具体解释一下第二点原因，Framer Studio 上传 Sketch 文件的逻辑是：

    当文件有 Artboard 时，会上传所有 Artboard 的图层并按照各个图层相对于其所属 Artboard 的坐标定位（x, y）当文件没有 Artboard 时，会上传文件所有图层并按照其坐标定位

需要注意的是：Framer Studio 只会上传 Group 文件，Group 中的 Group 则会自动分好父子级。
举个例子：原型文件中有一个 backgroundLayer，只是一个纯色矩形。如果不为这个矩形 Group Layer 那么它就不会被上传到 Framer Studio。

回到原因解释上：Framer Studio 会将 Artboard 当做 Mask，所有在 Artboard 之外的图层都会被截断。
举个例子：制作横划四页的原型，若有 Artboard 则需将其宽度拉伸至四页的宽度之和，否则就会截断。

这个例子也相应的解释了第三个原因，若后期想更改为横划五页，那么不光要加页，还要相应的调整 Artboard 的宽度。

故，当需要上传文件时，推荐以下流程：

    将 Artboard 去除，选择 Keep Layers全选所有图层，Group All Layers将此 Group 的 xy 设为零Ungroup Layers
2. 规范命名并有序管理 Groups。减少操作（时间）成本减少维护成本形成良好逻辑思路更加优雅

先看一张图：

规范命名 有序管理