做 Prototype 的工具 framer js

今天逛到一個設計聚會的臉書頁面，他們投票最想學的 Prototype Framework 是 framerjs。一點進去他們網站看，就發現了學 React 一直很缺乏的 Animation 和設計感。後來也發現 React 也有人做 Animation，今年的 ReactEurope 有兩個很好的 Talk，不過先來看這個影片，進修一下、看這個影片教設計師的 prototype 的方法吧。

framers 是一個創意設計的工具，讓你能建立互動和動畫的 prototype。為什麼要做 prototype？探索和發明新的互動、定義要設計出的感覺是什麼、做有效的概念溝通。

對我來說最有趣的部分是當你從你的設計中建出互動的 prototype，你會發現很多全新的互動。如果你只是做靜態的 mockup，然後叫其他人做一些 Animation，你會失去跟它玩的機會... 試著反過來做、亂玩參數、試著發明東西。對我來說，這是 prototyping 中最有趣的地方，總之就是東搞西搞一些。

另一件事是當你談到設計，除了視覺設計外還有很多東西，當你開發 App 或是網頁，更要在意的是它感覺起來怎樣，怎麼互動、怎麼流動，很多視覺設計以外的東西。

另一件很實際的是當你在團隊中工作，prototype 能讓你很有效的其他人溝通你的新想法。今天我可在這邊給個好例子：「想像你有一個可排序的列表，被選擇的項目會放大和加陰影浮在上面。所有的項目都會對此改變它們的位置。」

下一步你會做一堆速寫

然後是精美、有陰影的 Mockup 

但我們真正接下來想看到是有動畫能互動的 Prototype
試著做一些操作，移動項目

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、展示模式。

Framer Studio 可以直接從 Sketch 導入 layer、階層。

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