Framer Studio原型工具

Framer Studio是一款非常適合設(shè)計師們學(xué)習(xí)代碼的原型設(shè)計工具，國內(nèi)很多設(shè)計師們都沒有Coding 基礎(chǔ)，原先想要使用這款純代碼構(gòu)建界面的framer真的比較不現(xiàn)實，現(xiàn)在這款Framer Studio在經(jīng)過一百多次版本更新后，它變得更像 Sketch ，你能直接在里面用鼠標來構(gòu)建你的原型，而且還有了更接近于 Sketch 的那種 artboards 的概念。

Framer編程教學(xué)：

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

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

# Set background colorScreen.backgroundColor ="#333"layerA.onClick(event, layer)->
    layerA.states.switch("stateB")

1、圓點：

代表所屬，可以翻譯成“的”。

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

2、等號：

等號在這里表示賦值，就像數(shù)學(xué)里面的x=1表示把1賦給了x。上述代碼中Screen.backgroundColor=”#333”就把#333這個顏色給了屏幕背景色，即把屏幕背景色設(shè)為#333。

3、井號：

井號表示注釋，就是給代碼做備忘。即使過了很長時間，再通過看注釋也能知道這里的代碼干了什么。而系統(tǒng)是不會處理注釋的，注釋只是給人看的。

4、關(guān)鍵詞：

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

關(guān)鍵詞

5、函數(shù)：

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

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

Framer的函數(shù)表達式一般這么定義：

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

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

6、對象：

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

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

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

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

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

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

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

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

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

初始狀態(tài)：圓形

接下來，我們給它添加一個新的狀態(tài)。

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

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

狀態(tài)B：矩形

不過你看不到它變成正方形，因為默認的狀態(tài)就是開始創(chuàng)建時設(shè)置的圓形那個狀態(tài)。

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

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

layerA所包含的操作onClick(event,layer)，一直監(jiān)聽layerA是否被點擊，當它被點擊時就執(zhí)行l(wèi)ayerA.stas.switch(“stateB”)的操作，即layerA的狀態(tài)轉(zhuǎn)換到stateB。

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

功能特色：

1. 用Framer設(shè)計一切

您需要有潛力設(shè)計全新的東西。 Framer是一個使用代碼做任何事情的設(shè)計工具。先鋒新模式和突破性設(shè)計。找到最好的解決方案，而不只是預(yù)期的解決方案。

2. 為什么要寫代碼？

學(xué)習(xí)代碼可以讓您探索每一個創(chuàng)意概念，而不僅僅是復(fù)制模式。代碼不僅適用于工程師。如果你試試，我們認為你會同意代碼是設(shè)計師可以擁有的最強大的工具之一。

3. 為任何設(shè)備設(shè)計

適用于iOS，Android，Mac OS，Windows和Web。您所需的任何平臺都涵蓋了Framer。從蘋果，谷歌和HTC，微軟和三星的大量顏色中選出超過18種設(shè)備。

4. 設(shè)定你的創(chuàng)造力

成幀器比轉(zhuǎn)換或快速動畫做得更多。使用實際數(shù)據(jù)設(shè)計。構(gòu)建與可定制組件的實際接口。測試并驗證所有創(chuàng)意概念！

Framer Studio for Mac 蘋果移動交互原型設(shè)計工具

5. 成幀器適合您的設(shè)計過程

•直接從Sketch或Photoshop導(dǎo)入圖形。只需重新導(dǎo)入。完成后，通過在移動設(shè)備上分享您的工作來收集反饋。

•動作微調(diào)每個動畫，直到你的圖層和諧地移動。

•觸摸設(shè)置使用組件拖動，滾動或頁面手勢。

•深度響應(yīng)3D空間中的方向更改和傾斜圖層。

•輸入捕捉鍵盤輸入以測試和處理實際的用戶數(shù)據(jù)。

•數(shù)據(jù)拉入配置文件照片或用戶名 - 任何與API。

•自適應(yīng)使響應(yīng)原型適應(yīng)用戶交互。

•導(dǎo)入將您的靜態(tài)設(shè)計變成工作原型。

•使用瀏覽器在任何設(shè)備上預(yù)覽預(yù)覽，使用鏡像

•目前在全屏幕上，為重點的經(jīng)驗。

•分享快速分享一個無障礙用戶測試的URL。