原文：blog.framer.com/framer-tuto…
作者：Wojciech Dobry
翻譯：Jun
看下面這兩個很 cool 的原型，它們都是使用 Framer 製作的。是不是也想做一個？沒問題，看完這篇文章你就會使用 Framer 來設計自己的原型了。
當你在原型中需要做一些精準的邏輯或者要實現一些特殊效果時，Framer 是不二之選，儘管它不是那麼容易上手。不過現在不一樣了，最近 Framer 釋出了一個全新版本，新增了設計模式，你可以直接在 Framer 中設計你的原型並通過程式碼給它新增功能，在這個過程中你不需要任何第三方軟體和其他的程式設計技巧。
來吧，讓我教你如何使用 Framer 來寫簡單的程式碼邏輯，即使你沒接觸過程式設計也沒關係。你將會學會如何充分結合設計和程式碼的優勢來設計製作一個可互動原型，並學會使用一些程式碼讓你的原型更加有趣。
Framer 基礎
在開始之前，你需要先下載試用軟體，如果你是壕已經購買了就當我沒說。如果你還沒有買，可以先下載試用再做決定。試用版有兩週的時間而且可以使用它所有的功能，這個時間絕對夠你入門了。
安裝好之後，歡迎頁面上會有一些示例專案，你可以進去把玩把玩。OK，看完了嗎？我們要開始寫原型了哦。
（在這一次的教程中，我會直接使用 Framer 進行介面設計，儘管它還提供了諸如 Sketch 、Figma 匯入和直接程式碼實現的方式。）
Framer 新版本——設計模式
在這篇教程裡面，我們將會在幾分鐘內使用最少的程式碼來完成這三個很酷的原型?：基本互動動作、滾動元件和頁面元件。
最新版 Framer 有一個很牛逼的特性：設計模式，它可以讓你像在 Sketch 或 Figma 中那樣進行視覺化設計。你可以畫向量圖形、匯入影象、或者是建立一個文字圖層並調節它的樣式。如果你性子比較急不想在幾個軟體中切換的話就可以直接在 Framer 中進行快速設計。
開始介面設計:
在第一部分，我們先要設計一個最基本的介面。這個介面的設計包括三種不同型別的圖層：向量圖層、圖片圖層和文字圖層。
第一步: 建立一個小按鈕和背景
請先切換到設計模式，新增一個畫板，就像在 Sketch 中一樣。本篇教程裡，我們將會使用 iPhone 7 大小的畫板（買不起只能在這裡畫畫了），這就是我的畫板預設大小了。同時，我給它填充了藍色的背景。
接下來，使用矩形工具在下方中間畫一個簡單的圓形按鈕。
第二步：建立一張影象卡片
我們直接從電腦的資料夾裡面選一張圖片拖到 Framer 中，並使用右邊的屬性調節調整一下他的樣式。我用了一張簡單插畫，調整了投影什麼的讓它看起來像一張卡片。
第三步：新增標題
Framer 也支援新增文字圖層，就像在其他設計軟體中一樣，你可以選擇字型、字號、對齊方式、字間距等。
第四步：告訴 Framer 哪些圖層是可互動的
畫完了所有圖層在給 Framer 新增互動動畫之前，我們還有最後一步：我們需要告訴 Framer 哪些圖層是可互動的。點選圖層皮膚中圖層名稱右側的圓環（靶子圖示），給想要新增動畫的圖層改個名字以在程式碼中使用。為了長遠考慮最好給每一個圖層起一個有意義的名字，我給給它倆取名為 card 和 button 。
第五步：定義一些全域性的顏色變數
一個好的程式設計習慣是在開始前給原型定義一些全域性變數。你可以定義一組顏色、基本的字號行高，或者畫布尺寸等，這會幫助你節約後面的工作時間。
當你想好需要哪些顏色之後，就可以在程式碼編輯器中給他們都起個名字，然後使用 = 給它們賦一個值，可以是 HEX 、RGB 或者 RGBa 格式的色值。請注意這些變數定義一定要放在最前面。
# 變數 -------------------------------
blue = "#005D99"
green = "#3DBE8B"
white = "#FFFFFF"複製程式碼第六步：新增相對位置
在新版的 Framer 中，讓你的原型支援響應式很簡單。你可以在設計模式下設定圖層的相對位置，就像下面這樣：
這裡有一些常用的方法，幫助你在程式碼中對齊或者計算圖層位置。如果你想讓你的原型是響應式的並在之後新增一些互動效果時會發現這很有用。
# 這些程式碼教你如何對齊圖層
x: Align.center(0) # 水平居中對齊圖層
x: Align.center(200) # 在水平居中向右偏移200px處
x: Align.right(0)
x: Align.left(0)
y: Align.center(0) # 垂直居中對齊圖層
y: Align.top(0)
y: Align.bottom(0)
# 你也可以使用一些變數
width: Screen.width # 當前裝置寬
height: Screen.height # 當前裝置高
# 當然你也可以使用圖層名來引用該圖層的座標
x: layerA.x # layerA 水平位置
y: layerA.y # layerA垂直方向 位置
width: layerA.width # layerA 的寬度
height: layerA.height # layerA 的高度
# 你還可以結合這些，進行一些數學計算
width: Screen.width / 2 - layerA.width複製程式碼都搞定啦？開始吧
現在我們在 Framer 中已經建立了好幾個圖層，是時候開始我們的互動部分了。
好開心，比較枯燥的過程都完啦，現在是時候開始處理互動了。你可以從這裡先下載原檔案。
1. 建立按鈕反饋動效
在設計任何動效之前，我們都需要想清楚這個動效是怎樣被觸發的。可以使一個使用者的點選、一個動畫的完成、一張圖片的載入完畢或者手機陀螺儀的變化。
第一步：建立互動事件
先來個簡單點的，我們假設是在你點選之後觸發的按鈕動效，可以像下面這樣新增一段程式碼：
layerA.onTap (event, layer) ->複製程式碼Framer 會自動新增這段程式碼，它的意思是當你點選按鈕圖層時，會發生一些事情。
第二步：給事件新增動畫
我們設定好觸發事件之後，需要給它新增一個動畫。點選圖層皮膚中按鈕圖層右邊的圓環，選擇“新增動畫”，Framer 就會轉到動畫編輯模式下，此時你可以縮放、移動、旋轉或者改變任意其它屬性。
在這個時候 Framer 會自動在後面新增幾行程式碼。（不要擔心，你還是可以在動畫皮膚中調節它的）
button.onTap (event, layer) ->
button.animate
borderRadius: 27
borderWidth: 10
borderColor: "rgba(115,250,121,1)"
options:
time: 0.30
curve: Bezier.ease複製程式碼恭喜你！你已經使用 Framer 建立了人生中第一個互動動畫。不過這個互動效果只能被觸發一次，沒關係，後面我會說怎麼修復。之所以只有一次的原因是我們沒有定義動畫完成之後的事件，其實當點選動效完成時，我們應該讓按鈕的各項屬復原。
第三步：復原動畫屬性。
我們來新增另外一個事件以停止動畫：
寫下這麼一行程式碼：
button.onAnimationEnd (event, layer) ->複製程式碼接著新增程式碼，讓按鈕進行另一個動畫來複原各項屬性。
button.onAnimationEnd (event, layer) ->
button.animate
borderWidth: 100
borderColor: "rgba(255,255,255,1)"
borderRadius: 100
options:
time: 0.3
curve: Bezier.ease複製程式碼搞定啦！現在我們就有了一個可互動的按鈕。
2、給卡片建立不同的狀態用於互動
好了，現在你知道了如何給圖層新增動畫並使用一些事件來觸發動畫，但是多數情況下我們是通過給圖層新增不同狀態來實現動畫效果的。你可以給一個圖層新增多個狀態，在每一個狀態下都有著不同的屬性，如位置、尺寸、透明度等。
第一步：給卡片圖層新增狀態
給圖層新增狀態和給圖層新增動畫差不多，點選圖層皮膚該圖層名稱右側的圓環，然後點選“新增狀態”。現在你進入了圖層狀態編輯模式，接下來就可以改變圖層在該狀態下的樣式了。
請注意程式碼的縮排，這一次我們要頂著程式碼編輯區左側開始寫。
在這個例子裡，我給卡片圖層新增了兩個不同狀態。
card.states.a =
width: 248
height: 287
x: 63
y: 190
borderWidth: 10
borderColor: "rgba(115,250,121,1)"
card.states.b =
x: 139
y: 529
width: 98
height: 98
borderRadius: 49
borderWidth: 1
borderColor: "rgba(255,255,255,1)"複製程式碼第二部：新增事件
新增好不同的狀態之後，我們需要一個事件觸發圖層在不同狀態間切換才可以看到效果。我我們一起來建立觸發事件吧：
button.onTap ->
card.stateCycle()複製程式碼這段程式碼所做的工作，就是在我們每次點選時按順序輪流迴圈切換狀態。如果你想要切換到某個確定的狀態，可以用下面這段程式碼：
button.onTap ->
card.stateSwitch("b")複製程式碼可是看了一下效果我不太滿意，感覺不是很完美，所以我又調整了一下兩個狀態之間過渡動畫的速度和運動曲線。
card.animationOptions =
curve: Spring
time: 0.8複製程式碼
使用事件你可以幹很多事情，目前為止你已經學會了如何建立一些基本的互動。不過想要做一些複雜的事件互動還是有點難度的，但請不要害怕，Framer 中文文件裡面一般都能找到答案。
元件：加快你的工作流程
是時候使用 Framer 元件來加快你的工作流程了。為了更好地理解這篇教程，請先下載該示例原始檔：framer.cloud/WTySI。
我對這個原型做了一點點修改。現在這個原型裡面有一個很長的列表，它的內容已經超出裝置螢幕了，導致我們看不全。沒關係，我們想個辦法把它變成可以滾動的。
第一步：建立圖層並設定元件
我們先建立一個比螢幕還要長的圖層，然後把它變成程式碼目標並命名為 list 。接著切換到程式碼模式，這一次我們不使用左側的調節工具而是直接使用程式碼來調節這個圖層是指可以滾動。
scroll = new ScrollComponent
width: Screen.width
height: Screen.height複製程式碼這段程式碼建立了一個和當前螢幕一樣大的不可見區域。
第二步：告訴Framer你想滾動哪個圖層
啥事兒都沒發生對吧？因為我們還沒有告訴 Framer 讓哪個圖層滾——————動。很簡單，我們只需要把 list 圖層新增為滾動元件的內容（ content ）就可以啦。
list.parent = scroll.content複製程式碼第三步：只允許縱向滾動
試一試，現在是不是可以滾動啦？但是好像可以隨意滾動，可我們只想上下滾動啊喂，那我們就想個辦法禁止橫向滾動吧。
scroll.scrollHorizontal = false複製程式碼
哇！有沒有發現你竟然只寫了5行程式碼就實現了一個不算簡單的原型，比開發哥哥都厲害。
2、頁面元件: 從一屏滑向另一屏
使用頁面元件時，Framer 讓你可以一屏屏滑動，停下時會自動停留在某個頁面不動。
可以用頁面元件實現的比較流行的互動效果是滑動切換螢幕，和這個原型類似，你可以下載它把玩把玩：framer.cloud/icddT。
第一步：設定頁面元件
首先我們應該先在程式碼編輯器中用頁面元件畫一個盒子，一個裝滿了黑魔法的盒子。
page = new PageComponent
width: 315
height: Screen.height
x: Align.center
scrollVertical: false
clip: false # 超出元件尺寸的內容不會被隱藏複製程式碼看這段程式碼應該不是很陌生吧？和上面我們設定滾動元件一樣，在這裡我們建立了一個頁面元件並對其進行初始的設定，現在我們往裡面新增一些圖層用來滑動。
第二步：建立圖層
我比較懶，所以我將會繼續使用第一個原型中的設計圖。不過有點不同的是，這一次我們匯入兩張圖片。
首先我們把畫板變成之前的兩倍寬。在畫板屬性皮膚中，找到寬度 width 並把它乘以 2（在後面加上 *2 ）。把這兩張卡片挨著放在一起，同時給它們新增程式碼目標，一個叫 card1 另一個叫 card2 。
第三步：把圖層新增進頁面元件
在剛才的程式碼後面，加上這兩行：
card1.parent = page.content
card2.parent = page.content複製程式碼它的意思是把這兩個圖層新增進頁面元件。
頁面元件允許你在不同頁面間滑動，橫向縱向都可以。此時你已經完成了這個頁面切換的原型。
最後
這一片指南就是這些內容，希望這篇教程可以幫助你入門 Framer ——這款最強大的原型設計工具。你也可以加入 Facebook 小組，在這裡會有很多人幫助你。
想要更深入的學習，你可以閱讀 Framer 中文網裡面的內容，訂閱豆瓣閱讀專欄《 Framer 原型設計指南》，或關注公眾號 codesigner。