從設計師角度學習 Framer Part 2:從 Sketch 到 Framer

Sketch

Sketch 是近年來每個 UI UX 設計師必學軟體之一。因為直覺又精簡的操作,受到大家的喜愛。接下來的教學,將著重在如何把 Sketch 裡面的檔案匯入到 Framer。 所以還沒有接觸過 Sketch 的朋友可以先花點時間弄懂它:)

Sketch:https://www.sketchapp.com

製作案例:Music Player

教學範例檔案下載: Music Player Sketch

在接下來的製作,我們會試著做出一款音樂播放器的介面原型。選擇音樂播放器的原因是,因為他的介面互動沒有那麼複雜,大多數都只是一些按鈕開關的切換邏輯,所以對於初次接觸的朋友比較容易上手。

從 Framer 匯入 Sketch 製作檔案

步驟:

  1. 在 Sketch 開啟你想要的檔案
  2. 在 Sketch 切換到你想要匯入的頁面 (page)
  3. 開啟 Framer,並點擊 Framer 左上角的 Import 的選項

此時會看到匯入選項的視窗,這邊 Framer 會自動判斷現在 Sketch 開啟的檔案,所以我們可以確認一下要匯入的檔案無誤。

要注意的是 “@1x” 這個選項。原則上 Framer 所使用的裝置大小都是以 “@2x” 為主,以 iPhone 6 來說的話,他預設的寬是 750 px,高則是 1334 px。

如果本來就是用 2x 數據下去設計的朋友,你匯入時選擇 “@1x” 就沒問題。用 1x 設計的話,則需要把選項改成 “@2x”。

最後讓我們點下 『 Import 』,就會看到 Framer 出現 Sketch 所設計的檔案囉!

Sketch 與 Framer 圖層結構

匯入之後,你會在中間區塊,看到與 Sketch 裡面一模一樣的圖層結構,命名也都相同。如果圖層本身是隱藏的話,Framer 也會自動隱藏該圖層。

要注意的是,所有的物件在 Sketch 裡,都必須是一個群組。如果不是的話,Framer 是不會顯示該物件的!

最好的話,每個群組的命名都是獨一無二的,這對顯示不會影響,但是對後面的 Coding 的部分,會導致系統無法判斷要對哪個圖層進行執行動作。

小技巧: 假使 Sketch 檔案裡,某個 Icon 群組裡面,又有一堆的群組,但你並不想要在 Framer 裡面看到多餘的部分,你可以在 Sketch 的 Icon 群組的命名結尾加上 "*",進到 Framer 後,他就會平面化你的圖層。 Eg. heartIcon*
第一行程式碼
sketch = Framer.Importer.load(“imported/musicPlayer@1x”)
翻譯:創造一個物件叫 "sketch",使用 Framer 的匯入器 (Importer) 的讀取功能 (load),指派 "imported/musicPlayer@1x" 資料夾裡面的檔案到該物件裡面。

首先,我們在左邊會看到這一行程式碼,如果真的要完全懂他在做什麼話,勢必要解釋很多工程的術語,現在我們就把它當成,這是一個從 Sketch 匯入進來的物件,而這個物件名稱就叫 “sketch”!而在這物件裡面,含有可以控制的圖層物件們 (Layers)。

圖層 Layer

原則上,從 sketch 匯入進來的圖層,都會被 Framer 轉成圖片,即使是文字也一樣,他們也自動會被創建成 Layer 物件。因此任何 Layer 物件的屬性,像是XYZ、大小、透明度等等,我們都可透過程式去控制或更改。

當然除了從 Sketch 匯入之外,也可以直接在 Framer 創建 Layer ,但因為教學關係,我暫時不多做講解,如果想要進一步更加了解 Layer 這個物件,可以到官方的 Doc/#Layer 查詢喔。

讓我們打上第一行程式碼吧!

sketch.playBtn.y = 930
翻譯:把 "sketch" 物件裡面的 "playBtn" 物件的 "y" 設定成 "930"

輸入後,就可以看到原本 playBtn 的 Y 變動了! 它移動到 930 的位置了!沒有錯,所有在 Framer 執行的動作,都是所見即所得!某種程度可以很快速的產出一些 A/B 測試的排版。

事件 Event

Framer 上的互動都是來自於事件(Events)的觸發,常聽到的手勢 Tap、Pinch、 Long Press、Swipe 都是觸發事件的方式。想知道 Framer 支援哪些手勢的話,可以到 Doc/#Events 看喔。

現在就讓我們設計一個簡單的點擊互動!

我習慣先用白話的方式,把想要的互動,有邏輯性寫下或放在腦海中。

點擊下方 heartBtn 後
亮起 heartBtnActive
隱藏 heartBtn

然後開始翻譯成英文版…

Tap on heartBtn 
show heartBtnActive
hide heartBtn

最後轉成程式語言版本

sketch.heartBtn.on Events.Tap, ->        #點擊下方 heartBtn 後  
sketch.heartBtnActive.visible = true #亮起 heartBtnActive
sketch.heartBtn.visible = false #隱藏 heartburn

sketch.heartBtn.on Events.Tap, ->    #點擊下方 heartBtn

第一行是讓 heartBtn 圖層,一直監聽是否有使用者點擊該圖層 (.onTap),如果有的話,就執行箭頭下的內容。如果希望改成監聽 Double Tap 事件的話,就只要把 onTap 變成 onDoubleTap 就好,以此類推。

sketch.heartBtnActive.visible = true  #亮起 heartBtnActive
sketch.heartBtn.visible = false #隱藏 heartBtn

接下來的兩行,一個是把 heartBtnActive 這個圖層的可見度 (visible) 開啟,接下來把 heartBtn 的可見度關掉。

當圖層的可見度被關掉時,該圖層所有的 Events 都不會被驅動,就像在繪圖軟體,我們把圖層藏起來,也點選不到是一樣的道理。因此我們可以利用這點,再多一個相反的邏輯。

sketch.heartBtnActive.on Events.Tap, ->    #點擊下方 heartBtnActive 後  
sketch.heartBtn.visible = true #亮起 heartBtn
sketch.heartBtnActive.visible = false #隱藏 heartBtnActive

AutoCode

在最新版的 Framer,加入了 AutoCode 的功能。這個功能就是為了降低設計師學習 Coding 門檻而設計的,只需要用滑鼠點一點,自動產生你想要的互動的程式碼。

以上面的案例來說,點擊左上角的 『insert』

然後移動到 Event ,所有圖層會被列出來,選擇 heartBtn ,然後選擇 Tap

sketch.heartBtn.onTap (event, layer) ->

自動產生的程式碼會出現在最後一行,雖然寫法略有不同,但其實是在做一樣的事情

Framer Project 檔案:http://share.framerjs.com/7lhni8y8hf5n/


最後,大家不仿作個小練習,把點擊 Event 也加到其他兩個按鈕, loopBtn 以及 shuffleBtn 吧!在下一章, 將會分享 States 以及 Animation :)