Framer（framerjs.com）如何入門？

12-19

http://framerjs.com
Framer是一個開源項目，一個基於JavaScript的原型工具，專為設計師打造。現在的應用更注重交互設計，它可以讓你效率更高。

一位叫 David Lee 的交互設計師有寫過一篇 New to Framer?
Just 3 Things to Get You Started，感覺是目前來說比較易懂的入門 Framer 的文章。我節選了這篇教程最核心的內容加上自己的理解梳理成了中文，不是逐句翻譯，所以英語好的同學還請直接看原文~

—

第一部分：首先得大概知道 Coffeescript 是什麼（如果你已經很熟悉了，請忽略這部分）

Coffeescript 是你用 Framer 寫原型時用的語言，這是一種寫 JS 的更簡單的方法。想了解它，你需要知道這四點：

1. 賦值（assign）
等號「=」在編程語言里不是「等於」的意思，而是「賦值」，等號右邊的值被賦給左邊。如把 12 賦給 number：

number = 12

2. 變數（variable）
在上面的例子中，number 就叫「變數」。Coffeescript 中，這樣給各種變數賦值：

opacity_value = 1 #整型 scale_value = 1.2 #浮點型 how_old = "I am 12." #字元串型

3. 點（dot）
當你導入一個 Sketch 文件到 Framer 時（這個後面例子會講到），你會看到這麼一行代碼：

example = Framer.Importer.load "imported/example"

假設 example.sketch 中有 circles 這個圖層組，那麼你就可以通過「點」來取到它：

example.circles

上面這個句子是不完整的，你取到了這個變數，就可以對它的屬性進行一些操作：

example.circles.opacity = 0.5 #將這個 circles 圖層的透明度設置為 0.5

4. 縮進（indent）
Coffeescript 中的縮進是用來定義語言結構的，不同於 JS 中使用的 { } 花括弧。縮進的行之間是從屬關係。舉個栗子：

function = -&> layer.animate properties: opacity: 1 rotation: 90 # layer.animate 屬於 function，而 properties: 屬於 layer.animate, ...

第二部分：邊上手邊理解 Framer 的三個核心概念

我們知道，動畫是基於現實生活中的現象的，比如：如果你推動（事件）某個東西（圖層），它就會動（狀態變化）。用 Framer 做原型動畫就是用代碼來實現這個過程，所以理解了這三個概念，你就可以很快上手啦~

概念 1. 圖層（layer）

你可以在 Framer 里直接創建一個個的圖層，但更簡潔且優雅的方式是直接從 Sketch 導入。現在，下載這個文件 framer101_inbox.sketch，跟著作者的例子來一步步實踐吧。

先把實例代碼清空，用 Sketch 打開下載的文件，在 Framer 中導入（Import），現在你就可以看到窗口右邊出現了示例文件，左邊出現了一行代碼。你可以改變這行代碼的變數名，作者把它改成了「inbox」，也就是：

inbox = Framer.Importer.load "imported/framer101_inbox"

現在你就可以對這些圖層為所欲為啦，長什麼樣子，在什麼位置，都由你決定，比如：

inbox.fab.scale = 1.2 # fab 是 floating action button 的縮寫 inbox.overlay.opacity = 0.5

概念 2. 事件（Event）

有了圖層，我們就可以對它進行操作了。Framer 支持 Click，TouchStart，TouchEnd，Drag，Scroll 等事件。

先用人類語言來形容一下我們想對圖層做什麼：

讓這個圖層監聽點擊事件。（當點擊的時候）做這件事。

如果我們把這個描述翻譯為 Coffeescript 的語言就是：

inbox.fab.on Events.Click, -&> inbox.fab.opacity = 0

第一行代碼將讓按鈕（fab）準備好被 Click，第二行縮進的代碼定義了 Click 後會發生什麼（fab 的透明度變為 0，也就是消失）。當然，你要是不嫌煩也可以分開寫：

inbox.fab.on Events.TouchStart, -&> inbox.fab.opacity = 0

inbox.fab.on Events.TouchEnd, -&> inbox.fab.opacity = 1

