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

Chris Chen

Published in

Framer Taiwan

8 min readJun 7, 2016

Sketch

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

Sketch：https://www.sketchapp.com

製作案例：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 後
亮起 heartBtnActive
隱藏 heartBtn

然後開始翻譯成英文版…

Tap on heartBtn 
show heartBtnActive
hide heartBtn

最後轉成程式語言版本

sketch.heartBtn.onTap ->        #點擊下方 heartBtn 後  
￢sketch.heartBtnActive.visible = true  #亮起 heartBtnActive
￢sketch.heartBtn.visible = false       #隱藏 heartburn

sketch.heartBtn.onTap ->    #點擊下方 heartBtn

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

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

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

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

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