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

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

《Figma+Framer 打造更好的互動設計》是2022年人民郵電出版社出版的圖書,作者是武斌。

基本介紹

  • 中文名:Figma+Framer 打造更好的互動設計
  • 作者:武斌
  • 出版時間:2022年11月
  • 出版社:人民郵電出版社
  • ISBN:9787115583611
  • 類別:圖書>計算機/網路>圖形圖像 多媒體>其他
  • 開本:128 開
  • 裝幀:平裝
內容簡介,圖書目錄,作者簡介,

內容簡介

本書對Figma和Framer的使用方法進行了詳細講解,為讀者提供詳細的圖文說明,包括軟體基礎操作、使用團隊組件庫和界面設計等。本書第1、2、3章講解Figma的使用,第4、5章講解Figma社區和團隊協作,第6章講解界面設計,第7章講解Framer的使用方法。本書附贈案例學習檔案和線上視頻,便於讀者學習使用。
本書適合UI/UX設計師、設計團隊和計畫進入界面設計行業的讀者學習與參考。

圖書目錄

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

作者簡介

武斌,美術學專業畢業,法學雙學位,擁有五年網際網路設計經驗,兩年區塊鏈交易所設計經驗,一年設計團隊管理經驗目前在一家海外交易所做 UX Design相關工作,使用Figma完成網站和App相關的設計,有自己的個人網站。

相關詞條

熱門詞條

聯絡我們