你可能很疑惑「.on」「, -&>」都是些什麼鬼東西。其實在初期你不需要深入理解，可以把它看做是將一個事件賦值給圖層的方法，以後添加事件都按照這個套路來就行啦。

如果你想檢查下添加的事件是不是起作用了，你可以用 print 列印些文字，如果你做了相應的操作後能正常輸出就說明起作用了。

inbox.fab.on Events.Click, -&> print "clicked!"

概念 3. 狀態（State）

現在你已經有了一個能響應點擊事件的圖層了，但是它是突然消失的，不太自然，這時就需要「狀態」來幫忙，這個概念也是 Framer 最厲害的部分啦。

一個最簡單的動畫包含兩個狀態：A 和 B，通常當你從 Sketch 導入動畫時就已經包含了一個圖層的初始狀態 A，現在你需要添加一個狀態 B，比如：

inbox.fab.states.add fadeout: # 狀態的名稱：淡出 opacity: 0 scale: 1.5

然後把淡出（fadeout）狀態應用到上面已經寫好的點擊事件里吧~

inbox.fab.on Events.Click, -&> inbox.fab.states.switch("fadeout") # 這裡的 .switch("fadeout") 可以替換為 .next().

這時，當你點擊 fab 時，就可以看到它淡出消失了。

淡出的過渡還是有些生硬對吧？讓我們用 Framer 自帶的 Spring 來定義一下過渡的彈性曲線：

inbox.fab.states.animationOptions = curve: "spring(300, 30, 0)"

spring 括弧里的三個值分別代表：張力、摩擦力、速度，可摸索調整到你最滿意的數值效果。

嘭！一個最基本的 Framer 動畫原型就做好啦！

到這裡就基本算入門 Framer 了 p( ^ O ^ )q
—

其實用 Framer 做原型前的 Sketch 文件也是一個比較重要的部分。比如你得知道 Framer 只能識別到 Sketch 中的圖層組，也就是說，Sketch 里的單個圖層是不能在 Framer 中取到並進行操作的。這些作者在文中沒有提及，關於這一點更多內容可參考 Framer - Sketch Tips。至於 Sketch 中元素的組織技巧，可以通過下載別人的例子（Sketch + Framer 源文件）研究學習。

入門後就不停地寫啊玩啊盡情折騰吧，碰到問題就去捋官方文檔，或者去 facebook 的 Framer小組里討論。

加了個油！

—
註：2016 年 Framer 有一次比較大的更新，這篇文章里的實例某些部分可能已不再適用，但基礎知識部分是通用的。想學習 Framer 的同學可到 Framer - Resources 參考最新教程~

講一下我這兩天深入了解Framer的些許心得吧。

首先，我大致看了Framer Learning的四部分，分別是Framer基礎了解、設計圖的導入、原型預覽以及CoffeeScri的基礎了解。通篇看下來不會很吃力，基本概念都有涉及到。

接著，下載Framer Studio實戰演練。一開始我嘗試導入Sketch設計稿(Sketch文件需保持打開的狀態才能被導入)，但發現Framer Studio對設計稿圖層的命名是有一定要求的，比如命名不能有空格否則在選中某一圖層賦予屬性時會出現錯誤。因此，類似這些問題需要設計師在前期命名圖層時充分重視，否則後續改起來很麻煩。另外，Framer導入的圖層必須是group，否則將被忽略。

這也可以看出，使用Framer Studio的設計師們需要一開始對原型的把控度有很清晰的了解。

下面舉個簡單純代碼的交互原型例子（導入設計稿實現交互這一種情況有空再補上）
我要實現的效果如下：點擊「More Info about Framer 」,下拉框給出信息展示，分享鏈接：http://share.framerjs.com/w5wo0odru9l1/

首先理清這裡需要建立三個新圖層，分別是三種顏色所佔的圖層（為了區別對待才刻意選取三種顏色，正常情況下應設置為「transparent」）。

代碼如下：
x,y屬性定義圖層位置，width和height屬性定義圖層大小，以及還有背景顏色等，這部分可看文檔解釋。圖層之間有父子關係。

Framer賦予圖層Animation、States、Events等交互行為，設計師在定義交互行為時可以根據自己的選擇來編寫代碼。
例如，例子給出的交互行為是點擊彈出下拉框，那麼代碼可以這樣寫：

