Figma + Framer 打造更好的交互設計

武斌，美术学专业毕业，法学双学位，拥有五年互联网设计经验，两年区块链交易所设计经验，一年设计团队管理经验目前在一家海外交易所做 UX Design相关工作，使用Figma完成网站和App相关的设计，有自己的个人网站。

Figma+Framer打造更好的交互設計

 

第　1章 初識Figma

1.1　開啟Figma之旅/11

　1.1.1 Figma介紹/11

　1.1.2 創建Figma賬戶/12

　1.1.3 登錄Figma/14

　1.1.4 下載與安裝Figma/14

　1.1.5 給手機安裝Figma Mirror App/16

　1.1.6 使用Figma Mirror App預覽設計文件和原型/17

1.2　你是這樣的Figma/19

　1.2.1 編輯器介紹/19

　1.2.2 創建團隊/24

　1.2.3 新建項目/26

　1.2.4 新建文件/27

　1.2.5 導入Sketch文件/29

　1.2.6 將文件導入Figma/30

　1.2.7 添加/ 顯示評論/31

　1.2.8 分享設計文件和原型/31

　1.2.9 合作設計/33

　1.2.10 團隊資源庫/33

　練習： 在“Design System”項目中創建一個名為“UI Kit”的文件/34

 

第　2章 Figma基礎

2.1　文件瀏覽器/36

　2.1.1 瞭解文件瀏覽器/36

　2.1.2 查看文件/38

　2.1.3 管理最近瀏覽的文件/39

　2.1.4 在草稿、項目和賬戶中移動文件/40

2.2　關於文件的那些事兒/40

　2.2.1 Figma中的文件/41

　2.2.2 Figma中的頁面/41

　2.2.3 添加和管理頁面/42

　2.2.4 給文件設置封面/44

　2.2.5 修改文件權限/45

　2.2.6 刪除文件/46

　2.2.7 恢復已刪除的文件/46

　2.2.8 版本記錄/47

2.3　形狀和工具/48

　2.3.1 Figma中的畫框/48

　2.3.2 組/51

　2.3.3 形狀工具/51

　2.3.4 矢量網絡/57

　2.3.5 編輯對象/58

　2.3.6 使用縮放工具調整對象大小/59

　2.3.7 將參考線添加到畫布或畫框/60

　2.3.8 布爾運算/61

　實戰：對兩個矩形分別進行5種布爾運算/62

　2.3.9 蒙版遮罩/63

2.4　圖層/64

　2.4.1 批量重命名圖層/64

　2.4.2 鎖定和解鎖圖層/66

　2.4.3 顯示和隱藏圖層/67

　2.4.4 填充/68

　2.4.5 陰影和模糊/70

　實戰：製作一個帶有背景模糊效果的iPhone 8導航欄/73

　2.4.6 混合模式/74

　2.4.7 約束/75

　2.4.8 佈局網格/78

　2.4.9 約束與佈局網格的結合使用/83

　實戰：給移動端的頂層畫框設置佈局網格/84

2.5　顏色/85

　2.5.1 配置顏色/85

　2.5.2 查看和調整顏色/86

　2.5.3 顏色吸取工具/87

2.6　文本/88

　2.6.1 文本屬性/88

　2.6.2 美化文本/93

　2.6.3 給文本添加鏈接、項目符號、圖標字體/94

　2.6.4 啟用本地字體/98

　2.6.5 管理缺少的字體/98

　2.6.6 將文本轉換為矢量路徑/99

2.7　圖片/101

　2.7.1 添加圖片/101

　2.7.2 將GIF圖片添加到原型/103

　2.7.3 批量添加圖片/103

　2.7.4 裁剪圖片/105

　2.7.5 調整圖片屬性/105

2.8　排版/111

　2.8.1 選擇圖層或對象/111

　2.8.2 利用圖層順序調整圖層的縱向位置/113

　2.8.3 對齊/114

　2.8.4 整理/115

　2.8.5 調整對象的位置和尺寸/115

　2.8.6 測量距離/117

　2.8.7 對象之間的關系/118

　2.8.8 使用智能選擇排列對象/119

　2.8.9 使用自動佈局創建動態框架/122

 

第3章　Figma進階

3.1　樣式/130

　3.1.1 瞭解樣式/130

　3.1.2 創建顏色、文本、效果和網格樣式/130

