Figma UI設計技法與思維全解析

01 我們要成為怎樣的設計師
01-01 風口不在，UI 設計師如何自我定位 ……………………………………………… 2
01-02 你為什麼成長那麼慢？什麼是 UI 設計師的核心競爭力 …………………… 6
01-03 UI 設計師必備技能分析 ……………………………………………………………11
01-04 UI 設計師的思維和方法論 …………………………………………………………19

02 從軟體開始放飛自我
02-01 如何選擇適合自己的 UI 設計工具 …………………………………………………25
02-02 Hello 新朋友—初識 Figma ……………………………………………………… 29
02-03 Figma 基礎操作詳解之介面篇 ……………………………………………………34
02-04 Figma 基礎操作詳解之工具篇 ……………………………………………………39
02-05 Figma 基礎操作詳解之功能表篇 ……………………………………………………58
02-06 Figma 中的特色外掛程式 ………………………………………………………………88
02-07 那些讓你大呼好用的 Figma 小技巧 …………………………………………… 103
02-08 介面中的約束與自我調整佈局 …………………………………………………… 108
02-09 Figma 交互功能詳解 …………………………………………………………… 117
02-10 Figma 如何與 Sketch 及 Adobe XD 結合使用 ……………………………… 133
02-11 使用 Figma 完成你的第一頁 UI 設計稿 ……………………………………… 137

03 Figma 協作功能解析
03-01 在 UI 設計工作流中活用 Figma 與產品經理、需求方溝通 …………………148
03-02 UI 設計師如何使用 Figma 與開發工程師無縫對接 ……………………………151
03-03 使用 Figma Mirror 快速預覽 UI 設計稿 ………………………………………155
03-04 挽回你的“第一稿”：Figma 設計稿版本管理功能 …………………………159
03-05 斷網怕不怕？將 Figma 設計稿保存為本地檔 ………………………………161

04 Figma UI 介面設計細節進階
04-01 Figma 圖示設計實戰：線性圖示與 Big Sur 輕擬物圖示繪製 ………………165
04-02 版式設計練習：UI 設計的核心能力 ……………………………………………191
04-03 UI 介面中的金剛區圖示：Tab 欄圖示 …………………………………………198
04-04 啟動頁設計：用戶的第一印象很重要 …………………………………………204
04-05 分清重點：應用首頁設計技巧 …………………………………………………209
04-06 UI 詳情頁設計技巧及設計目標 …………………………………………………214
04-07 用戶個人中心頁設計 ……………………………………………………………219
04-08 萬物即列表：從列表設計強化自己的設計能力 ………………………………221
04-09 插畫：為 UI 介面錦上添花的技巧 ………………………………………………226
04-10 “原子化”設計思路：用 Figma 製作設計規範與元件 ………………………228

05 iOS 與 Android 人機介面設計指南—以不變應萬變的設計秘笈
05-01 日漸融合的 iOS 與 Android 設計 ………………………………………………235
05-02 內容至上：設計原則解析 ………………………………………………………238
05-03 螢幕（密度）精度：開始設計之前首要關注的內容 …………………………241
05-04 從“亮色模式”到“暗黑模式”: iOS 13 新增規範講解 ……………………246
05-05 小組件 Widget 崛起：iOS 14 設計規則解析 …………………………………254

06 從細節到整體：以產品和使用者為核心的設計思路
06-01 以品牌眼光做應用設計及展示 …………………………………………………262
06-02 創造觸動人心的作品展示頁的 13 個步驟 ………………………………………265

07 靜電的 Q&A 時間
08 後記
09 附錄
09-01 優秀 UI 作品展示 …………………………………………………………………281
09-02 本書軟體來源及合作夥伴 ………………………………………………………290
09-03 作者愛用的設計工具推薦 ………………………………………………………291