中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

具體解釋一下第二點原因，Framer Studio 上傳 Sketch 文件的邏輯是：

1. 當文件有 Artboard 時，會上傳所有 Artboard 的圖層并按照各個圖層相對于其所屬 Artboard 的坐標定位（x, y）
2. 當文件沒有 Artboard 時，會上傳文件所有圖層并按照其坐標定位

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

回到原因解釋上：Framer Studio 會將 Artboard 當做 Mask，所有在 Artboard 之外的圖層都會被截斷。
舉個例子：制作橫劃四頁的原型，若有 Artboard 則需將其寬度拉伸至四頁的寬度之和，否則就會截斷。

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

故，當需要上傳文件時，推薦以下流程：

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

2. 規范命名并有序管理 Groups。

• 減少操作（時間）成本
• 減少維護成本
• 形成良好邏輯思路
• 更加優雅

先看一張圖：

規范命名 有序管理

Framer Studio 會自動將圖層名中包含的空格轉換為下劃線，當沒有遵從良好的命名規范時（如左邊情境），所需的精力和腦力顯而易見。

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

Framer JS 基于 CoffeeScript，CoffeeScript 三大件：

1. Assign（賦值）
2. Dot（點）
3. Indent（縮進）

關于這些必要知識點，請移步 Melodie 寫于知乎的答案：Framer 如何入門？

3. 上傳后的準備工作

• $
• Utils.globalLayers XXX
• Code Comments

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

導入代碼

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

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

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

至此，使用 Framer Studio 制作原型的準備工作已經結束。下一篇文章，將講解基本的物理操作實現。

作者@Acmenyz ? ?來源@簡書

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