了解這些後，簡單的交互行為還是能很快上手的。但是一些複雜的交互行為還是需要花時間去揣摩學習的。
另外，Framer社區(https://www.facebook.com/groups/framerjs/)是個很好的學習平台，我所舉的例子是在上面選取其一部分，例子比較複雜，我抽取學習。
希望對你有幫助。
其中若有錯誤也歡迎指出:)

簡單看了下介紹。

我認同阿九關於Framer「是給「具有前端開發能力的設計師」打造的交互設計工具」這部分結論（甚至我覺得，由於選擇了Coffee做工程語言，這根本就是給前端用來做Prototype的），但是不認同要使用 Framer 必須要學習JS 再學Coffee的觀點。

事實上，有過開發經驗的人都知道，一旦Native JavaScript用順手後，再學習CoffeeScript反而會增加額外的心智負擔，倒不是說Coffee不好，但如果已經有了JS的基礎，再學Coffee的話在編碼時會不自覺的承擔人肉編譯器的角色。

而我猜一下，Framer之所以選用Coffee是因為JS的坑還是太多了，很多程序員都會義無反顧的去跳坑，遑論設計師？而Coffee本質上是JS的超級語法糖，同時在語法層面規避很多了JS的坑，因此倘若真有Designer想要學Framer，建議直接上Coffee，不要去學JS了，避免在JS的一些細枝末節的技術問題上耗費過多的時間。

至於Framer本身，我倒覺得還不錯，自有動效能力如果再配合Cordova的打包能力，做Prototype速度是蹭蹭的升。

回頭我去下載下來做個東西，瞅瞅編譯出來app的性能以及不同平台上的效果，然後分析下項目的文件依賴，看看有沒有實際的可操作性。

上個月的Facebook開發者大會Framer宣布了重大更新，Framer融入了一定的所見即所得的圖形界面設計能力，讓用Framer做原型開發一下子變得更容易，上手更快了，終於不再只有代碼編輯器啦！

我就用Framer官網（http://framerjs.com/）的例子搬來給大家介紹一下吧。下面這個簡單的圖片瀏覽Prototype，10分鐘不到就可以搞定。預覽地址：http://share.framerjs.com/hfr5wslx89n0/（Safari瀏覽器效果最佳）

1. 把素材圖直接拖進Framer，以下代碼就自動生成啦

現在預覽圖應該是長這個樣子的

2. 給bottom_bar和top_bar添加新的state，不用寫代碼。在Framer Studio上點擊加號-&>State-&>bottom_bar

然後再在右邊的預覽里把bottom_bar拖到你想要的位置（在這裡就是拖出屏幕啦）

top_bar也是一樣的做法，然後這幾行代碼就會出現了。這樣我們就為這兩個bar的動作做好了準備。

3. 接下來就是添加一張照片：先添加一個圖層。

然後唯一需要寫的一行代碼是，目的就是在這裡使用unsplash的API隨機調用一張圖片

image: "https://unsplash.it/800/"

剩下的諸如圖層位置、大小、圓角、甚至是圖片飽和度，這些工作可以全都在右邊的面板里像用Sketch, Photoshop之類的設計軟體一樣操作（設計師的大福音！！）

我們想要在點擊圖片後放大，其實就是給這個圖片添加一個狀態（state），滑鼠點兩下，右側面板調整一下就可以啦（一行代碼都不用自己手寫！）

自動生成的代碼長這樣：

4. 最後給圖片的縮略圖添加一個點擊事件的動作，同樣只要滑鼠點兩下就好啦！

點擊圖片之後我們想要做的就是要求那些元素改變狀態(toggle state)，添加以下三行代碼

bottom_bar.states.next() top_bar.states.next() photo.states.next()

最後這個事件就是這個樣子的

5. 最後稍微添加一行代碼，給我們的動畫效果稍微加一點點Spring Effect

Framer.Defaults.Animation = curve: "spring(400,30,0)"

ok，大功告成啦~需要手動輸入的代碼量一共只有5行！總之，最近發布的這一版Framer大大降低了學習曲線，對設計師更為友好了！

