動畫柱宦、事件都是添加在圖層上。
有幾種方法添加圖層灭必，從 Design 模式中繪制狞谱、從Code 模式中寫乃摹、導入。
1. Design 模式中繪制
添加
添加方式和設計軟件一樣跟衅。
畫板 Artborad
A
所有的畫板都是一個默認的父級孵睬，畫板內的元素是子級。畫板可以作為一個頁面也可以作為一個元素符號伶跷；Code 中調用圖層時可以同時調用不同畫板中的元素掰读，所以畫板不等于頁面，相當于可視化存放圖層的工具叭莫。矩形 Rectangle
R
矩形工具蹈集，可以設為完全不透明作為熱區(qū)或部件范圍來使用。橢圓形 Oval
O歐
同上雇初。文字 Text
T
文字圖層拢肆。
尺寸
響應式的，Framer 會根據擺放位置和大小自動判斷適配方式靖诗，下例中左右頂邊的長方形是判斷為固定在頂部左右拉伸郭怪，而正方形是判斷為固定在左上角。
也可以手動設置刊橘，在屬性面板 Position 右側的方框更改鄙才。鼠標移到方框內會顯示適配預覽。
層級
一層圖層拖到另外一個圖層的范圍內伤为，自動判斷被包含的那個圖層為子級咒循，一般是小的拖到大的里，小的變成子級绞愚；
想把尺寸超出目標父級尺寸的圖層變成子級叙甸，需要從圖層面板拖。
子級繼承父級的屬性位衩，子級可以被父級形狀剪切裆蒸。
在 Code 模式中尤其需要組織好層級。
應用
需要添加事件糖驴、動畫的圖層要 Target 到 Code模式僚祷。
沒有 target到Code的圖層可以看到圖層結構和名稱，是灰色的贮缕，不能被引用辙谜。
Target 過來了的圖層名稱是白色的，可以被引用感昼。具體用法查看的[動畫]装哆、[事件]。
2. Code 模式
直接寫：
# "圖層名稱" 是 新 圖層
banliA = new layer
= 在代碼中是 “賦值” 的意思蜕琴，把右側的內容賦予給左側的內容萍桌；= 左側的內容叫 “變量”。
給圖層添加屬性
新添加的圖層默認有個樣式凌简，位于左上角的灰色方框上炎。更改樣式也需要自己寫：
# 需要新建圖層，才能給圖層添加樣式
banli = new layer
width: 120
x: 200
backgroundColor: "#95CEEF"
另起一行雏搂，按 Tab 健縮進藕施，表示現在寫的是給圖層 banliA 的屬性。具體有哪些屬性和用法在下一節(jié)[圖層的屬性]凸郑。
圖層類型
- 圖片
給圖層填充圖片和添加其他屬性一樣铅碍，gif 格式的圖片自動播放。
banli = new Layer
image: "image/圖片名稱.gif"
# 其他屬性
自動填充圖片：
# 寫下面那句就可以了
banli = new Layer
image: Utils.randomImage()
- 文字
banli = new Textlayer
text: "文字"
fontSize：18
# 其他屬性繼續(xù)往下寫
視頻线椰、圖片胞谈、音頻可以直接拖到代碼編輯器內添加，拖進去的文件會存到 Framer 文件夾內憨愉；也可以先把素材放到文件夾內再調用烦绳。圖片和視頻放在 “image”文件夾、音頻放在 “sounds” 文件夾配紫。文件不會重復存放径密。
- 視頻
banli = new VideoLayer
video: "image/視頻名稱.mp4"
# 屬性
# 播放視頻，不寫是不會播的
banli.player.play()
- 音頻
# 音頻沒啥屬性
banli = new Audio("sounds/音頻名稱.wav")
# 播放音頻
banli.play()
3. 導入
支持 Sketch躺孝、Figma享扔、PS導入。打開要導入的設計文件植袍，點擊 Code 左下角的 Import 按鈕惧眠，選擇設計文件的倍數。
導入文件后會顯示這樣一段代碼
# Import file "banli"
sketch = Framer.Importer.load("imported/banli@1x", scale: 1)
意思導入來一個叫“banli”的sketch文件于个，默認會把導入的文件按導入軟件命名（如sketch）氛魁，也可以改成其他的名稱
如果需要選中調整某個圖層屬性，需要在前面加上文件名稱：
sketch.layer01.opacity = 0.5
了解更多看 設計 Design 丨Framer 文檔厅篓，翻到最下面的導入秀存。
