前情提要｜使用Figma ，進行APP登入頁面練習

詳細操作請見影片及 Figma基本功能練習01｜APP登入介面設計單元

請先將：製作APP登入頁面練習的頁面，至Moodle繳交，再進行第二個練習。

使用Figma，進行APP登入與註冊及延伸頁面練習

1. 製作APP登入頁面練習。新增第二頁Frame框架，並將圓角設定20px


---

2. 選擇 Community社區資源，搜尋status狀態列資源


---

3. 開啟 iOS 16 Status Bar (Community)資源檔案，選擇欲複製的時間狀態列， ctrl+S 將其複製


---

4. 將複製的時間狀態列， ctrl+V 貼在新的手機框架上方適當位置


---

5. Creating components｜創建組件

組件（components）可在整個專案中建立和管理一致的設計。 建立組件時，您將建立一個主組件及其『物件』（Instance）。 您對主元件所做的任何變更都會自動更新其所有『物件』，從而節省您的時間並確保設計的一致性。

• 選擇物件，在畫布上，選擇將組成組件的物件或物件群組。
• 在選擇的物件上，單擊右鍵 選擇『 Creat component 』。
• 在右側邊欄中，找到『 component』圖形按鈕並點擊它
• 使用鍵盤快速鍵：Mac 上為 ⌥ Option ⌘ Command K，Windows 上為 Ctrl Alt K。
6. 選擇將組成組件的物件群組（ Ctrl＋G ）


---

7. 創建組件（Creating components）的不同做法：

• 在選擇的物件上，單擊右鍵 選擇『 Creat component 』，建立主組件。


---

• Draw模式下，在選擇的物件上，選擇『 Creat component 』圖樣按鈕 。


---

• 在右側邊欄中，找到建立組件『 Creat component 』圖樣按鈕並點擊它。


---

8. 主組件顯示為紫色，會出現在左側的資源面板（Assets）中，可隨時使用。


---

9. 建立色彩樣式（ create Color Styles）

在 Figma 裡，「色彩樣式 (Color Styles)」是設計系統中非常重要的功能，能夠讓設計師快速管理與一致化專案的配色。

• 可將常用顏色（品牌主色、輔助色、背景色、文字色等）定義為「樣式」。
• 所有元件若套用該樣式，顏色更新時會自動同步。

製作方法：

• 選擇創建樣式的對象，在『色彩屬性』面板（Fill）中，單擊要保存的屬性旁邊的『樣式』圖標。點擊『 +』圖標，系統會提示為樣式命名。

• 在新頁面輸入Login登入字樣，套用剛建立的『標準藍』色彩樣式，建立標準色體系

• 點擊修改按鈕，可進行色彩樣式的調整


---

10. 建立文字樣式（ create Text Styles）

Figma 的文字樣式功能，核心是 「一致性 + 效率 + 系統化」。它幫助設計師快速套用、更新文字規範，並能跨專案共享，最終提升團隊協作與交付品質。

• 可將常用的文字設定（字型、字級、字重、行高、字距等）定義為「文字樣式」。
• 任何地方引用該樣式後，只要更新樣式，所有套用的文字會自動同步。

製作方法：

• 選擇創建樣式的對象，在『文字屬性』面板（Typography）中，單擊要保存的屬性旁邊的『樣式』圖標。點擊『 +』圖標，系統會提示為樣式命名。建立英文字體樣式。

• 以同樣的方式，建立中文字體樣式

• 點擊修改按鈕，可進行文字樣式的調整


---

11. 製作輸入框及輸入文字為組件，以便重複利用及便於修改


---

12. 選取組件，至手機框內，成為新的元件


---

13. 完成登入頁製作


---

14. 複製『登入頁』後進行文字修改，迅速成為第二頁『註冊頁』


---

15. 新增建立Chat聊天頁面，製作對話框設計，將之群組（ctrl +G）後，建立組件


---

16. 以組件複製出的『物件』（Instance），改變主組件的設定，『物件』會跟著改變


---

17. 在外掛中搜尋 unsplash圖庫，並執行


---

18. 選取圓形頭像框，點選人物照片，將全部變成人物照片頭像，個別選擇人物圖像，進行個別更換頭像


---

19. 製作底部選單

• 使用 『Iconify』外掛製作底部選單
• Iconify 是 Figma 上常用的 免費外掛 (Plugin)，它是一個「圖示搜尋與插入工具」。
• 提供超過 10 萬個以上的圖示，包含多種開源圖示庫（例如 Material Design Icons、Font Awesome、Feather、Heroicons、Tabler 等）。
• 讓設計師能快速搜尋、插入、統一風格的圖示，避免到處下載零散的檔案。
• 搜尋icon外掛，選擇『Iconify』

• 『Iconify』提供超過 10 萬個以上的圖示，包含多種開源圖示庫

• 搜尋要使用的icon的關鍵字，選擇適合的風格的icon，進行匯入，製作底部選單


---

20. 在『Prototype』狀態，設定簡單互動連結

21. 完成組件、樣式、外掛應用的設定練習，播放製作成果

APP入口頁面延伸練習｜組件及樣式

1. 參考本單元講義。
2. 請使用建立組件、新增色彩樣式、文字樣式等功能，配合外掛， 完成自訂主題之『APP入口頁面設計及後續延伸介面』設計。
3. 至Moodle，將播放連結回覆並上傳設計之圖片。