Figma+Framer打造更好的交互設(shè)計(jì) 第　1章 初識(shí)Figma 1.1　開(kāi)啟Figma之旅/11
1.1.1 Figma介紹/11
1.1.2 創(chuàng)建Figma賬戶/12
1.1.3 登錄Figma/14
1.1.4 下載與安裝Figma/14
1.1.5 給手機(jī)安裝Figma Mirror App/16
1.1.6 使用Figma Mirror App預(yù)覽設(shè)計(jì)文件和原型/17 1.2　你是這樣的Figma/19
1.2.1 編輯器介紹/19
1.2.2 創(chuàng)建團(tuán)隊(duì)/24
1.2.3 新建項(xiàng)目/26
1.2.4 新建文件/27
1.2.5 導(dǎo)入Sketch文件/29
1.2.6 將文件導(dǎo)入Figma/30
1.2.7 添加/ 顯示評(píng)論/31
1.2.8 分享設(shè)計(jì)文件和原型/31
1.2.9 合作設(shè)計(jì)/33
1.2.10 團(tuán)隊(duì)資源庫(kù)/33
練習(xí)： 在“Design System”項(xiàng)目中創(chuàng)建一個(gè)名為“UI Kit”的文件/34 第　2章 Figma基礎(chǔ) 2.1　文件瀏覽器/36
2.1.1 了解文件瀏覽器/36
2.1.2 查看文件/38
2.1.3 管理最近瀏覽的文件/39
2.1.4 在草稿、項(xiàng)目和賬戶中移動(dòng)文件/40 2.2　關(guān)于文件的那些事兒/40
2.2.1 Figma中的文件/41
2.2.2 Figma中的頁(yè)面/41
2.2.3 添加和管理頁(yè)面/42
2.2.4 給文件設(shè)置封面/44
2.2.5 修改文件權(quán)限/45
2.2.6 刪除文件/46
2.2.7 恢復(fù)已刪除的文件/46
2.2.8 版本記錄/47 2.3　形狀和工具/48
2.3.1 Figma中的畫框/48
2.3.2 組/51
2.3.3 形狀工具/51
2.3.4 矢量網(wǎng)絡(luò)/57
2.3.5 編輯對(duì)象/58
2.3.6 使用縮放工具調(diào)整對(duì)象大小/59
2.3.7 將參考線添加到畫布或畫框/60
2.3.8 布爾運(yùn)算/61
實(shí)戰(zhàn)：對(duì)兩個(gè)矩形分別進(jìn)行5種布爾運(yùn)算/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
實(shí)戰(zhàn)：制作一個(gè)帶有背景模糊效果的iPhone 8導(dǎo)航欄/73
2.4.6 混合模式/74
2.4.7 約束/75
2.4.8 布局網(wǎng)格/78
2.4.9 約束與布局網(wǎng)格的結(jié)合使用/83
實(shí)戰(zhàn)：給移動(dòng)端的頂層畫框設(shè)置布局網(wǎng)格/84 2.5　顏色/85
2.5.1 配置顏色/85
2.5.2 查看和調(diào)整顏色/86
2.5.3 顏色吸取工具/87 2.6　文本/88
2.6.1 文本屬性/88
2.6.2 美化文本/93
2.6.3 給文本添加鏈接、項(xiàng)目符號(hào)、圖標(biāo)字體/94
2.6.4 啟用本地字體/98
2.6.5 管理缺少的字體/98
2.6.6 將文本轉(zhuǎn)換為矢量路徑/99 2.7　圖片/101
2.7.1 添加圖片/101
2.7.2 將GIF圖片添加到原型/103
2.7.3 批量添加圖片/103
2.7.4 裁剪圖片/105
2.7.5 調(diào)整圖片屬性/105 2.8　排版/111
2.8.1 選擇圖層或?qū)ο?111
2.8.2 利用圖層順序調(diào)整圖層的縱向位置/113
2.8.3 對(duì)齊/114
2.8.4 整理/115
2.8.5 調(diào)整對(duì)象的位置和尺寸/115
2.8.6 測(cè)量距離/117
2.8.7 對(duì)象之間的關(guān)系/118
2.8.8 使用智能選擇排列對(duì)象/119
2.8.9 使用自動(dòng)布局創(chuàng)建動(dòng)態(tài)框架/122 第3章　Figma進(jìn)階 3.1　樣式/130
3.1.1 了解樣式/130
3.1.2 創(chuàng)建顏色、文本、效果和網(wǎng)格樣式/130
3.1.3 將樣式應(yīng)用到對(duì)象上/131
3.1.4 管理和共享樣式/133
實(shí)戰(zhàn)：創(chuàng)建帶有文字、顏色、效果和網(wǎng)格樣式的文件，并發(fā)布到團(tuán)隊(duì)組件庫(kù)/139 3.2　組件和變體/140
3.2.1 創(chuàng)建組件/141
實(shí)戰(zhàn)：創(chuàng)建“單選框”組件/143
3.2.2 創(chuàng)建變體/144
3.2.3 命名和整理組件/155
3.2.4 創(chuàng)建組件的實(shí)例/156
3.2.5 切換組件的實(shí)例/157
3.2.6 組件和實(shí)例之間的“秘密”/159 3.3　原型/161
3.3.1 緩動(dòng)/161
3.3.2 基礎(chǔ)原型/164
3.3.3 設(shè)置展示原型的設(shè)備和起點(diǎn)/166
3.3.4 觸發(fā)/168
3.3.5 動(dòng)作/170
3.3.6 動(dòng)畫/171
3.3.7 構(gòu)建完善的交互原型/172
3.3.8 固定滾動(dòng)位置/175
3.3.9 溢出行為/176
3.3.10 智能動(dòng)畫/179
3.3.11 疊加原型/182
實(shí)戰(zhàn)：創(chuàng)建疊加層/185
3.3.12 分享原型/185
3.3.13 在移動(dòng)設(shè)備上查看原型/186
3.3.14 給原型添加評(píng)論/186 3.4　導(dǎo)出/188
3.4.1 導(dǎo)出PNG、JPG、SVG或PDF文件/188
3.4.2 圖標(biāo)切片的命名規(guī)則推薦/191 第4章　社區(qū) 4.1　插件/194
4.1.1 查找并安裝插件/194
4.1.2 在編輯器中使用插件/196
4.1.3 管理插件/198 4.2　社區(qū)/200
4.2.1 瀏覽社區(qū)/200
4.2.2 使用社區(qū)文件/202
4.2.3 構(gòu)建自己的社區(qū)頁(yè)面/203 第5章　團(tuán)隊(duì)協(xié)作 5.1　團(tuán)隊(duì)組件庫(kù)/207
5.1.1 將組件和樣式發(fā)布到團(tuán)隊(duì)組件庫(kù)/207
5.1.2 從團(tuán)隊(duì)組件庫(kù)中刪除文件/209
5.1.3 從已發(fā)布的團(tuán)隊(duì)組件庫(kù)中刪除部分樣式和組件/210 5.2　檢查面板的使用/211
5.2.1 了解檢查面板/212
5.2.2 觀察模式/214 第6章　使用Figma設(shè)計(jì)頁(yè)面 6.1　基礎(chǔ)樣式和約束規(guī)則/216
6.1.1 布局網(wǎng)格樣式規(guī)范/216
6.1.2 文本樣式規(guī)范/217
6.1.3 顏色樣式規(guī)范/219
6.1.4 效果樣式規(guī)范/221
6.1.5 間距規(guī)范/223
6.1.6 邊界半徑規(guī)范/224
6.1.7 線條規(guī)范/225
6.1.8 圖標(biāo)規(guī)范/226 6.2　基礎(chǔ)組件/227
6.2.1 按鈕變體組件/228
6.2.2 輸入框變體組件/228
6.2.3 文字組合變體組件/229
6.2.4 卡片變體組件/230
6.2.5 提示變體組件/232
6.2.6 導(dǎo)航欄/232
6.2.7 產(chǎn)品Logo/234 第7章　Framer應(yīng)該這樣用 7.1　儀表盤/236
7.1.1 儀表盤介紹/236
7.1.2 創(chuàng)建新的Framer項(xiàng)目/237
7.1.3 將Figma、Sketch或Framer Desktop文件導(dǎo)入Framer/238
7.1.4 草稿和最近瀏覽的作用/240
7.1.5 項(xiàng)目示例和教程講解/241
7.1.6 善用存檔/242
7.1.7 Framer的團(tuán)隊(duì)功能應(yīng)該怎樣使用/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 滾動(dòng)圖層/270
7.3.4 翻頁(yè)圖層/271
7.3.5 圖形圖層/272 7.4　開(kāi)始設(shè)計(jì)/273
7.4.1 默認(rèn)組件/273
7.4.2 配套包/281
7.4.3 分享顏色/283
7.4.4 模板/284
7.4.5 響應(yīng)式設(shè)計(jì)/285
7.4.6 繪圖模式/286
7.4.7 替換/287 7.5　使用Framer制作原型/288
7.5.1 預(yù)覽/288
7.5.2 動(dòng)畫編輯器/290
7.5.3 自動(dòng)過(guò)渡/292
7.5.4 魔術(shù)動(dòng)畫/293
7.5.5 組件畫布/293
7.5.6 在組件畫布中使用變量和變體/294
7.5.7 變量/295
7.5.8 變體/297 Figma快捷鍵/299 Framer快捷鍵/303