UI.UX Design Beginner’s Guide Part 2
大型 PDF 已外部化到 Google Drive： 開啟 PDF。 原始檔對照資訊保存在 repo 根目錄的
external-assets.yml。
後設資料
- 作者：socialMORE (Social More HK)
- 發表日：PDF metadata 顯示建立於 2022-03-21；內文由 socialMORE IG 貼文 #31 / #37 / #43 / #96 / #208 / #211 等整理而成
- 頁數：22（A3 橫式）
- 語言：繁體中文（港式用語，穿插英文工具名與 URL）
- 檔案狀態：本檔約 90 MB，PDF 內含大量案例截圖與資源清單；文字抽取仍有中文編碼問題，本次同樣以 rendered PNG + Tesseract OCR + 視覺校對整理。
一句話濃縮
socialMORE 的 UI/UX 入門下冊，從 Figma 實作教學延伸到 Figma Community、插件、案例庫、mockup、Apple / Google 官方設計資源與各類網站 / App UI 靈感平台，是一份偏「工具箱 + 尋寶地圖」的 UI/UX 新手資源冊。
結構摘要
P.1-P.2 封面與目錄
- Part 2 分成三章：
FIGMA TUTORIAL、UI.UX REFERENCES、RESOURCES & TUTORIALS。 - 與上冊 2026-05-07-SocialMORE-UIUX設計入門-Part01 形成「概念基礎 → 工具實作」的上下冊關係。
P.3-P.7 Figma 精選教學
- 磨砂玻璃效果：用背景圖案、inner shadow、background blur、fill opacity、stroke 等設定做出 frosted glass effect。
- 圖片及文字填充：用 Unsplash 插件快速填入圖片，用 Microsoft Content Reel 生成日期、地址、電郵、姓名等 dummy content；也提醒中文內容庫不足，可自建 content library。
- Smart Animate 滑動效果：以複製 frame、保持同名元素 / 群組、Prototype 設定
On drag+Smart Animate示範滑動原型。 - 7 個 Figma 小技巧：批量圖片匯入、Arc / Ratio 製作扇形和圓環、option 檢查距離、emoji、複製貼上樣式、快速裁剪圖片、remove.bg 插件退地。
- 高質感 Icon：透過線性漸層、內陰影、外陰影、圓角背景與細節高光，製作有立體感的圖形按鈕。
P.8-P.13 UI/UX 參考案例
- 日本網站設計案例庫：S5-Style / 81-web 等平台；重點是可同時看 PC 與手機版、分類、色彩、字型與響應式設計處理。
- UMAMI LAND：Google 互動網站案例；透過 WebGL、遊戲化地圖、徽章蒐集、微互動與導覽介面建立沉浸式體驗。
- 維護頁面案例：maintenance page / under construction page 可以不只是「維修中」，也能透過品牌語氣與視覺創意降低中斷感。
- App UI 靈感平台：Mobbin、UI Movement、Muzli、UI Garage、UI Sources；分別提供真實 App flow、動態設計、分類瀏覽與操作影片。
- UI Design Daily / Ildiko：超過千件免費 UI 素材，包含 source file、配色與 style guide；是初學者學習 UI component 狀態的素材庫。
- 網站設計靈感平台：Convertux、Awwwards、SiteInspire、Dribbble、Behance；涵蓋頁面分類、評分、風格搜尋、社群互動與作品上傳。
P.14-P.15 UI/UX 設計資源
- 官方資源：Apple Design Resources、Material Design Resources、XD Guru。
- 其他平台資源：Freebies UI、UI Store Design、Uplabs。
- Mockup 工具：Mokup Frame、MockUPhone、Facebook Design devices、Mockup.photos、The Mockup Club、Freebiesbug。
- 本段性質是查找入口；未對 Apple HIG 或 Material Design 做深度整理，因此暫不建
Apple-HIG/Material-Design獨立頁。
P.16-P.21 Figma 資源與插件
- Figma Community：官方新功能教學、Smart Animate tutorial、Grads V2、Basil Icons 等。
- Figma 資源整合站：Figma Crush、Figma Finder、Figma Resources。
- 插件安裝與管理：Community 的 plugin 分類、頂部工具列、個人檔案中的 Plugins 管理入口。
- Icon 類插件：Material Design Icon、Icon8、Iconify、Streamline。
- 內容處理類插件：Content Reel、Table Paste、Time Machine、Find and Replace。
- 圖形與圖片類插件：Get Waves、Blobs、Pattern Hero、Vectary 3D、Unsplash、Blush。
- 顏色與交付類插件：Color Palettes、Webgradients、Image Palette、Zeplin、Figma Measure。
P.22 案例庫補充
- 補充 CSS Design Awards、Best Website Gallery、Land-book、Web Design File、SiteSee、Straightline Bookmark、GD Web Design Awards、Responsive Web Design DB、DB Cut 等案例庫。
- 多數平台屬於靈感 / benchmark / reference 素材來源，不單獨建 entity；後續若某平台成為主題來源再評估。
重要段落 / 引用
- 「設計時需要圖片及 Dummy Text 呈現設計在真實使用情況下的樣貌。」（P.4）
- 「兩個界面的元素 / 群組之間以其名稱作連結，要使用相同名稱。」（P.5）
- 「在 Figma 社群，大家可以分享自己的設計檔案或其他不同資源讓其他人使用。」（P.16）
- 「Zeplin 有助團隊溝通的交付工具，可以將你的設計系統擴展到開發人員的世界。」（P.21）
提取概念
本次新建 / 更新重點
- Figma — 本冊主角；從技巧、Prototype、Community、插件、資源平台到交付工具形成完整工具生態。
- 設計系統 — Part 1 的 Atomic Design 與 Part 2 的 Community / component / style guide / Zeplin / Measure 形成系統化支線。
- Prototype — Figma Smart Animate 是高保真互動原型與分享連結的具體工具。
- 微互動 — Part 2 的 Smart Animate、UMAMI LAND、UI Movement 等案例延伸 Part 1 的微互動理論。
- 使用者介面設計 — 下冊把 UI 設計落到工具、元件、狀態、案例與素材查找流程。
已存在 wiki 頁（補入相關來源連結）
- socialMORE — 補入「UI/UX + Figma 工具箱」內容軸。
- MOC-UX / MOC-視覺設計 — 補入 UI 工具層與設計系統支線。
- Apple / Google — 本冊僅列官方設計資源入口；不新增深度事實。
- Adobe-Illustrator — 與 Figma 對位：Illustrator 偏向向量 / 視覺 / 印刷與平面設計，Figma 偏向 UI、prototype、協作與資源生態。
Ingest 筆記
2026-05-07
- 建頁判斷：本冊足以把 Figma 從觀察候選升格為實體頁，因為它不是零散提及，而是整本 PDF 的主題工具與資源中樞。
- 不建資源清單頁：
Figma 插件、UI 靈感平台、Mockup 工具、網站案例庫均先保留在來源頁與 Figma entity 中。這些是查找型清單，不適合拆成 wiki 概念；未來若某平台有主題來源再建 entity。 - 不建 Apple HIG / Material Design：本冊只把 Apple Design Resources / Material Design Resources 作為官方資源入口列出，未對設計準則本身深挖；仍維持在 Apple / Google / 觀察清單的輕量狀態。
- 90 MB PDF caveat：Part 2 是大型截圖資源 PDF，已按 vault contract 保存原 PDF；若未來推送遠端可能出現大型檔案警告。