Framer & Sketch: An Intentional Workflow這是一篇翻譯教程，作者是Charlie Deets。作者通過一個案例用5個步驟向我們說明了如何使用Sketch和Framer制作一個可交互原型。從靜態設計到邏輯設計最后導入Framer進行動態設計，作者將每一步都進行詳細描述，并告訴我們高效的設計流程應該是怎么樣的。值得一看，無論是入門還是進一步提升！
制作Framer原型可以在早期設計階段就傳達一個產品的最終的樣子。我發現使用Framer工作是很值得的因為它迫使我用一種可感知的方式思考一個設計的邏輯和流程。
建立一個原型也能幫助我對開發者建立產品所面臨的事情產生共鳴。如果在Framer中很難解決一個交互，那么可能在設計中存在某種根本的缺陷或歧義。
我制作了大量的原型，他們往往是很長的流程與許多不同的狀態。我已經開發了一個相當快速的系統，通過預料通常發生在后期過程中的問題將設計轉為一個強大的原型。我決定把我的過程寫下來，作為你如何使用framer處理一個原型工作流。我敢說，經過這次課程，它會讓過程非常快。
step 1：靜態設計（Static Design）
作為一個例子，我們要制作一個可滑動的堆疊卡，就像你在應用Moments和Tinder中看到的。這些卡片可以收藏或移除。任一卡片都可以打開至列表頁查看內容。
靜態設計過程應該是真正熟悉的過程。思考體驗過程的各種狀態并用sketch把它們畫出來。一旦你感覺你已經很好地把握了可能性的范圍你就可以準備好前進了。
提示：framer現在支持導入1x分辨率。使用1x設計，日后為工程師創建規格說明時它會使你的生活更輕松。
step 2：把它寫出來（Write It Out）
這是神奇的一步。一個節省了我最多的時間，阻止我在后面的工作中來來回回地以一個低效的方式解決問題。
在純文本中，寫出原型應該做什么。
試著寫出用戶使用原型將會執行的所有動作和他們將會看到的結果。大多數的流程往往有一個線性的時間線，所以寫出理想的狀態會發生什么。稍后你將處理邊緣情況。
這個純文本邏輯將會創建偽代碼。它也會通知你下一步將要導入framer的sketch文件該如何建立。建立一個真正條理分明的導入文件可以節省大量時間。
這里就是我們這個例子中的純文本邏輯的樣子：
-點擊按鈕打開app至主頁視圖
-卡片載入
-左滑卡片標記完成
-右滑卡片收藏
-在任意卡片上點擊打開按鈕展開
-活動卡片出現列表視圖
-點擊退出關閉列表視圖
-在最后一張卡片上展示完成動畫
-點擊刷新按鈕重新載入卡片
現在回顧這個流程并寫下每次用戶交互或由此產生的界面動作
-點擊按鈕（用戶操作）打開主界面（縮放動畫）
-卡片載入（載入動畫）
-左滑卡片（用戶操作）標記完成（標記動畫）載入剩余卡片到新的位置（動畫）
-右滑卡片（用戶操作）標記收藏（星星動畫）載入剩余卡片到新的位置（動畫）
-點擊任一卡片上的打開按鈕（用戶操作）卡片展開（卡片變為全屏動畫）
-活動卡片出現列表視圖（列表項目展開，退出按鈕出現）
-點擊退出按鈕（用戶操作）關閉列表視圖（列表項和退出按鈕縮小消失，卡片全屏縮放）
-滑動最后一張卡片（用戶操作），顯示完成動畫（完成動畫縮放）
-點擊刷新按鈕（用戶操作）重新載入卡片（載入動畫）
識別視圖中所有視覺變化以及是什么觸發了它都是很重要的。用戶操作將會是你的操作事件（action events），界面行為將會是你的生成動畫（resulting animations）。試著把他們都弄清楚，這樣你就可以在可能的情況下識別和構建可重用的部分。如果你能確定你想要的東西，一切都會變得輕而易舉。
step3：導入sketch文件編輯你的framer（Compile Your Framer Import Sketch File）
在這個步驟里，我們把原始的帶有界面狀態的sketch文件轉化為一個新文件，我們將會把他導入到framer中。
我傾向于基于他們在視覺層次結構中的顯示方式對界面狀態分層放置。這可以幫助我避免在最終的編碼里盡可能多的使用placeBefore或placeBehind（framer中的函數用于設置圖層位置），我發現這會使調試速度更慢更令人困惑。我將大多數圖層放置在他們在視圖中被激活時將要駐留的位置，然后當我設置framer項目時再把他們移出視圖。
在我的命名方案中我試著做到簡潔準確，大多數使用我純文本邏輯中同樣的名字，刪除空格并把它們寫成camelCase。我選擇明顯具體的名稱，因此我就不必來回的參照sketch文檔。名稱應該總是描述元素的目的。例如，你可能只有一個按鈕，重新載入視圖，但是把它命名為“reloadButton”而不是“button”。接下來如果你想要增加其他按鈕這樣做會使避免混淆從而使事情變得更簡單。
確保從sketch文件中移除任何不會在原型中出現的圖層。這樣做可以更容易的找到特定的編組，并且增加原型真正演示的機會。有時候，在項目結束時，我將所有不需要操作的元素都展開以獲得更好的展示，但是我通常避免在整個過程中過早的做這件事以獲得最大靈活性。
step 4：導入和再利用（Import and Reuse）
好，現在是有趣的部分。以適當的設備分辨率導入Sketch文件至Framer。設置一些具有特殊交互屬性的圖層，例如拖拽（draggable）、滾動（scrollable）等等。設定不在視圖中的圖層的初始位置，設置一些尺寸等等。基本上你想要項目進入到你想要的初始狀態。
這是一個片段示例，我如何放置這些（查看原型以獲得更多）：
# define initial positions
app.appView.scale = 0
app.appView.originX = 0.361
# define draggables and scrollables
app.card1.draggable = true
app.card2.draggable = false
app.card3.draggable = false
scroll = ScrollComponent.wrap(app.cells)
scroll.scrollHorizontal = false
#define animations
cardExitLeft = (layer) ->
layer.animate
properties:
x:-750
curve:cardPull
#define conditionals
currentCard = 1
現在從偽代碼中獲取第一個用戶動作，寫入真實的Framer代碼。用你的方式寫下列表。在這個步驟中，你會有一些來回的嘗試，來體驗感覺和查看外觀。別害怕在你的sketch文件中調整和重新保存圖層。如果你已經做到了這一點，就很容易調整framer中的更改。
我經常重新回到sketch文件中參考元素的位置和尺寸。我經常在sketch文件中制作2倍原型的文件，所以我試著不要忘記將尺寸值乘以2。
step 5：調整到你希望的狀態(Adjust Until You Reach Desired State
)
只是調整。如果有一些可復用的彈性效果和動畫，那調整起來會十分簡單。嘗試不同的感覺。編輯sketch文件必要的時候重新導入。你會發現一些激發你做出改變的新東西。
我覺得設計原型中最有意思的就是這一步驟。這個時候我覺得framer和sketch配合的天衣無縫，我很樂意在二者之間來來回回使原型能夠達到它應該達到的最佳體驗。
我通常用Screenflick來記錄我原型的理想流程。我喜歡它因為它能同時控制錄制時的屏幕分辨率和導出時的輸出f分辨率。它可以讓我控制觀看者看到的用戶交互。我還發現它比我使用QuickTime錄制時更能保持性能。
為了便于觀看，我把原型放在設備上用相機記錄交互過程。我傾向于使用Framers和Framerless。我喜歡Framers能夠把原型離線存儲在設備上。當一天中隨機的展示原型時，它會變得很有用。
一些建議
視頻圖層
如果我有視頻圖層，我通常設置一個“holder”圖層組，讓視頻在原型中出現，這是一個虛擬的靜態圖層看起來就像視頻一樣。這有2個好處，我可以參考sketch文件中dd的置和尺寸，當我置入真正的視頻文件結構，我可以簡單地把它放在holder圖層來控制它。
建立代碼片段（Snippets）
一段時間后，你最終會形成一種適合你的開發風格。為了更快你能做的最好的事情就是把這些技巧作為代碼片段記錄下來，讓它們隨時可用。在你知道它之后，你就可以很快制做原型，因為你幾乎不用寫任何代碼，你只要把東西拼在一起然后調整邏輯就可以為你和你的系統工作了。
這是我最喜歡的代碼片段，它能減慢動畫這樣我就可以對他們進行優化：
//slow down animations
Framer.Loop.delta = 1/240
Update:我建立了一個代碼片段庫。點擊下載
總結
我希望這些想法能幫助你思考如何在工作流程的決策中更縝密的思考，以避免在后續的過程中產生混亂。每次使用framer制做一個原型，下次難度就會減半。所以堅持下去，這是值得的。
如果你想要更多的談論framer或sketch或者相關的東西，可以通過Facebook或Twitter建立聯系。也可以在Facebook上查看Framer JS組群，那里總有很棒的framer對話。謝謝您的閱讀！
在GitHub上下載原型和sketch文件。
原文鏈接：https://medium.com/facebook-design/framer-sketch-an-intentional-workflow-f91ee2ee1cc1
譯者：哇咔咔
