Figma Mockup｜製作步驟

1. 確定APP尺寸
2. 設定標準色、輔助色等樣式（Color Style）
3. 設定字體及樣式（Style）
4. 設定按鈕、表單、對話框等風格樣式，並設為組件（Component）
5. 是否有插畫？繪製插畫及相關圖像
6. 蒐集產品照片、相關圖片、出現的文字等相關資訊
7. 開始製作，注意無障礙設計原則，並即時修改各項設定
8. 手機下載Figma，並確認按鈕、文字大小是否適合？閱讀是否舒適？流程是否順暢？

---

範例影音

Mockup設計｜以Figma製作介面設計精稿 ｜案例解析(2021年5月19日)

可參考範例影片，或參照以下製作步驟的逐步說明，以此延伸至其他頁面，完成精稿製作。

---

---

Mockup 頁面設計｜以Figma製作介面設計精稿(2023年12月13日)

可參考範例影片，或參照以下製作步驟的逐步說明，以此延伸至其他頁面，完成精稿製作。

---

---

上課練習範例

---

1. 確定APP尺寸

使用Frame(框架)工具，選擇右側APP尺寸，開始製作。畫面選定的是iPhone 11 Pro / X，尺寸為 375 px X 812 px。


---

2. 設定標準色、輔助色等樣式

使用設定好的情緒板（MoodBoard），選取 image Palette｜ 圖像配色提取工具，快速產生產品建議色彩。可由這些色彩中調整為主色調與輔助色等。當然也可以直接使用從photoshop中取得的色彩。（上一張情緒板內容）







---

3. 設定字體及樣式

請預先設定好幾種常用的字體樣式，以方便後續的設計與修改，建議的中文字體為思源黑體及明體，是用中英文字體，且有多種粗細變化：
Noto Sans TC｜非襯線字｜思源黑體｜七種粗細等級
Noto Serif TC｜襯線字｜思源明體｜七種粗細等級





若覺得字體規格不符預期，也可以編輯修改樣式設定。




---

4. 設定按鈕、表單、對話框等風格樣式

設計符合風格之按鈕、輸入框、功能列等，並將之建立為組件（Create Compenent）。







---

課堂範例，暫時利用利用iconfy插件功能，設計『功能列表』，並將之建立為組件（Create Compenent）。實際製作，請以APP風格，設計屬於自己專屬的ICON功能列表。









---

5. 製作歡迎頁

參考Figma範例，製作歡迎頁、註冊頁、列表頁。

歡迎頁，以圖片為背景，利用Unsplash插件功能，以及圖片編輯功能，加上漸層效果，使圖片更有層次，加上歡迎文字，以及設定好為組件的按鈕，修改文字











---

6. 製作註冊頁

利用設定好的組件，修改文字，成為註冊頁



---

7. 製作列表頁

利用設定好的組件，加以修改，並利用Unsplash插件功能，豐富畫面，成為列表頁，注意文字樣式的對應與層次感。







注意上方顯示列及下方功能列表的對齊方式，並勾選鎖定。




歡迎頁、註冊頁、列表頁



---

8. 是否有插畫？繪製插畫及相關圖像

9. 開始製作，注意無障礙設計原則，並即時修改各項設定

10. 手機下載Figma，並確認按鈕、文字大小是否適合？閱讀是否舒適？流程是否順暢？