嗨! 大家好，我是阿蘇
又是新的一天開始了，今天是Day 9
來繼續昨天的分享，今天主要是分享一些使用 Figma 繪製 Mockup 重點及簡單技巧，希望能讓大家快速上手，不過因為篇幅有限，Figma 有不懂的也歡迎留言會在分享給大家
讓我們開始進入今天主題吧!
Figma 繪製精美 Mockup 教學
目錄
一、 設定基本尺寸
二、 格線 / 網格
三、 間距
四、 常用快捷鍵、使用小技巧
五、 分享 Figma
六、 總結 - Mockup 設計重點
在 DAY 7 我們有教學 Figma 基礎，對 Figma不是很熟悉的可以先看看前一篇，那我們接下來開始選擇尺寸，繪製你的設計稿
設計稿常見尺寸:
Width : 768 (平板) x 未知 (隨網頁內容變化)
平板尺寸
Width : 375 (手機) x 未知 (隨網頁內容變化)
手機尺寸
開啟尺規後，上跟左會出現尺規，這時候可以滑鼠點擊尺規拖拉出尺規，這時候就可以自由拖拉
間距設計重點:
這邊可以看到，我每個區塊 Top 間距都是設定80 ，那這就是規格化一種，設計稿是有一致性、整體性，在觀看上也會有整體，不會顯得雜亂，所以在繪製 Mockup 時考慮整體配置、間距、字體規格化也是很重要的喔!
補充說明 : 因為在設計上會盡量符合網站規範，這邊我是使用 Bootstrap 進行開發， 一般上都會以4、8倍數去設定，所以這邊上會建議這樣去規劃，之後開發也比較有規格跟基本規範。
Figma 查看間距
點選右側樣式設計 ― 右上 Inspect
這時候滑鼠移上去會有橘框框
可以選取物件在選對應想查看的間距
對於美工、設計苦手來說第一次接觸 Figma 一定會很不習慣，
這邊分享都是實用常用的快捷鍵跟小技巧，有些也是很多繪圖軟體都共通的，只要學會這些熟悉起來，相信我們自己動手做設計稿就沒問題，剩下有興趣再慢慢精進就好，不仿開啟 Figma 嘗試看看吧 !
Ctrl (長壓) + 滑鼠中鍵 ― 畫面放大縮小
滑鼠右鍵 ― 開啟選單 (群組 Group)
滑鼠左鍵 ― 大範圍選取區域 (大範圍拖移、選取群組)Ctrl + A ― 畫面全選
Ctrl + C ― 複製
Ctrl + V ― 貼上
壓住Shift ― 維持原比例，縮放不變形
K (點擊一下) ― 縮放時隨著縮放自動調整大小
這是非常重要功能 !! 很重要 !! 很重要 !! 很重要所以講三次 (被打)
可以讓你在縮放時裡面跟著縮放，像是字體、你群組的物件都會一起隨比例放大縮小，不用再一一調整V (點擊一下) ― 縮放時裡面維持原比例 (K取消要再點擊下V)
常用在調整Frame頁面 ，但不想影響裡面素材/區塊
[ ― 移至最後一層
] ― 移至最上一層
Ctrl (長壓) + [ ― 移至後一層
Ctrl (長壓) + ] ― 移至上一層
範例一 - 三個動物 Figma 練習
複製範例一 : 複製至自己的 Figma ，一起操作練習看看吧 !
不同畫布/頁面圖層調整注意
這邊要注意的是，如果是在不同 Frame 上是無法使用快捷調整的，需在相同 Frame 才能調整。
範例二 - 三個動物 Figma 練習
複製範例-二 : 複製至自己的 Figma ，一起了解 Frame 跟圖層順序吧 !
當製作完畢時，設計稿要分享我們可以看到右上角 (登入右側) 有個 Share 的按鈕 ，在這邊可以分享你的 Figma 。
點選右上 Share
彈出視窗，設定分享者（email) / 選取 Copy link
點選 Copy link 就可以得到分享網址 (這個就是你的 Figma 設計稿連結），看到下方出現提示，就是成功了喔!
試著分享看看你的作品吧 !
Mockup 重點
在這邊我們可以看到這個小區塊，有放了五張圖片，那我們設計上就會尺寸一樣，大小一致，讓他畫面呈現協調
必須適當留取邊距，內容區塊應符合格線系統，內容在格線系統內
iThome鐵人賽
看影片追技術