- 本文所有圖文(除了網(wǎng)頁截圖)皆為原創(chuàng)城舞,版權(quán)完全歸我本人所有广凸。如有未經(jīng)允許的「任何部分或全部」的轉(zhuǎn)載、抄襲、盜用暖哨,全部默認(rèn)為:您已同意并接受給我本人 3 萬元。本文「發(fā)布」時(shí)間:2015 年 10 月 27 號(hào) 21:30凰狞。
- 本系列文章將直接從實(shí)踐角度出發(fā)篇裁,本著「寫完一篇文章再砍掉一半」的原則,不必要的解釋和說明沒有展開赡若。
- 閱讀前請(qǐng)精讀 Framer JS 官網(wǎng)的 Learn 并在閱讀中配合官方文檔實(shí)時(shí)查閱达布。
- 本系列文章將不定期連載,最終制作成電子書斩熊,名為《寫給設(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 文件的邏輯是:
- 當(dāng)文件有 Artboard 時(shí)粉渠,會(huì)上傳所有 Artboard 的圖層并按照各個(gè)圖層相對(duì)于其所屬 Artboard 的坐標(biāo)定位(x, y)
- 當(dāng)文件沒有 Artboard 時(shí)分冈,會(huì)上傳文件所有圖層并按照其坐標(biāo)定位
需要注意的是:Framer Studio 只會(huì)上傳 Group 文件,Group 中的 Group 則會(huì)自動(dòng)分好父子級(jí)霸株。
舉個(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í)授霸,推薦以下流程:
- 將 Artboard 去除巡验,選擇 Keep Layers
- 全選所有圖層,Group All Layers
- 將此 Group 的 xy 設(shè)為零
- Ungroup Layers
2. 規(guī)范命名并有序管理 Groups碘耳。
- 減少操作(時(shí)間)成本
- 減少維護(hù)成本
- 形成良好邏輯思路
- 更加優(yōu)雅
先看一張圖:
Framer Studio 會(huì)自動(dòng)將圖層名中包含的空格轉(zhuǎn)換為下劃線显设,當(dāng)沒有遵從良好的命名規(guī)范時(shí)(如左邊情境),所需的精力和腦力顯而易見辛辨。
遵從良好的命名規(guī)范(如右邊情境)捕捂,不僅讓操作(指向)變得簡(jiǎn)單瑟枫,而且有利于整理細(xì)分思路,形成良好的邏輯绞蹦。
Framer JS 基于 CoffeeScript力奋,CoffeeScript 三大件:
- Assign(賦值)
- Dot(點(diǎn))
- Indent(縮進(jìn))
關(guān)于這些必要知識(shí)點(diǎn),請(qǐng)移步 Melodie 寫于知乎的答案:Framer 如何入門幽七?
3. 上傳后的準(zhǔn)備工作
- $
- Utils.globalLayers XXX
- Code Comments
對(duì)于大部分情況下,我們上傳的 Sketch 往往是特意為 Framer Studio 準(zhǔn)備的溅呢,所以澡屡,上傳完都會(huì)是這樣:
這個(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)常侣。
歡迎關(guān)注我的 dribbble:https://dribbble.com/Acmenyz