Framer 為了方便沒有代碼基礎(chǔ)的用戶，有 Design 模式和 Code 模式。
界面里有什么
Design 模式從左到有四列分別是工具面板、圖層面板、視圖面板、屬性面板：
- 工具：添加形狀、文字，底部有 Material 圖標(biāo)庫；
- 圖層：顯示圖層的層級，拖動圖層更改排序和層級關(guān)系；
- 視圖：編輯和顯示區(qū)域；可以將圖片拖入視圖面板添加圖片，.gif 格式自動播放；
- 屬性：調(diào)整圖層樣式，包含適配方式。
Code 模式從左到右分別是工具面板、圖層面板、代碼編輯器、預(yù)覽窗口：
- 工具：上面是給圖層添加動畫、狀態(tài)、事件、預(yù)設(shè)代碼（Snippet不知道準(zhǔn)確的翻譯是什么），下面是導(dǎo)入設(shè)計(jì)文件、打開官方文檔、打開檢查窗口（跟Chrome的檢查差不多吧）；
- 圖層：顯示 Design 模式中的圖層及在Code模式中添加的圖層；可以在代碼中引用的圖層名稱顯示為白色，不可引用顯示為灰色；Design 模式中的圖層要先 target 到 Code 模式了才能被引用；
- 編輯器：通過編寫代碼的方式添加圖層、設(shè)置圖層屬性、給圖層添加動畫、狀態(tài)、事件等；可以以拖入的方式添加多視頻、音頻；
- 預(yù)覽：查看最終效果，模擬手機(jī)屏幕可以進(jìn)行交互；預(yù)覽可以拖到窗口外成為一個(gè)單獨(dú)的窗口。
開始介紹概念了
Design&Code
Design 模式和設(shè)計(jì)軟件類似，可以添加圖層、更改圖層樣式和屬性、組織層級結(jié)構(gòu)；可以把 Design 模式想象成 Code 的一個(gè)可視化圖層添加工具，Design 模式中能完成的事 Code模式也能完成，而且Code模式中的樣式可以覆蓋 Design 模式中的樣式；給圖層添加動畫、事件只有 Code模式中才有。
1. 相對值
舉個(gè)絕對值例子：
A：x = 100 y = 100
B：x = 200 y = 200
再舉個(gè)相對值例子：
A：居中與屏幕的 x 、y
B：對齊A的左上角
當(dāng)然不是上面例子那樣寫，有標(biāo)準(zhǔn)的格式。甚至還能寫【B的y = 屏幕高度 - A的高度】。其他屬性也可以用絕對值這里不一一例舉。
有相對值是因?yàn)镕ramer支持自適應(yīng)，并且可以根據(jù)圖層的大小和位置智能猜測適配方式。
2. 值單位
主要是 Code 模式用到：
x: 20
height: 100
opacity: 1
rotation: 90
所有的數(shù)字都不用寫單位，由前面的屬性決定。
3. 層級和命名
層級在 Framer 中是一個(gè)很重要的因素，比如一個(gè)卡片上一張圖片一個(gè)icon一個(gè)文字加一個(gè)底色，在設(shè)計(jì)軟件中可以不編組選中全部圖層一起移動，但是在 Framer 中沒有全選好么，只能把他們組織到同一個(gè)父級圖層下。
寫代碼時(shí)通過圖層名稱引用圖層，所以要求準(zhǔn)確的命名，組織好層級結(jié)構(gòu)。
4. 狀態(tài)
一個(gè)圖層從藍(lán)色的方形旋轉(zhuǎn)45度并變成粉色，藍(lán)色時(shí)和粉色時(shí)就是這個(gè)圖層的兩種狀態(tài)。
5. 動畫
從藍(lán)的到粉色的過程就是動畫，F(xiàn)ramer 自動添加過渡動畫。動畫和狀態(tài)是不可分離的。
6. 事件
添加動畫時(shí)動畫會自動播放，如果不需要自動播放則需要定義為點(diǎn)擊圖層后切換狀態(tài)，那“點(diǎn)擊后切換狀態(tài)”就是一個(gè)事件。
小結(jié)
我們生活中使用的APP就是圖層、狀態(tài)、事件組成，需要學(xué)習(xí)的是怎么組織好這些
