1. ?本系列文章將直接從實(shí)踐角度出發(fā)，本著「寫完一篇文章再砍掉一半」的原則，不必要的解釋和說明沒有展開。
2. 閱讀前請精讀 Framer JS 官網(wǎng)的 Learn 并在閱讀中配合官方文檔實(shí)時(shí)查閱。
3. 本系列文章將不定期連載，最終制作成電子書，名為《寫給設(shè)計(jì)師看的 Framer JS》

1. 不要上傳帶有 Artboard 的 Sketch 文件。

• Artboard 過大可能引起 bug（Framer 自身暫時(shí)的原因）
• Artboard 會(huì)天然限制畫幅范圍
• Artboard 會(huì)讓后天調(diào)整損失靈活性

具體解釋一下第二點(diǎn)原因，F(xiàn)ramer Studio 上傳 Sketch 文件的邏輯是：

1. 當(dāng)文件有 Artboard 時(shí)，會(huì)上傳所有 Artboard 的圖層并按照各個(gè)圖層相對于其所屬 Artboard 的坐標(biāo)定位（x, y）
2. 當(dāng)文件沒有 Artboard 時(shí)，會(huì)上傳文件所有圖層并按照其坐標(biāo)定位

需要注意的是：Framer Studio 只會(huì)上傳 Group 文件，Group 中的 Group 則會(huì)自動(dòng)分好父子級。
舉個(gè)例子：原型文件中有一個(gè) backgroundLayer，只是一個(gè)純色矩形。如果不為這個(gè)矩形 Group Layer 那么它就不會(huì)被上傳到 Framer Studio。

回到原因解釋上：Framer Studio 會(huì)將 Artboard 當(dāng)做 Mask，所有在 Artboard 之外的圖層都會(huì)被截?cái)唷?br /> 舉個(gè)例子：制作橫劃四頁的原型，若有 Artboard 則需將其寬度拉伸至四頁的寬度之和，否則就會(huì)截?cái)唷?/p>

這個(gè)例子也相應(yīng)的解釋了第三個(gè)原因，若后期想更改為橫劃五頁，那么不光要加頁，還要相應(yīng)的調(diào)整 Artboard 的寬度。

故，當(dāng)需要上傳文件時(shí)，推薦以下流程：

1. 將 Artboard 去除，選擇 Keep Layers
2. 全選所有圖層，Group All Layers
3. 將此 Group 的 xy 設(shè)為零
4. Ungroup Layers

2. 規(guī)范命名并有序管理 Groups。

• 減少操作（時(shí)間）成本
• 減少維護(hù)成本
• 形成良好邏輯思路
• 更加優(yōu)雅

先看一張圖：

規(guī)范命名 有序管理

Framer Studio 會(huì)自動(dòng)將圖層名中包含的空格轉(zhuǎn)換為下劃線，當(dāng)沒有遵從良好的命名規(guī)范時(shí)（如左邊情境），所需的精力和腦力顯而易見。

遵從良好的命名規(guī)范（如右邊情境），不僅讓操作（指向）變得簡單，而且有利于整理細(xì)分思路，形成良好的邏輯。

Framer JS 基于 CoffeeScript，CoffeeScript 三大件：

1. Assign（賦值）
2. Dot（點(diǎn)）
3. Indent（縮進(jìn)）

關(guān)于這些必要知識(shí)點(diǎn)，請移步 Melodie 寫于知乎的答案：Framer 如何入門？

3. 上傳后的準(zhǔn)備工作

• $
• Utils.globalLayers XXX
• Code Comments

對于大部分情況下，我們上傳的 Sketch 往往是特意為 Framer Studio 準(zhǔn)備的，所以，上傳完都會(huì)是這樣：

導(dǎo)入代碼

這個(gè)時(shí)候，如果需要指向圖層的話，需要輸入 untitled2Layers.XXXLayer，十分麻煩。我們需要為它起個(gè)盡量短的好名字，來減少不必要的輸入，此時(shí)就要祭出大殺器 —— $。美刀符號(hào)在 CoffeeScript 中是 international-friendly 的，不會(huì)影響到任何代碼，故，我們可以將第一行代碼改為：$ = Framer.Importer.load "imported/XXX"，這樣，指向圖層只需輸入 $.XXXLayer 即可。

但這樣依舊不夠優(yōu)雅，最理想的指向輸入應(yīng)該是只需輸入該圖層的名字即可。此時(shí)需要祭出第二個(gè)大殺器 —— Utils.globalLayers XXX。這一行代碼的意義就是拋棄一切指向前綴，直接指向所需圖層，至此，只需輸入 XXXLayer 即可指向該圖層。

此時(shí)又會(huì)遇到第二個(gè)尷尬的問題，每次上傳都需進(jìn)行以上的操作，這不夠有效率，所有的重復(fù)勞動(dòng)都有更好地解決辦法。Framer Studio tool bar 上的 Snippets 便是為此而生，通過 Snippets 我們可以自定義代碼片段，每次需要用到的時(shí)候，都可以直接粘貼到編輯器中，非常方便。

至此，使用 Framer Studio 制作原型的準(zhǔn)備工作已經(jīng)結(jié)束。下一篇文章，將講解基本的物理操作實(shí)現(xiàn)。

作者@Acmenyz ? ?來源@簡書

原文鏈接：http://www.jianshu.com/p/7be03bd8dde6