設計師 學習 Framer 第二章:從 Sketch 到 Framer

Sketch

學習 Framer 系列來到第二章,本篇的教學,將著重在如何把 Sketch 裡面的檔案匯入到 Framer ,所以還沒有接觸過 Sketch 的朋友可以先花點時間弄懂它:)。

Sketch 是近年來每個 UI UX 設計師必學軟體之一,因為直覺又精簡的操作,受到大家的喜愛。

 

製作案例:Music Player

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

接下來,我們會試著做出一款音樂播放器的介面原型。選擇音樂播放器的原因是因為它的介面互動沒那麼複雜,大多都只是按鈕開關的切換邏輯,所以較適合初學者學習。

從 Framer 匯入 Sketch

步驟:

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

framer_part2_01

 

此時,會看到匯入選項的視窗,Framer 會自動判斷現在 Sketch 開啟的檔案,所以我們只要確認一下匯入的檔案是否正確。

要注意的是 “@1x” 這個選項(如下圖)。原則上 Framer 所使用的裝置大小都是以 “@2x” 為主,以 iPhone 6 來說,預設寬是 750 px,高為 1334 px。如果本來就是用 2x 數據下去設計的朋友,你匯入時選擇 “@1x” 就沒問題;用 1x 設計的話,則需要把選項改成 “@2x”。

framer_part2_02

 

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

framer_part2_03

 

Sketch 與 Framer 圖層結構

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

framer_part2_04

 

要特別注意的是,所有的物件在 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”

 

framer_part2_05

 

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

 

事件 Event

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

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

framer_part2_06

 

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

點擊下方 heartBtn 後(白色線條愛心 icon)
亮起 heartBtnActive(充滿綠色的愛心 icon)
隱藏 heartBtn(白色線條愛心 icon)

 

然後開始翻譯成英文版 …

Tap on heartBtn
show heartBtnActive
hide heartBtn

 

最後轉成程式語言版本

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

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』

framer_part2_07

 

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

framer_part2_08

 

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

 

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

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

最後,大家不仿作個小練習,把點擊 Event 也加到其他兩個按鈕: loopBtn 及 shuffleBtn 吧!在 下一章 將會分享 States 以及 Animation。也歡迎大家多來 Framer JS Taiwan 社團討論喔!

 

衍伸閱讀

本文章已獲得作者 Chris Chen 授權,原文:從設計師角度學習 Framer Part 2:從 Sketch 到 Framer

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter