Framer是什麼
一個製作 iOS， Android 和 Web 應用的原型設計工具。
直接可製作UI介面，並且實現響應式佈局
高保真的原型， 最為接近真實的效果
易於分享， 任何平臺輕鬆檢視
高保真原型的目的
製作原型最重要的目的就是“溝通” ！近年來許多設計流程裡，開始重視”原型製作”的重要性，例如設計思考中，就有特別將”原型製作”當成一個重要環節。透過這些原型，可讓你進行最基礎的想法驗證，然後根據測試結果再來修正你的設計方向。這樣的測試迴圈，可有效降低部分設計錯誤。
要記住不要在原型投入太多精力。 完美不是原型的重點，而是如何透過它得到驗證結果。
Framer 的程式語言（Coffee Script）
Framer整體是架構在JavaScript下。但我們所撰寫的語言則是CoffeeScript，它屬於高階語言的一種，因此它的程式碼是非常接近口語。
但以設計師的角度來看，會建議你不要從CoffeeScript下手來學習。先從理解Framer本身架構，以及它所提供的引數與Function入門比較妥當。
Framer Doc：
http：//
framerjs。com/docs/
中文網（文件同步有一定延遲）
http：//www。
framercn。com/docs
Coffee Script：http：//coffeescript。org
Framer的拓展能力
Framer 支援許多JavaScript 提供的服務， 比如可以接入地圖MapBox等網頁的第三方服務，讓你的原型完整度更高； 當然支援VR原型。
原生互動感受
VR原型
資料折線原型
3D互動原型
遊戲原型
Framer的分享
Framer分享很方便，上傳到Framer的雲平臺。透過連結可以傳送給任何人，他們也可以透過手機或者電腦檢視。同時，平臺支援版本儲存，方便你迭代對互動細節不斷打磨。
如果覺得Framer cloud太慢，可直接上傳公司伺服器，也可隨時分享他人檢視
小試牛刀
光說不練假把式，只有親自體驗才能知道Framer的強大之處。Framer支援匯入第三方sketch和Photoshop等軟體的設計稿。在Framer90版本新增Design模式，也就是我們完全可以不使用第三方軟體，只在framer完成設計圖和一些高保真互動。（案例檔案，末尾進行下載）
這次暫時不會講解如何匯入第三方設計稿，本次只是讓你初步體驗到framer的強大，不要著急，羅馬不是一日建成的。
我們來看看我們第一部分教程要做的效果
Gif效果變慢了，移步這裡體驗
https：//
framer。cloud/pKxzY
Framer中製作Email圖案
切換到Framer的Design模式下，使用方式和sketch，XD等工具如出一轍。我們拆分下郵件結構。
郵件背面和郵件正面包裹我都添加了輕微的陰影，營造一種輕擬物的感覺。
注意
，所有的形狀都請包裹在framer的Frame中，因為這樣你才能在Code介面下去控制他們的屬性和製作動畫（也就是需要一個容器去裝這些元素）
括號的英文就是包括的Frame的名稱，我們來看看圖層結構。整個email我用了一個大的Mail來包裹，CustomDevice就是作為深色的畫板背景。effect圖層是點選的水波紋效果，暫時不要管。
然後，我們在需要做動畫的圖層右鍵新增
Target
，這樣就可以在Code中去呼叫這些圖層去控制它們啦。
把mail，cover 都新增上
Target
。 然後我們切換到code模式下。
可以看到左邊有我們剛剛Target的圖層，它們都高亮顯示，表示我們可以直接透過名稱去控制它們。左下角的Docs是我們經常用的，可以快速去檢視官方文件，當我們遇到問題，可以多閱讀文件很多問題都能解決。
［中文文件（文件同步有一定延遲）］
http：//www。
framercn。com/docs
右邊就是預覽效果視窗啦。 咦？ 為何我郵件是摺疊狀態呢，明明我們在Design模式下是開啟的。
因為我添加了這段程式碼
我們來逐一解釋一下意思哦（開始Code咯，別害怕很簡單的）
cover。originY = 0
cover就是我們之前畫的郵件封口啦，我們透過名字去找到這個圖層。然後帶上一個小點，就是說我們要去控制cover的什麼屬性呢（就是圖層的尺寸，位置，顏色等）。OriginY是什麼呢？
Origin就是指的圖層的變換中心，比如我們進行縮放，旋轉的時候的一個定位中心，OriginX就是橫向中心，OriginY就是垂直中心，看下圖
預設的變換中心是藍色的（OrignX=0。5，OrignY=0。5）這裡我們需要切換到紅色（只需修改originY=0），也就是把cover向下翻折180度，變成關閉狀態。
cover。rotationX = -180
然後以X軸旋轉180度，因為是逆時針所以是負的。
這個時候你會發現cover圖層不見了，為什麼呢？因為我們的空間是三維的，還有Z軸的存在，Framer的翻折之後圖層產生了重疊（預設圖層都在Z軸為o的位置）
cover。z = 1
把cover的z軸設定為1，那它就在其它圖層的上面咯。
mail。y = 0
可以原始檔mail的Frame和mail位置是不同的，mail的座標是相對於mail的Frame的（可以連線買來的Frame就是承載mail的畫板），這裡把
mail。y = 0
就是講mail的Y座標以Frame的座標重置，這樣mail就裝進了郵件中。
隱藏COVER可以看到MAIL被裝了進去
Mail。x = Align。centerMail。y = Align。center（-50）
這兩句程式碼很簡單，Align。center就是相對螢幕居中的意思，這裡設定就可以讓Mail圖示在你任何螢幕尺寸下居中，
Align。center（-50）
就是居中後，座標值減50（因為我們的視覺中心基本都中間靠上，所以我設定垂直距離居中偏上，這都是細節！）
做到這裡，我們的效果應該是這樣子
是不是覺得很難？開始接收陌生的事物都是這樣子的，更重要的是去思考，發現內在規律和聯絡。
本次最後一個知識點，我們新增點選事件，進行點選郵件切換為開啟狀態。
新增程式碼：
Mail。onTap ->
cover。rotationX = 0
cover。z = 0
onTap
就是一個事件，加上
->
。記得它們之間一定要帶有空格，然後在下面寫上事件執行的動作。下面我寫的就是還原我們設計稿中的狀態（即開啟郵件的效果），記住寫在事件裡面的內容一定要換行。就像下面的程式碼被包裹在事件中一樣。
完成上述程式碼後，我們可以看到
附上到目前為止的課程檔案：
連結:https://pan.baidu.com/s/15245oCRP0qSL5L5cd7O2Fg 密碼:w7zf
我們已經實現一個基本的效果了，剩下就是潤色動畫了，目前的知識點已經比較多了，考慮到大家的接受程度，動畫部分將在下一期內容中進行。
教程中肯定沒有寫到所有細節，我希望的是更多的自主探索的學習，當然小有夥伴有問題也可以加我微信，向我提問。也可留言提出建議，畢竟第一次寫教程，我擔心寫得太難。。。
Framer教程系列目前是我的試水文章，如果看的人太少，很可能也會腰斬，如果喜歡，希望不要吝嗇你的贊，給點鼓勵
