寫給設(shè)計(jì)師看的 Framer JS —— 制作原型前的準(zhǔn)備

  1. 本文所有圖文(除了網(wǎng)頁截圖)皆為原創(chuàng)城舞,版權(quán)完全歸我本人所有广凸。如有未經(jīng)允許的「任何部分或全部」的轉(zhuǎn)載、抄襲、盜用暖哨,全部默認(rèn)為:您已同意并接受給我本人 3 萬元。本文「發(fā)布」時(shí)間:2015 年 10 月 27 號(hào) 21:30凰狞。
  2. 本系列文章將直接從實(shí)踐角度出發(fā)篇裁,本著「寫完一篇文章再砍掉一半」的原則,不必要的解釋和說明沒有展開赡若。
  3. 閱讀前請(qǐng)精讀 Framer JS 官網(wǎng)的 Learn 并在閱讀中配合官方文檔實(shí)時(shí)查閱达布。
  4. 本系列文章將不定期連載,最終制作成電子書斩熊,名為《寫給設(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è)圖層相對(duì)于其所屬 Artboard 的坐標(biāo)定位(x, y)
  2. 當(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í)授霸,推薦以下流程:

  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ī)范(如右邊情境)捕捂,不僅讓操作(指向)變得簡(jiǎn)單瑟枫,而且有利于整理細(xì)分思路,形成良好的邏輯绞蹦。

Framer JS 基于 CoffeeScript力奋,CoffeeScript 三大件:

  1. Assign(賦值)
  2. Dot(點(diǎn))
  3. 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ì)是這樣:

導(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)常侣。

歡迎關(guān)注我的 dribbble:https://dribbble.com/Acmenyz

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蜡饵,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子胳施,更是在濱河造成了極大的恐慌溯祸,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舞肆,死亡現(xiàn)場(chǎng)離奇詭異焦辅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)椿胯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門筷登,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人哩盲,你說我怎么就攤上這事前方。” “怎么了廉油?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵惠险,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我娱两,道長(zhǎng)莺匠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任十兢,我火速辦了婚禮趣竣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘旱物。我一直安慰自己遥缕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布宵呛。 她就那樣靜靜地躺著单匣,像睡著了一般。 火紅的嫁衣襯著肌膚如雪宝穗。 梳的紋絲不亂的頭發(fā)上户秤,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音逮矛,去河邊找鬼鸡号。 笑死,一個(gè)胖子當(dāng)著我的面吹牛须鼎,可吹牛的內(nèi)容都是我干的鲸伴。 我是一名探鬼主播府蔗,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼汞窗!你這毒婦竟也來了姓赤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤仲吏,失蹤者是張志新(化名)和其女友劉穎不铆,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體裹唆,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡狂男,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了品腹。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡红碑,死狀恐怖舞吭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情析珊,我是刑警寧澤羡鸥,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站忠寻,受9級(jí)特大地震影響惧浴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜奕剃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一衷旅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧纵朋,春花似錦柿顶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至聂薪,卻和暖如春家乘,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背藏澳。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工仁锯, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人笆载。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓扑馁,卻偏偏與公主長(zhǎng)得像涯呻,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子腻要,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容