Sketch
學習 Framer 系列來到第二章，本篇的教學，將著重在如何把 Sketch 裡面的檔案匯入到 Framer ，所以還沒有接觸過 Sketch 的朋友可以先花點時間弄懂它：）。
Sketch 是近年來每個 UI UX 設計師必學軟體之一，因為直覺又精簡的操作，受到大家的喜愛。
製作案例：Music Player
教學範例檔案下載： Music Player Sketch
接下來，我們會試著做出一款音樂播放器的介面原型。選擇音樂播放器的原因是因為它的介面互動沒那麼複雜，大多都只是按鈕開關的切換邏輯，所以較適合初學者學習。
從 Framer 匯入 Sketch
步驟：
- 在 Sketch 上開啟檔案
- 在 Sketch 上切換到你想要匯入的頁面（page）
- 開啟 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 物件的屬性，像是ＸＹＺ、大小、透明度等等，我們都可透過程式去控制或更改。
當然除了從 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 後（白色線條愛心 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 #隱藏 heartBtnsketch.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。也歡迎大家多來 Framer JS Taiwan 社團討論喔！
衍伸閱讀
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