學習鏈接：
1. Framer - Basics
——學習一些Framer的基礎知識（20分鐘就可以掌握大部分基本概念了）

2. Framer - CoffeeScript Basics
——Framer是基於CoffeeScript的，了解一些CoffeeScript基礎語法知識有助於開發更為複雜的原型

3. Framer - Gallery
——官方的示例非常多，可以下載下來看源碼，可能是最快的學習途徑了吧！

更新教程鏈接。

我是一個前端開發，想轉交互設計師，因此一直在使用Framer做交互原型。我翻譯過一些Framer教程文章，也自己寫過一些相關的文章。在這裡就把自己寫的一篇入門教程《向學習寫文章一樣學習Framer》貼上，希望對大家有幫助。

因為Framer官網國內打開很慢，而且英文文檔看起來比較費勁，我自己設計並製作了 Framer 中文網（ http://framercn.com ），目前還在完善階段，歡迎大家提建議或bug。

此外，還有幾篇文章，鏈接一併放上，大家按需索取：

Framer教程 | 怎樣讓自己看起來更有錢？

Framer教程 | 做一個酷酷的彈出式菜單

Framer之圖層 | 一起來畫個音樂播放器

Framer教程 | 你可能不知道，Framer中藏著一把瑞士軍刀

交互設計工具Framer新版體驗——前所未有的設計方式

在Windows下如何使用Framer？

[教程翻譯]用Framer創建一個Inbox無郵件提示動畫

[Framer教程]一起做個豆瓣電影滑動效果

---------------------------------正文分割線---------------------------------

之前推送過一些Framer教程，但總覺得缺了點什麼。今天想想，直接教大家上手做是不對的。對於很多設計師來說編程還是很神秘的東西，我必須要揭下它神秘的面紗。

要學習Framer，我們先要消除「編程很難高智商才能玩得溜」的心理障礙。其實，就像寫文章一樣，編程也是通過一種語言去描述一些東西，你大可以把一段代碼看成一篇文章。

以中文寫作類比，我們使用的語言是中文，那麼使用Framer編程我們使用的是CoffeeScript（這些技術宅取名時不是吃的就是喝的），它是前端腳本語言javascript的一種變形。

最開始寫作文，老師會告訴我們要遵循一些規則，像首行縮進、陳述句以句號結尾、問句以問號結尾等等。在使用Framer編程時我們也要遵循一些規則，比如使用空白縮進來表示代碼塊、以「#」開頭的語句是注釋等。這些規則，你在使用的過程中會逐漸了解。

現在有這麼一段文字：

「在屏幕上畫一個藍色的圓形，當點擊它時，它會逐漸變成綠色，同時會變成一個正方形」

要實現的效果如下：

動圖鏈接

我們要把它翻譯成Framer能讀懂的語言，在開始之前，我們先了解一些概念和基本語法。

Framer和Sketch一樣，都是以圖層的形式來展現設計。與Sketch不同的是，每個圖層除了擁有尺寸、位置、背景色等樣式屬性以外，還有狀態等屬性。每個圖層可以是其他圖層的父圖層，也可以是其他圖層的子圖層，可以看成Sketch的分組。而動效的表現，則是通過不同狀態之間的過渡來實現，不同狀態間發生變化的屬性就會形成一個補間動畫。

在Framer的代碼裡面，有這麼一些特殊的符號或詞語需要注意，我們拿下面這段代碼來舉例：

# Set background color Screen.backgroundColor = "#333"

layerA.onClick (event, layer) -&> layerA.states.switch("stateB")

1、圓點：

代表所屬，可以翻譯成「的」。

上述代碼中Screen.backgroundColor翻譯過來就是screen（屏幕）的背景色。需要注意的是，原點後面不僅可以跟屬性值，還可以跟一個操作，上述代碼中的layerA.onClick翻譯過來就是「點擊圖層A時」。

2、等號：

等號在這裡表示賦值，就像數學裡面的x=1表示把1賦給了x。上述代碼中Screen.backgroundColor=」#333」就把#333這個顏色給了屏幕背景色，即把屏幕背景色設為#333。

3、井號：

