尋夢新聞LINE@每日推播熱門推薦文章，趣聞不漏接❤️
編註：Figma 是一個完全免費的在線 UI 界面設計軟件，支持 Windows 和 macOS 等多個平台。根據 UXTOOLS 的數據，Figma 已經是目前使用排名前五的設計工具了。與 Sketch 等傳統工具不同的是，Figma 是第一款真正支持協作的 UI 設計軟件，可以讓整個團隊的成員同時查看並修改協作的項目。
每個人都會有設計的欲望，無論是設計一個網頁還是設計一個 App，都希望自己能創造出一款有風格的作品。但是面對市面上的諸多設計軟件，哪一款才更適合新手呢？
俗話說「工欲善其事必先利其器」，想要簡單入門 UI 設計，試試 Figma 吧。
設計一個全新的少數派網站首頁
如果你之前接觸過類似的 UI 設計軟件，你可能會發現 Figma 這個界面的操作邏輯有點類似於 Sketch，為了方便你的快速入門，官方在右下角的幫助按鈕放置了一堆東西，能夠幫助我們方便查找 Figma 自帶的各類教程，快捷鍵等。
此時我們按下鍵盤上的 A ，呼出快捷鍵功能，創建一個畫板，然後在右側選擇你喜歡的產品類型便能夠得到一個對應的 UI 大小的網格。因為現在我們是要 redesign 少數派的首頁，所以我們選「MacBook Pro」。
但是你也發現了，空白的界面並不適合設計，我們需要一些網格來幫我們輔助定位和分配空間。點擊右邊的加號，能夠看到 LAYOUT GRID 下面的 Grid ( 10px ) 會幫我們自動生成一個鋪滿當前白色頁面的網格。
你也可以點擊 Grid ( 10px ) 進行詳細的進一步設置（此處我選擇默認的設置）。
我們現在來觀察一下少數派的首頁，大致由頂欄、導航欄、展示欄、文章、側邊欄等組成。
已用不同顏色的矩形來區分不同的區域
那麼我們根據這個矩形分割的思路，點擊網頁左上角的矩形按鈕，在 Figma 里面先畫好一個矩形，把這個矩形作為我們網頁的背景。
在左邊的控件欄里面，我們單擊創建好了的矩形，同時在右邊的顏色控制里面，更改他的顏色為黑色，當然你也可以選擇你喜歡的顏色或是圖片來作為背景。
設置好背景後，我們可以嘗試先做一個頂欄和導航欄的融合，使他成為一個全新的頂欄。通過再次點擊矩形按鈕，創建一個全新的矩形，放在最上面作為頂欄，顏色設置為淺黑色使我們能更好地看清它和背景顏色區別，添加上 logo 和相關的導航，在添加的時候會有自動生成的參考線幫助我們判斷位置。
為了方便管理和之後的升級維護，現在給左欄的各個組件都命下名。
如果遇到素材顏色不搭配的情況，可以嘗試使用右邊的工具進行調整，例如下圖中的搜素圖標，由原本的灰色調整為白色。
調整 Exposure 能夠改變顏色
為了讓我們的頂欄和背景融為一體，我們此時把顏色改回黑色，再通過同樣的方法再次創建一個較大的矩形，同樣為了方便我們製作的時候易於辨認，將它改為淺黑色。
少數派目前的 Power+ 2.0 正在火熱售賣中，我們就把它作為我們的 Banner。拖拽背景圖片進入矩形中，把圖片鋪滿整個矩形，再輸入宣傳文字，文字的顏色為了方便與背景匹配，我們使用右側的取色器工具來獲取文字的顏色。
單純的文字似乎沒有太大的吸引力，我們再畫一個圓角矩形，調整顏色為漸變色，方便用戶購買。
這樣我們全新的 Banner 也就完成了。是不是有點首頁的樣子了呢？
接下來我們製作頁面的主體部分，先創建一個矩形作為主體，然後再創建四個矩形作為我們的商品展示位。
在四個矩形展位放置好我們需要展示的商品圖片，如果遇到矩形擋住圖片的情況，只需要右鍵單擊圖片，選擇「bring to front」即可。
最後補全文字，然後把大矩形的背景顏色改回黑色。
這樣我們的主體部分就完成了，最後我們選擇「File」-「Export …」進行導出，便能將我們做好的主頁發送給其他人了。
總結
Mac 上目前主流的設計軟件之一是 Sketch，Sketch 有許多優秀的地方，但它的缺點是只支持 Mac 系統，每年的訂閱價格也是不菲，導致把許多新人拒之門外。
Figma 適用於任何能夠運行現代瀏覽器 ( Chrome ) 的系統，能夠讓我們隨時隨地開展工作。如果是團隊使用，在 Figma 中共享文件也非常容易，只需共享鏈接即可。對於工程師們來說，Figma 支持直接從設計文件中復制 CSS，省去了許多繁瑣的工作。但 Figma 缺點也很明顯，Figma 到目前為止，對中文的支持還是不夠好。
希望本篇文章能幫助你打開 Figma 設計的大門。
