Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
經過前面的 YouTube 影片與設計專欄
你應該對 Figma 的操作有基本的認知了
是不是迫不及待想開始設計 UI 介面了呢
對於設計新手來說
最有效的學習就是從模仿開始
可以試著去重新設計一個網站或 App
最好是你生活上熟悉的
或是你之後想要研究的題目
也可以是要應徵的工作產業類型
比如說 現在大家都在叫 Uber Eats 外送
餐點或飲料到家裡
或是同事一起開團叫手搖到公司
也許你對 Uber Eats 的 App 很熟
但你大概沒點過他們的網站吧
Uber Eats 的網站對新手來說是很適合模仿的目標
我們在設計網站時
不會只看單一尺寸
至少要把桌機、筆電/平板、手機的尺寸都列出來看
因為我們希望設計出的網站在各個裝置上都有最好的瀏覽體驗
而這種能兼顧各裝置尺寸的網站
也有助於搜尋引擎上的表現
我們也稱這樣的網站為響應式網站
我們先從桌機版的網站來分析
首先一進入網站時
使用者第一個看到的畫面
我們稱之為 Hero Image
在這個區塊應該可以明顯到看到除了背景之外
所有的內容都靠齊某一個範圍
這時我們透過網格系統來檢視這個 Hero Image 的排版邏輯
在右方的 Layout grid 去選擇 Columns，Count 選擇 1，Type 選擇 Center，Width 跟 Gutter 都輸入 1492，這樣就可以大概知道這個畫面上的內容是怎麼對齊的。1492 只是依據這個範例概略抓的距離，不一定要完全相符。
往下我們會看到明顯的 3 等分區塊，我們一樣可以打開右方的網格系統，這次 Count 選擇 3，Type 改成 Stretch，此時 Margin 表示網站左右兩邊的內縮的間距，我們輸入 45，然後 Gutter 輸入 20 這表示 3 個等分之間的間距，設定完之後會看到畫面整齊的分成 3 個區塊，範例上會有些區塊被切到沒關係，那表示這個範例沒有完全按照網格系統來對齊，我們只需要大概抓到相似的網格系統就可以。
再往下如果是 4 等分區塊就很簡單了，跟剛剛一樣的操作，只要把 Columns 改成 4 就搞定，這樣我們就大致抓到桌機版的網格系統了，頁尾的部分也是以 4 等分為主，被切到的地方可以先忽略。
而筆電/平板的部分其實就依樣畫葫蘆，把數值調整一下即可。手機裝置因為可視範圍有限，所以通常是決定好左右間距後將內容稱滿寬度為主，像這個範例我們可以把 Margin 設定成 16。
原本由左至右的 3 欄排版，到手機裝置後為了比較好的閱讀及瀏覽，就改成由上至下稱滿寬度的排版。而原本的 4 欄排版也調整成 2 欄排版。
到這邊三個裝置的網格系統都規劃好了，接下來我們用黑白線框稿的方式去替換掉原本網站的內容，並且內容要對齊我們剛剛規劃的網格系統，以 Hero Image 來說，Icon 跟圖片的部分我們可以先用填滿矩形來示意，其他按鈕跟輸入框也是一樣，替換好之後，注意內容要對齊粉色的區塊，再到屬性面板把 Layout Grid 隱藏就可以看到黑白線框稿了。
這樣的線框稿是不是看起來資訊的結構很清楚？有時候我們在討論設計時，畫面上太多視覺元素干擾會容易失去重點，這時就能透過繪製黑白線框來讓資訊結構更明確，確定好之後再進行後續的視覺設計才能事半功倍哦！
我們接續看 3 欄與 4 欄的版型，可以發現在制定好網格系統後，各個物件對齊的非常工整也很舒適。
再來我們統整一下需要替換的元素，包含 Logo, Icon, 背景圖片與地圖。
Logo 部分我們就選擇帶有顏色的版本，Icon 的部分大家可以用之前教的 Plugin Iconify 來產出，按鈕跟輸入框我們都統一使用 8 px 的圓角來維持視覺一致性。
接下來就把這些元素替換掉線框稿上的矩形，再選一個深色一點的背景跟原版做出差異，忘記圖片怎麼找的記得可以用 Plugin Unsplash 來尋找圖片，上背景後會發現有些文字被吃掉了，沒關係我們調整一下文字顏色，按鈕也調整成品牌的綠色，這樣的 Hero Image 就完成囉，下方的內容也是一樣，地圖的部分因為只是用來示意，我們到 Google Map 截圖，再放上準備好的 Icon 即可，這樣桌機版就設計完了！
剩下的兩個裝置一樣可以按照桌機版的方式來執行替換。
我們做個小總結，並提列一些重點：
講到手機版網頁你可能會疑問，手機版的網頁跟 App 有什麼差異呢？
主要差異是網站跟 App 背後的開發的技術不同，網站的基本語言包含 HTML ,CSS, JavaScript，App 則是 Android 跟 iOS 系統，別擔心，你不需要記這些專有名詞，但身為數位產品的介面設計師，我們必須要了解我們的設計在這些產品上有什麼限制，如果你有時間，可以好好研究 Material Design System 跟 **Human Interface Guidelines，**如果你有點懶，那至少確保你的設計已經出現在現有產品上，再來就是好好跟工程師討論可行性。
最後，相信你應該已經知道怎麼透過模仿來練習設計了，當然這只是一個起點，透過大量模仿練習可以提升個人美感與資訊結構的判斷，接下來你可以繼續仿製與重新設計更多頁面，去串成 Prototype 來模擬真實操作，會更有成就感哦！
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術