今天逛到一個設計聚會的臉書頁面，他們投票最想學的 Prototype Framework 是 [framerjs](http://framerjs.com/examples/)。一點進去他們網站看，就發現了學 React 一直很缺乏的 Animation 和設計感。後來也發現 React 也有人做 Animation，今年的 ReactEurope 有兩個很好的 Talk，不過先來看這個影片，進修一下、看這個影片教設計師的 prototype 的方法吧。
framers 是一個創意設計的工具，讓你能建立互動和動畫的 prototype。為什麼要做 prototype？探索和發明新的互動、定義要設計出的感覺是什麼、做有效的概念溝通。
對我來說最有趣的部分是當你從你的設計中建出互動的 prototype，你會發現很多全新的互動。如果你只是做靜態的 mockup，然後叫其他人做一些 Animation，你會失去跟它玩的機會... 試著反過來做、亂玩參數、試著發明東西。對我來說，這是 prototyping 中最有趣的地方，總之就是東搞西搞一些。
另一件事是當你談到設計，除了視覺設計外還有很多東西，當你開發 App 或是網頁，更要在意的是它感覺起來怎樣，怎麼互動、怎麼流動，很多視覺設計以外的東西。
另一件很實際的是當你在團隊中工作，prototype 能讓你很有效的其他人溝通你的新想法。今天我可在這邊給個好例子：「想像你有一個可排序的列表，被選擇的項目會放大和加陰影浮在上面。所有的項目都會對此改變它們的位置。」
| [](http://2.bp.blogspot.com/-wrY9GHZtHaw/VkIdrOQKwNI/AAAAAAAA37I/XbVdY5o9Ycc/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.38.42%2BAM.jpg) |
| 下一步你會做一堆速寫 |
| [](http://3.bp.blogspot.com/-6rWUYBKS7k0/VkIeBoErK3I/AAAAAAAA37M/1L03PKDkH24/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.40.18%2BAM.jpg) |
| 然後是精美、有陰影的 Mockup |
| [](http://3.bp.blogspot.com/-23vmRgux73A/VkIeZZUKBeI/AAAAAAAA37U/nPxbHQSGxa4/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.41.49%2BAM.jpg) |
| 但我們真正接下來想看到是有動畫能互動的 Prototype
試著做一些操作，移動項目 |
| [](http://4.bp.blogspot.com/-A4eiqsrbceU/VkIfT_3IkMI/AAAAAAAA37g/Y5ANpqhC234/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B12.45.44%2BAM.jpg) |
| animation：after effect / keynote
prototyping: ... 一堆，最後一個是framer |
我們今天想著要 prototype 什麼，它實際上就是在設計明天。從概念到執行中間大概可以分成四個階段：Paper -> Sketch / Photoshop -> Framer -> Code。以流程來說，Prototype 大概是在正中間的位置。Prototype 可以往前或往後一點。現在的產品設計流程，通常會做很多靜態的 mockup 但只做一個到兩個 Prototype，我們希望有了更好的 Prototype 工具之後，可以變成三五個 mockup 但做很多的 Prototype。
Framer js 是一個開源的程式庫，提供 Framer Studio Mac App：它提供程式碼編輯器、即時視覺回饋、可以從別的軟體 Import、展示模式。
| [](http://3.bp.blogspot.com/-IshXhNK4H8I/VkImhHSiq4I/AAAAAAAA38E/0fon9gF2umI/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B1.14.36%2BAM.jpg) |
| Framer Studio 可以直接從 Sketch 導入 layer、階層。 |
| [](http://1.bp.blogspot.com/-XJVfK-0_q_w/VkIizhFLntI/AAAAAAAA37s/tffawiEgiGI/s1600/Screen%2BShot%2B2015-11-11%2Bat%2B1.00.35%2BAM.jpg) |
| Framer 提供這些功能。 |
Layer 就是一個 Container 可以設定大小、位置、透明度、縮放、圖片、模糊... 一堆屬性。
Animation 讓你從一組 states 過渡到另一組 states。可以設定 curve、延遲、時間長度。
States 讓你命名一組 states，之後你就可以指定從 XXX 變成 YYY。
Events 讓你可以處理 drag、drop、click、scrolling、touchstart ...
開始 Demo Prototype examples & QA 從影片13分15秒。
---
framer 教學影片：https://www.youtube.com/watch?v=3zaxrXK7Nac
從影片中可以看到，設計師是直接把一整張圖當成 Layer 來操作。然後視覺上的元件就當成自訂元件，不用管甚麼 HTML / JSX，然後就對視覺上的這個元件 ( 一張 button 的圖 )，安上click 事件，然後用動畫把另外一張圖換上來…
設計師設計時用不同大小的圖片當成自訂元件，以這樣的元件視角去設計整個 Prototype，看是這張圖要不要模糊、要浮在前面還是後面、要不要讓他可以 Scroll、動畫時要如何從一個 State 變成另外一個 State。
這樣子好直覺啊，一個元件就一張圖，用 sketch 畫畫就好，不像程式設計師要用 HTML / CSS / UIKit 兜好久。
framer 教學影片 https://www.youtube.com/watch?v=kJYI4oYrHik
他們的 script 語法好簡單，超簡潔、超適合簡單的 UI，像 Python 用 indent 代替大括號真的很棒，然後設定 Event 也太簡單。都在操作 Image 超簡單。
發現那個 script 叫 coffee script 喔喔喔 看了完全不想寫 Javascript了 XD