井號表示注釋，就是給代碼做備忘。即使過了很長時間，再通過看注釋也能知道這裡的代碼幹了什麼。而系統是不會處理注釋的，注釋只是給人看的。

4、關鍵詞：

所謂關鍵詞，就是Framer中既定的一些關鍵作用的詞，你在命名時不能使用。上述代碼中，backgroundColor、onClick、states都是關鍵詞，在Framer編輯器中他們一般是藍色的。隨著學習深入，我們還會接觸很多關鍵詞。

5、函數：

回想一下數學中的函數：f(x,y)=x+y，f(x,y)接收參數x和y，計算x+y後返回結果給f(x,y)。在Framer中函數的概念類似，接受一個或多個參數做處理後返回或者不返回。

一般要先定義函數，就可以到各個地方引用函數了，引用時可以傳入不同的參數。

Framer的函數表達式一般這麼定義：

sum = ( a , b )-&> a + b

它就表示函數sum接收兩個參數a和b，計算a+b後返回結果。在引用函數時我們直接寫sum(2,3)，那麼sum(2,3)的值就是5。

6、對象：

終於說到程序員面對的終極問題——對象，在代碼里對象是一個集合體，它可以包含一些屬性和操作。在創建對象時，使用new關鍵詞，比如創建一個女朋友圖層對象：

# Create my girlfriend girlfriend = new Layer name:"beauty" width: 60 height: 170

她包含了一些屬性：名字叫beauty，寬度是60，高度是170，當我們使用她的某一個屬性時，只需要用小圓點就可以啦，比如她的身高就是girlfriend.height。

同時，她還包含一些操作，比如girlfriend.centerX(12)表示讓她站在屏幕中央往右偏移12的位置（centerX( )是Framer中定義好的操作，圖層對象都有，具體可以查閱文檔）。

現在回來看我們的任務：在屏幕上畫一個藍色的圓形，當點擊它時，它會逐漸變成綠色，同時會變成一個正方形。

假設這個圓形的半徑是80，藍色為」#14C4FF」，綠色為」#36E43C」，那我們先畫一個藍色的圓形。

在Framer中圖層默認是矩形，所以我們可以先畫一個正方形，把它的圓角半徑設為寬度的一半就變成圓形了。用代碼表示就是：

# Create layer layerA = new Layer width: 160 height: 160 x: 240 y: 300 backgroundColor: "#14C4FF" borderRadius: 80

我們給它取名layerA，new Layer就是新建一個圖層，連起來就是新建一個圖層並把它賦給layerA。下面的代碼都往後縮進（按tab鍵縮進）了，它們表示layerA的屬性。我們設置寬高為160，x、y是位置，我隨便設的，為了把它定在屏幕中央。背景色設為藍色，圓角半徑設為80，在右側就出現了一個圓：

接下來，我們給它添加一個新的狀態。

# Add states layerA.states.add stateB: borderRadius: 0 backgroundColor: "#36E43C"

layerA.states.add表示給layerA的狀態添加一個，取名為stateB，在該狀態下，圓角半徑是0，顏色是綠色，就像這樣：

不過你看不到它變成正方形，因為默認的狀態就是開始創建時設置的圓形那個狀態。

接下來，我們就要給layerA添加一個點擊事件，使它在被點擊時從初始狀態變換到stateB。代碼是這樣的：

layerA.onClick (event, layer) -&> layerA.states.switch("stateB")

layerA所包含的操作onClick(event,layer)，一直監聽layerA是否被點擊，當它被點擊時就執行layerA.states.switch(「stateB」)的操作，即layerA的狀態轉換到stateB。

至此，我們就完整的將這句話翻譯成Framer能夠聽懂的語言。你可以自己試一試，寫你的第一段代碼。

對於CoffeeScript，我也在不斷學習，以上如有錯誤，歡迎指出。如果有任何問題也歡迎在評論區留言。

有技術基礎，Framer還是挺好上手的。
但一直遲遲沒有用起來，一是自己視覺設計不行，二是自己太懶了一般視覺稿後直接Xcode了。

建議先把軟體買了，然後直接看文檔Framer - Docs。
這樣就有動力學下去了，畢竟錢都花了。