　3.1.3 將樣式應用到對象上/131

　3.1.4 管理和共享樣式/133

　實戰：創建帶有文字、顏色、效果和網格樣式的文件，並發布到團隊組件庫/139

3.2　組件和變體/140

　3.2.1 創建組件/141

　實戰：創建“單選框”組件/143

　3.2.2 創建變體/144

　3.2.3 命名和整理組件/155

　3.2.4 創建組件的實例/156

　3.2.5 切換組件的實例/157

　3.2.6 組件和實例之間的“秘密”/159

3.3　原型/161

　3.3.1 緩動/161

　3.3.2 基礎原型/164

　3.3.3 設置展示原型的設備和起點/166

　3.3.4 觸發/168

　3.3.5 動作/170

　3.3.6 動畫/171

　3.3.7 構建完善的交互原型/172

　3.3.8 固定滾動位置/175

　3.3.9 溢出行為/176

　3.3.10 智能動畫/179

　3.3.11 疊加原型/182

　實戰：創建疊加層/185

　3.3.12 分享原型/185

　3.3.13 在移動設備上查看原型/186

　3.3.14 給原型添加評論/186

3.4　導出/188

　3.4.1 導出PNG、JPG、SVG或PDF文件/188

　3.4.2 圖標切片的命名規則推薦/191

 

第4章　社區

4.1　插件/194

　4.1.1 查找並安裝插件/194

　4.1.2 在編輯器中使用插件/196

　4.1.3 管理插件/198

4.2　社區/200

　4.2.1 瀏覽社區/200

　4.2.2 使用社區文件/202

　4.2.3 構建自己的社區頁面/203

 

第5章　團隊協作

5.1　團隊組件庫/207

　5.1.1 將組件和樣式發布到團隊組件庫/207

　5.1.2 從團隊組件庫中刪除文件/209

　5.1.3 從已發布的團隊組件庫中刪除部分樣式和組件/210

5.2　檢查面板的使用/211

　5.2.1 瞭解檢查面板/212

　5.2.2 觀察模式/214

 

第6章　使用Figma設計頁面

6.1　基礎樣式和約束規則/216

　6.1.1 佈局網格樣式規範/216

　6.1.2 文本樣式規範/217

　6.1.3 顏色樣式規範/219

　6.1.4 效果樣式規範/221

　6.1.5 間距規範/223

　6.1.6 邊界半徑規範/224

　6.1.7 線條規範/225

　6.1.8 圖標規範/226

6.2　基礎組件/227

　6.2.1 按鈕變體組件/228

　6.2.2 輸入框變體組件/228

　6.2.3 文字組合變體組件/229

　6.2.4 卡片變體組件/230

　6.2.5 提示變體組件/232

　6.2.6 導航欄/232

　6.2.7 產品Logo/234

 

第7章　Framer應該這樣用

7.1　儀表盤/236

　7.1.1 儀表盤介紹/236

　7.1.2 創建新的Framer項目/237

　7.1.3 將Figma、Sketch或Framer Desktop文件導入Framer/238

　7.1.4 草稿和最近瀏覽的作用/240

　7.1.5 項目示例和教程講解/241

　7.1.6 善用存檔/242

　7.1.7 Framer的團隊功能應該怎樣使用/243

7.2　編輯器/247

　7.2.1 工具欄/248

　7.2.2 畫布/256

　7.2.3 圖層面板/259

　7.2.4 屬性面板/261

7.3　圖層/266

　7.3.1 文本圖層/266

　7.3.2 堆疊圖層/268

　7.3.3 滾動圖層/270

　7.3.4 翻頁圖層/271

　7.3.5 圖形圖層/272

7.4　開始設計/273

　7.4.1 默認組件/273

　7.4.2 配套包/281

　7.4.3 分享顏色/283

　7.4.4 模板/284

　7.4.5 響應式設計/285

　7.4.6 繪圖模式/286

　7.4.7 替換/287

7.5　使用Framer製作原型/288

　7.5.1 預覽/288

　7.5.2 動畫編輯器/290

　7.5.3 自動過渡/292

　7.5.4 魔術動畫/293

　7.5.5 組件畫布/293

　7.5.6 在組件畫布中使用變量和變體/294

　7.5.7 變量/295

　7.5.8 變體/297

 

Figma快捷鍵/299

Framer快捷鍵/303