原文鏈接：https://blog.framer.com/new-to-framer-just-3-things-to-get-you-started-47397f27c71e?
Google、Facebook、Twitter、Dropbox等很多公司在設(shè)計(jì)階段會制作可交互原型，不僅因?yàn)樗梢詮浹a(bǔ)我們在設(shè)計(jì)過程中容易忽略的問題：時間，還有其它很多理由值得我們這樣做。
在制作可交互原型的時候，有很多工具可供選擇。如果你是程序員，或者熟練掌握任意一種編程語言，那么你選擇的范圍將會更廣。但如果你只使用Photoshop或者Keynote這種所見即所得的工具，F(xiàn)ramer將會成為你的一大神器！
我身邊有很多設(shè)計(jì)師嘗試過學(xué)習(xí)Framer，但都無疾而終。他們認(rèn)為自己缺乏編程經(jīng)驗(yàn)，所以很難學(xué)會。從某種程度上說，我可以理解這種心情。但我認(rèn)為阻礙他們的不是編程經(jīng)驗(yàn)，而是心態(tài)。其實(shí)學(xué)會Framer并不難，只不過因?yàn)樗吧?，所以顯得格外困難罷了。
Framer的出現(xiàn)可不是為了折磨我們，而是為了讓設(shè)計(jì)變得更加容易。如果你剛剛開始學(xué)習(xí)Framer，或者曾經(jīng)放棄過，那么這篇文章就是為你量身定制。接下來我會介紹三個法則，幫助你快速入門。
第一步：預(yù)備知識
在介紹這三個法則之前，我希望帶大家了解一些編程語言的基本知識。Framer使用的語言是Coffeescript，它是一種簡化版的JavaScript (JS)。我不敢說它很好學(xué)，但學(xué)了它一定很有用，因?yàn)镴S是世界上應(yīng)用最廣泛的編程語言之一，所以了解這些知識在其它地方也會有所幫助。
接下來我將會介紹Coffescript的幾個基本知識點(diǎn)，如果你對編程語言已經(jīng)非常熟悉，可以直接跳過這個部分。
賦值
在編程語言中，“=”的意思不是相等，而是賦值?！?”右邊的值將會被賦給左邊，例如：
number = 12
執(zhí)行這行操作后，“number”的值將會變成12。如果將其它值賦給“number”，比如令number=0.1，那么“number”的值將會變成0.1。
變量
在上面這個例子中，你可能會好奇“number”到底是什么——它被稱作變量。在JS等大多數(shù)編程語言中，當(dāng)使用一個變量之前，我們需要事先對它進(jìn)行“聲明”（比如var number = 12或者int number = 12）。但在使用Coffeescript編程時，你可以隨時命名并使用一個新的變量。唯一需要注意的是，變量的名稱不能以數(shù)字開頭，比如“2nd”。
Coffeescript和其它編程語言還有一點(diǎn)不同，它的變量不需要被定義成某種固定的類型（比如整數(shù)，浮點(diǎn)數(shù)，字符串，數(shù)組，對象等等）。這意味著你可以隨意對變量進(jìn)行賦值，比如：
opacityValue = 1????#整數(shù)類型
scaleValue = 1.2????#浮點(diǎn)類型
howOld = "I am 12."????#字符串類型
點(diǎn)
如果你將Sketch文件導(dǎo)入Framer Studio，可以看到類似下面的一行代碼。在稍后的章節(jié)中我將會詳細(xì)介紹導(dǎo)入功能。
example = Framer.Importer.load("imported/example@2x")
你可以將這行代碼中的“.”想象成連接符，它可以連接導(dǎo)入文件的名稱"example"（即變量）以及你在Sketch中建立的任一圖層。例如，你想指定上圖中的“circles”這個圖層，或改變它的屬性，你可以這樣寫：
example.circles
這并不是一個完整的語句，運(yùn)行它會引起錯誤。你應(yīng)該使用“.”來指定屬性，并進(jìn)行相應(yīng)的賦值。你可以認(rèn)為在Framer中，每個圖層的屬性都可以通過“.”來指定，而且無需聲明這一圖層所在的層級，你可以直接指定任一級別的圖層。例如：
example.circles.scale = 1.2
example.circle1.opacity = 0.5
example.circle1.rotation = 90
# 透明度opacity和旋轉(zhuǎn)角度rotation是circle1這個圖層的屬性
# 你不需要按照Sketch中的嵌套關(guān)系指定圖層，比如: example.circles.circle1
縮進(jìn)
Coffescript不像JS之類的其它語言，使用大括號“{”和“}”來表現(xiàn)程序的結(jié)構(gòu)，而是通過縮進(jìn)來進(jìn)行體現(xiàn)。每一個存在縮進(jìn)的行都屬于一個級別更高（縮進(jìn)更少）的行。
function = ->
????layer.animate
????????properties:
????????????opacity: 1
????????????rotation: 90
# layer.animate屬于function，properties:屬于layer.animate
好了，就這些！
當(dāng)然，上面這些內(nèi)容遠(yuǎn)遠(yuǎn)不夠，你需要學(xué)習(xí)的還有很多。但我相信這些知識已經(jīng)足夠讓你實(shí)現(xiàn)很多變換和動畫效果了。接下來你將看到它們是如何實(shí)現(xiàn)的。
敬請期待：
寫給Framer新手：三步教你快速入門（2）
寫給Framer新手：三步教你快速入門（3）