一些資料：

Framer官方網站：http://framerjs.com

Framer簡介 - Andy Design

2014交互設計工具革新之年-UI中國

移動應用原型設計輔助：Framer.js和ionicFramework-witmin

Prototyping swipe and drag gestures with Framer 3

題目是問Framer如何入門，最高票的回答，卻是吐槽Framer然後推薦其他工具？

請務必先熟悉一下coffeescript，大概明白賦值調用，循環條件之類最基本的就夠了。然後再去看Framer官網的learn部分。

再去準備個psd文件，實際做一個例子。推薦這個例子： Creating Your First Prototype with Framer

因為可以下到他的framer文件和sketch文件，而且複雜度上我覺得也挺適當地。

其實使用framer來做原型的話，打開Framer Studio並不是開始，從打開PS或者Sketch的時候，對於原型就應該開始考慮了。因為psd文件中，只有group會被導出成為Framer中可以控制的一個圖層。單獨的圖層是沒法修改的。初期使用Framer的時候，經常出現做到一半，發現圖層間的結構沒有對，沒法實現想要的效果，只能回去重新修改再導入。

當自己在實際做原型的時候，再有什麼不會的，去查查官網的文檔或者例子。相比之前，感覺現在的文檔已經很容易理解了。

可以多去facebook上Framer的小組看看，會有很多po上來的例子，有疑問也可以問。 https://www.facebook.com/groups/framerjs/

Framer確實需要一定的學習時間，但是一旦學會之後就會發現特別方便，特別是當設計稿也是自己出的時候。只需要在設計稿中注意一下group的結構和命名，之後在Framer Studio中導入psd，然後編寫一段代碼就可以了。不需要切圖，不需要保存，不需要再導入工具。。。。

-----------------------------------

我也來順便吐槽一下從誕生之際就自稱「下一代移動交互設計」的Pixate。

當我每次用Framer寫循環的時候，都是我最愛它的時刻。反觀Pixate，整個做原型的過程不斷做一些重複的工作。去年試用Pixate時候，遇到一個bug，發過郵件給他們團隊，順便提了下，能不能快點加複製animation的功能，他們說這正是他們要做的。結果大半年過去了。。。。。說好的複製呢！

-------先下班了，之後再更新-------

不差錢的話，這裡還有本電子書 CoffeeScript for Framer.js 12刀~

先答正題：
第一步：看官方文檔http://framerjs.com/learn/basics/+看別人的DEMOhttp://framerjs.com/examples/,
第二步：動手開始做+有問題隨時查閱官方DOC Framer - Docs
設計師對代碼的抵觸只是心理門檻不是智商缺陷，真的沒有比這CoffeeScript更簡單的語言了吧~高中數學抽象度都比這高N倍。

Framer算是近年冒出的交互工具里，得分最高的一個。
從五個維度去打分:可實現效果：90，學習成本：60，實現效率：60，上下游溝通成本：90，
至於其他的幾個各有長處，但都有著各自致命的問題：QC奇葩低效難學不可復用的製作邏輯，Pixate局限的可實現效果，中庸的Form既無法降低溝通成本也不能分享炫耀。

Framer打開就是IDE逼格滿滿，學習起來其實還好啦（還有更簡單的語言么），生成的原型也是真實可交互的！而且學會CoffeeScript相當於入門了JS，不像其他工具那樣沒有復用性，當然也可以和小夥伴們炫耀老紙也是寫過代碼的人了呢~

But長期看來，Framer問題在於目標用戶群太窄。
動效設計師用工具無非兩個用處，給公司用展示效果+降低溝通成本，給自己用設計Demo+分享到設計平台上炫耀。
出於效率能用CoffeeScript寫動效的人早就用JS寫了，出於設計辛苦寫完了一個屌炸天的動效既不能像Pixate和AE生成視頻分享到Dribbble，也不能像Swift一樣成為一個真正的App，光給公司用的話AE/Pixate比這快十倍。
對於動效設計師來說，一個不能分享到設計平台的原型，有卵用！？
目標用戶估計Framer內部定位在會寫代碼的geek+Designer，但實際上估計只有JS寫的不夠麻溜又有一顆geek心的設計師，實在是太小眾的一批人了（其實俺就是其中一員..）。But再怎麼說也好過奇葩的QC啊~~

