設(shè)計 Design
Design 模式是響應(yīng)式的，并且可以從頭到尾完全在 Framer 中完成。Design 文檔講解了設(shè)計模式的界面和基礎(chǔ)知識。
Framer 的設(shè)計界面和大部分圖形設(shè)計軟件一樣，可以插入形狀、文字等，屬性面板調(diào)節(jié)屬性，也都差不多。
和一般設(shè)計軟件不同的是焦點、布局屬性設(shè)置。因為最終目的是要實現(xiàn)交互設(shè)計的而不只是靜態(tài)的展示，所以對于布局和層級結(jié)構(gòu)有更智能的處理。支持相對定位和相對對齊模式（設(shè)計軟件中的定位和對齊模式就是絕對模式），更多的支持響應(yīng)式設(shè)計。
Design 模式可以獨立使用，也可以和 Code 模式相結(jié)合使用，還可以用云協(xié)作和團(tuán)隊共同工作。具體怎么用看個人習(xí)慣。
畫布
中間一大塊灰色的空白的區(qū)域就是畫布，畫布上可以插入設(shè)備尺寸的畫板。
Framer 設(shè)計模式提供了一個空白畫布，可以直接在畫布上繪制圖像并插入圖標(biāo)，或設(shè)置一系列畫板創(chuàng)建一個多屏幕應(yīng)用程序流程。
不添加畫板直接在畫布上設(shè)計，那這些在畫布上的圖層都是沒有父級的。把圖層放置在x：0和y：0，切換到代碼時，圖層在預(yù)覽窗口的左上角。直接在畫布設(shè)計適和小的交互，復(fù)雜一些的需要用到畫板，既然這樣那就都用畫板吧。
畫板
畫板實際上是自適應(yīng)的，定義好圖層的順序、層級、位置、對齊方式，設(shè)計時需要考慮到其他尺寸的屏幕。
在 Framer 中，畫板不再局限于固定的寬度和高度，他就是個容器，為了方便人類才顯示成這樣的，長啥樣還是看人類選的哪個設(shè)備。而且因為是用的自用布局，所以還是可以隨便該設(shè)備或大小，內(nèi)容會按照適配規(guī)則去自己該去的地方。
點 Framer 左上角的畫板圖標(biāo)就可以插畫板了，快捷鍵A，右側(cè)為顯示常用設(shè)備尺寸供選擇。。。。哎反正跟sketch一樣啦。
圖層
Framer 的塊有各種形狀和大小，甚至更好，圖層響應(yīng)周圍的元素或環(huán)境，直觀的適配響應(yīng)布局和層級結(jié)構(gòu)。
可以使用左側(cè)欄工具包插入矩形、橢圓形、文字、圖像和GIF。或者用快捷鍵：R = 長方形，T=文字。
但圖層在 Framer 中遠(yuǎn)遠(yuǎn)不止只有樣式，前面一直在強(qiáng)調(diào)的響應(yīng)式設(shè)計，除了畫板，圖層也肯定是能支持響應(yīng)式的，所以圖層已經(jīng)被編程為自動調(diào)節(jié)大小、層次結(jié)構(gòu)、邊界之類了。我們在布局部分再深入了解怎么使用。
除了典型的圖層，F(xiàn)ramer 還有支持GIF圖。GIF圖層和其他的圖層一樣并自動播放。
指向目標(biāo) Targeting
把設(shè)計模式中的圖層同步到Code模式中，必須啟用指向。只把需要的圖層同步過去！保持代碼整潔。
只有啟用指向的圖層會在代碼模式中顯示。
在圖層面板上，點擊要開啟指向的圖層右側(cè)指向圖標(biāo)，然后輸入一個本圖層在Code模式中的名稱。指向圖標(biāo)長成一個圓圈一個點的樣子，懸停會顯示文字“Rename to Target”。圖層右側(cè)的預(yù)覽將顯示在代碼標(biāo)簽中調(diào)用的圖層。
已開啟了指向的圖層名稱旁會顯示一個活動目標(biāo)圖層，刪除或重命名目標(biāo)對線，點擊圖層列表中的圖層，選擇“Delete Target” 或 “Rename Target ” 。
布局和層級 Layout & Hierarchy
Framer 滿足響應(yīng)式設(shè)計的需求
把圖層放在畫布里時，F(xiàn)ramer 狠聰明的，能鉤根據(jù)視覺位置來猜測層級結(jié)構(gòu)，這里的順序也會按照圖層在層面板中的順序進(jìn)行說明。
以這種方式，畫布上所有內(nèi)容都將根據(jù)父子關(guān)系進(jìn)行排序。
Framer 以這種方式自動猜測層次結(jié)構(gòu)，所以不必再擔(dān)心分組了。
- 每個畫板都是一個父級
父級和子級 Parent & Child
了解這種關(guān)系很重要。如在矩形的內(nèi)部放置一個圓圈，使得矩形成為圓的父級，圓是矩形的子級，任何放在矩形內(nèi)的圖層都將成為矩形的子級。以這種方式，畫板可以是導(dǎo)航欄的父級，導(dǎo)航欄又可以是多個元素的父級，這些元素包括標(biāo)題文本、電量、菜單圖標(biāo)等。
一旦這種層級關(guān)系成立，子級將始終繼承父級的行為。如果改變父級尺寸或移動，子級圖層也會有一樣的變化。擴(kuò)展多個屏幕尺寸時很方便的。
需要檢查子級圖層之間的對齊和間距？隨時可以在圖層面板中拖動和重新排序圖層來調(diào)整層級結(jié)構(gòu)。右鍵從層級結(jié)構(gòu)中刪除。
自動響應(yīng)布局 Automatic Responsive Layouts
把圖層放在畫板中時，F(xiàn)ramer 自動猜測布局規(guī)則，但需要你在不同的設(shè)備尺寸切換來檢查。關(guān)于怎樣設(shè)置布局規(guī)則在下面的 圖層屬性 中有詳細(xì)說明。
圖層列表的層級結(jié)構(gòu) Layer List Hierarchy
和設(shè)計軟件不同，F(xiàn)ramer 的設(shè)計模式不對圖層分組。而是用上面說到的層級關(guān)系把圖層鏈接在一起。相互見的層級關(guān)系體現(xiàn)在圖層列表中。子級嵌在父級內(nèi)在設(shè)計響應(yīng)式布局設(shè)時更直觀。
屬性 Properties
圖層元素樣式，大小、半徑、填充、陰影、不透明度等。對齊工具和實時模擬準(zhǔn)確的鎖定和解鎖圖層。
屬性面板位于畫布右側(cè)，和設(shè)計軟件一樣，包含選中圖層所有屬性和工具。
畫板屬性 Artboard Properties
畫板屬性：填充顏色、大小、位置。要檢查畫板的響應(yīng)是否理想，選中畫板切換設(shè)備。
圖層屬性 Layer Properties
圖層列表中選擇一個或多個圖層查看圖層的屬性，或直接在畫布上高亮顯示。Framer 的圖層屬性包含一般設(shè)計軟件的圖層屬性，以及其他一些圖層屬性，如單個邊框半徑。
Framer 能根據(jù)圖層的代銷和位置控制圖層行為，在下面的內(nèi)容中將詳細(xì)介紹每個高級功能，正確的使用這些功能可以超出想象力的強(qiáng)大。
圖層定位 Layer Positioning
把新的圖層放在其他圖層上時(新圖層就是其他圖層的子級了)，F(xiàn)ramer 可以自動識別位置并智能定位這個圖層相對于父級或畫板的錨點。這個功能提高了典型設(shè)計工作的流程和效率，如果需喲隨時更改錨點，可以用屬性面板中的定位工具手動更改（跟sketch和Hype中定位的差不多）。
如，在選項卡欄（父級）右側(cè)放了一個菜單欄圖層（子），F(xiàn)ramer 自動猜測菜單欄應(yīng)該相對于選項卡欄對齊。
調(diào)整圖層尺寸 Layer Sizing
Framer 自動調(diào)整子級大小，以模擬父級的調(diào)整。
剪切蒙版圖層 Layer Clipping
由于 Framer 是用層級關(guān)系而不是組，裁剪蒙版的處理方式有些不一樣。需要給圖層蒙版時，把子級放在父級的頂部，選中父級圖層，在屬性面板點擊剪輯。
文本對齊屬性 Text Alignment Properties
文本被定義為有一些智能屬性的圖層，文本將根據(jù)放在父級的位置進(jìn)行邏輯對齊。
如，放在導(dǎo)航欄左側(cè)的文本圖層將立即對齊并錨定在那里，不管父級如何調(diào)整大小或縮放。
文本圖層的屬性可以隨時在屬性面板中調(diào)整。
調(diào)整文字大小 Resizing Text
可以更改文字和圖層本身的大小，調(diào)整文本字段的大小將調(diào)整圖層的約束大小。
附件功能 Additional Features
本節(jié)介紹設(shè)計模式中其他工具，可以在圖層列表、畫布、畫板上右鍵打開這些功能入口。
Forward & Backward
快速給圖層結(jié)構(gòu)排序。選中圖層點擊 Forward 向上移動，Backward向下移動，向后移動圖層時此圖層的子級也會一起移動。
重復(fù) Duplicate
把選中元素復(fù)制一個到畫布上，包含屬性和子級。復(fù)制的畫板放在原來的畫板右側(cè)，復(fù)制的圖層堆在原來的圖層上。
刪除 Delete
刪除選中的圖層或畫板，包括子級。
從層級結(jié)構(gòu)中刪除 Delete from Hierarchy
要刪除父級保留子級，選中父級右鍵點擊 “Delete from Hierarchy” ，父級被刪除，子級里的圖層還在，但是變成了和原來父級同級的圖層。
添加父級 Add Parent
選中兩個或以上圖層，右鍵點擊“Add Parent”，將選中的圖層組合在一起，并嵌在一個看不見的父級下。使用自動響應(yīng)布局規(guī)則，這個兩個圖層將表現(xiàn)為單個實體，調(diào)父級大小不影響子級大小。
快捷鍵 Shortcuts
| 快捷鍵 | 工具 Tools | 快捷鍵 | 畫布 Canvas |
|---|---|---|---|
| A | 畫板d | Cmd 2 | 切換到代碼模式 |
| R | 矩形 | Cmd + | 放大 |
| O | 橢圓 | Cmd - | 縮小 |
| T | 文字 | Cmd 0 | 實際尺寸 |
| Z | 縮放 | Cmd 1 | 畫布居中 |
| - | - | 空格 拖 | ？ |
編輯 Editing
| 快捷鍵 | 名稱 | 快捷鍵 | 名稱 |
|---|---|---|---|
| Cmd 箭頭 | 對象大小 | Alt 拖 | 重復(fù) |
| Shift Cmd 箭頭 | 以單位10縮放 | Alt Cmd C | 復(fù)制樣式 |
| 0 - 9 | 改不透明度 | Alt Cmd V | 粘貼樣式 |
| Alt | 顯示距離 | Control C | 吸取顏色 |
| Cmd D | 重復(fù) | Cmd A | 選中所有圖層 |
排序 Arranging
| 快捷鍵 | 名稱 | 快捷鍵 | 名稱 |
|---|---|---|---|
| Alt Cmd ▲ | 上一層 | Alt Center | 插入父級（組） |
| Alt Cmd ▼ | 下一層 | Alt Del | 從結(jié)構(gòu)刪除 |
| Cmd ; | 隱藏 | Cmd L | 鎖定選中 |
文本類型 Type
| 快捷鍵 | 名稱 | 快捷鍵 | 名稱 |
|---|---|---|---|
| Cmd B | 加粗 | Cmd I | 斜體 |
| Cmd U | 下劃線 | Cmd T | 更換字體 |
導(dǎo)入 Importing
支持從Sketch、PS、Figma導(dǎo)入設(shè)計。
目前支持將設(shè)計導(dǎo)入代碼模式中設(shè)置交互和動畫。
切換到代碼模式，打開設(shè)計文件，點擊 Framer 左下角的 的Import按鈕，然后會彈出一個窗口，選擇要導(dǎo)入哪個文件，選擇設(shè)計倍數(shù)。
選擇圖層 Select Layers
Framer 把設(shè)計文件中所有圖層組轉(zhuǎn)換為 Frame 中的圖層組。在 Sketch 中給需要的圖層編好組，在Framer 中通過查找組的名稱選擇圖層（sketch 中沒有包含在組內(nèi)的圖層不到導(dǎo)入到 Framer，也就是說 Framer 只能識別到組及組內(nèi)內(nèi)容，不能識別到單獨的圖層 ）。
導(dǎo)入成功后代碼編輯器會自動添加下面的代碼：
# 導(dǎo)了個叫 "design" 的sketch文件
sketch = Framer.Importer.load("imported/design@1x")
然后會加載所以的圖層，默認(rèn)情況下，文件以導(dǎo)入的應(yīng)用程序命名，也可以重命名文件方面后面引用。
要選中已重命名為 layerA的圖層，輸入：
# 導(dǎo)了個叫 "design" 的sketch文件
sketch = Framer.Importer.load("imported/design@1x")
# 設(shè)置圖層layerA的不透明度為50%
sketch.layerA.opacity = 0.5
放在圖層組里的圖層是子級圖層，在下面的例子中，該組有連個子級，子級可以被直接選中，不需要考慮層次結(jié)構(gòu)。
如果用的是Sketch，且不希望在 Framer 中選中子級，可以展平該組。
在組的名稱后添加 * ，這個組就會變成一個單獨的沒有子級的圖層， 要完全排除組，在名稱后添加 -。
選中多個圖層 Select Multiple Layers
選中多個圖層用于一個動畫要同時控制幾個圖層，或隱藏一個圖層組。
使用 for-loop，選擇所有導(dǎo)入的圖層或特定的圖層。