Framer 出了很久了，我一直在忍。

「專為設計師打造」，這貨是想瞎了心了么 ???!!!
設計師有幾個會 Javascript 的？她們絕絕絕絕絕大部分看一眼 code 就暈，別說去學資料少又少的 Coffeescript 用它來做交互了。

真心想不通，是Framer不了解自己的用戶是誰，還是國外的設計師都會 code ？

最近QC很火，又有 Facebook Home 團隊給它作宣傳。我追逐了兩天熱潮，乖乖退讓了。QC本身就不是為交互而生，Patch那麼多，學習成本太高了。

還有那些推薦 Swift 的，你們也是夠了...............

是時候祭出大殺器了！

Form：免費，真機展示，訪問硬體，為交互設計而生...
RelativeWave
看完覺得好，記得回來點贊。

-----2015年1月27號更新--------
Pixate：更輕量但同樣酷炫的交互製作工具
話說現在有免費計划了呢！！！
The Next Generation of Mobile Interaction Design

-----2015年3月30號更新--------
Pixate 的幾個Demo很精彩，尤其是 Yahoo! News Digest
http://www.pixate.com/education/demos/
最近嘗試了 Facebook 的 Origami，效果不錯。新版的 Origami 降低了QC的學習曲線，貌似還能生成Andorid、iOS、Web 代碼。
Origami — Design Prototyping

難度曲線：Pixate &< Facebook Origami &< Form &< Framer
製作效率：Pixate &< Facebook Origami, Form, Framer
通用性：Pixate、Framer跨平台，Form即將跨平台（現僅支持 iOS，但已被 Google 收購）。Origami 由於基於 QC，僅支持Mac。
加分項：Origami 可以導出代碼（可用性未驗證），Form 可以訪問手機硬體（攝像頭、重力感應...）

我猜你可能是想做 idea 的展示（包括交互動畫的那種），但從長遠來看Framer 可能不是最好的選擇。

你選擇的工具應該可以成為開發環節中的一環。比如前期在手機上展示，後期直接給程序員。

App 一旦進入製作環節基本上就和設計師沒什麼關係了，程序員會投入絕大部分的精力實現基本的功能，而你錦上添花的 animation 很可能因為項目周期沒辦法實現。

學習 Swift，作為設計師你完成完成 UI 和 animation（你擅長的部分），給程序員（很好的銜接），讓程序員來做剩下的部分（他們擅長的部分）。

對比一下相關的工具：
Origami：學習曲線較陡，沒辦法在手機上展示。
Framer：可以在手機上展示，但是沒辦法直接應用到原生 app 中。
Xcode（Swift）：Best。

部分觀點和內容來自於：https://designcode.io/swift-design

很簡單，買正式版本之後每天按照官網上的sample練習。沒有所謂的「快速入門」，天下武功唯練不破。

補充一下如何在Windows下使用 Framer 和相關的問題

適合懂一點代碼，從事UI或者UX工作的人。

原文：Using Framer on Windows with Atom

中文翻譯（轉自leadream的簡書）：[Framer教程]在Windows下如何使用Framer？

請先按照上面的教程安裝Atom和相關插件，如果你在安裝插件包時遇到問題請看下面：

如果你按照上面的教程成功安裝並已開始使用，一切正常那就不用看這部分了，但是如果在給Atom安裝Packages（插件包）的時候出錯了

Installing 「coffee-compile@0.25.0」 failed.Show output…，類似這樣

可以參考下面的方法解決：

一、

安裝 Node.js，然後以管理員身份運行Atom，一般應該就可以了。如果還不行則可能是網路問題Atom無法下載插件，需要翻牆或者按照下面的操作。

二、

1.到Github上搜索插件然後下載，下面是教程中用到的兩個插件：

atom-coffee-compile

atom-html-preview

2.將下載的zip文件解壓到插件安裝目錄中。插件安裝目錄可以在下圖位置查看，我是 C:UsersAdministrator.atompackages

完成後packages文件夾中應該是這樣的

3.以管理員身份運行 cmd。cd 到插件包目錄，執行 npm install 安裝即可，這裡以 coffee compile 為例子

安裝完成後再打開 Atom，coffee compile 已經安裝好了。

但是點開之後發現沒有 Settings，只有個 README 。這跟教程裡面不一樣

如下圖，教程中是有個 Settings 選項欄可以設置每次保存文件的時候自動編譯，不用預覽的。

可能是因為安裝方式不同吧。

由於如果不做這個設置的話，每次保存 coffee 文件都會彈出一個叫 compiled xxx 的 js 文件，然後要手動將這個文件另存為目標的 js 文件，非常麻煩，所以一定要弄好。

我的解決方法是先把插件卸掉，然後在插件包里找到設置文件，如下圖：

修改裡面的 compile on save without preview 的默認值為 true ：

保存之後再重新把插件安裝回去就好了。

5.另一個插件 html-preview 的安裝方式一樣

後面就可以回到原來的教程，下載 Framer.js 的模板項目開始編寫你自己的作品。

學一個工具最好的方法就是去用它~
剛剛用framer做了一個小效果，順便介紹了一下怎麼學和怎麼做：用js寫交互-framerjs初入門

創了一個framer js 的qq群：327358496，人不多才幾個，希望有興趣的朋友加進來一起交流學習！！

對於優秀的設計師來說學習些script是很簡單的事情，拖拽的界面和內置的設定實際上會限制他們的想法，這個貌似目前並不是給初學者的工具。。。

大部分回答都是針對不會代碼的設計師如何入門，作為一個懂前端的設計師試用framer一個下午導入以前的設計稿做了一個點擊舵式按鈕彈出操作的動效，發現對本身懂代碼的人來說容易坑的可能是coffeescript，這個相對於js來說更人性化的語言在理解上無疑更直觀，但對換行空格之類的嚴謹性要求很高。

由於doc里也找不到條件判斷的寫法，後來在官網Guides里不太起眼的地方才找到programming guide，按著上面的指引寫條件判斷，卻不斷各種紅字提示報錯，格式錯誤。後來我乾脆照著官網教程原文直接抄一段試試還是報錯_(:з」∠)_

由於國內framer使用者不多，網上找了很久也找不到問題所在，困擾了我差不多一小時。後來只好按著報錯的提示把程序段移來移去，結果突然間可以了，發現是if條件判斷之後的執行語句換行後一定是要空開兩個空格。

OK！明白了原因後我寫自己的程序去了，一寫，還是報格式錯誤_(:з」∠)_

經過多次試驗之後，終於發現原來在某種情況下，回車在下一行出現的會是類似﹁這樣的符號，在這個情況下就算空格空對了也是會報錯的，應對方法是把這行退格到最頂端，然後打空格直到對應的地方，此時你會發現很暗的灰色﹁提示會變成........，這時的格式才是對的。

以上，給初接觸coffeescript的大家提個醒～

好厲害

framer裡面的代碼通用與xcode么

Framer 最近出新版, 多了Auto Code. 我們社團舉辦Framer團購, 如有興趣者歡迎加入 https://www.facebook.com/groups/softnshareGroupBuy/
可接受財付通. 希望今天晚8:00, 第一批團購可收齊款項, 跟原廠下單. 只給有緣人此機會. 感謝!
如果此Po文不佳, 歡迎砍了. 謝謝!

說實話，Framerjs的入門難度真的算比較低了。我自己是這樣做的，先找某個App具體的一個界面臨摹，多截幾張圖用PS摳成組件，然後擺Layer。之後添加大的動效比如Drag之類的。最後再添加細節動效如按鈕這種。一定要結合官方文檔Framer - Docs，官方文檔是最有用的，有時間的話從頭到尾看一遍，因為真的很少。邊做邊在文檔裡面搜索，很快就可以入門啦。

本人背景：PD

最近的一個DEMO：http://share.framerjs.com/f9h0yqn989y7/ 可以下載下來看源代碼呦～

安利一個自己的極速入門教程：Daily Design 設計師武功之「極速入門Framer」 - Siwen Ren的文章 - 知乎專欄