100 種 Figma 設計的方法｜UI/UX 設計專欄

Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。

Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。

我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。

很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸

https://youtu.be/SS9KiUd5CsI

Dark Mode 暗色模式

有使用過 Google Map 的同學

一定有經歷過白天的時候

介面從以白底為主

到了晚上或經過隧道時

系統會自動轉變成黑底為主的介面

這就是我們俗稱的 Dark Mode

這個暗色模式的初衷

是為了在環境光源較暗的地方

給人的眼睛較舒服的設計

因為如果環境較暗時裝置呈現大面積的白色

會讓眼睛承受的光源過於刺激

要注意的是 暗色模式 不是一種視覺風格

而是根據某一個定義好的 UI 介面

所設計出適合於夜晚瀏覽的樣式

所以在顏色的選用上必須要可以一對一的替換

我們直接來看畫面

這是一個常見的聯絡我們頁面

要做暗色模式前我們需要將使用到的色碼都拉出來

那要怎麼知道這個頁面使用了多少不同的顏色呢

點擊 Frame

在屬性面板中往下找會看到 Selection Colors

這邊會將用到的色碼都顯示出來

而且你還可以把所有使用到相同色碼的元素一併調整

例如我想將使用到純黑色的元素改成紫色

點擊 #000000 的色票

就可以在色彩編輯器中調整

畫面中有用到純黑(#000000)的元素

也會馬上變更哦

這個功能非常方便

但要注意的是

如果你變更後的色碼跟其他元素一樣

那調整後就會視為使用統一色碼的元素

下次要變更就會跟其他元素一起調整

如果想獨立調整的話要想清楚再設定哦

知道怎麼看使用多少顏色後

我們就可以把色票都拉出來

每個產品會用到的顏色屬性不同

但最基本通常都會有的是中性色（Neutral Color）

也就是用在基本的文字或背景等等的元素

還有產品的主色（Primary Color）

通常用於主要的按鈕或需要強化的訊息

當然還有其他像是輔色（Secondary）

警示色（Error Color）等

這邊就先以中性色與主色做示範

拉出色票後

我們就可以直接複製整個頁面跟色票來進行 Dark Mode 的設計

一開始有提到暗色模式的設計在顏色的選用上需要一對一替換

所以我們可以先簡單由深到淺互換

再來進行微調

最快的替換方式就是

剛剛提到的透過 Selection Colors 來調整

但如果把 純黑(#000000) 換成 純白(#FFFFFF) 後

就會跟原本的 #FFFFFF 融在一起

所以我們需要先加一層顏色上去

將中性色複製出來後

我們把每個色票都加一層 20% 的紫色

再把色票名稱拉出來

這樣待會比較好辨認

再來就可以開始透過 Selection Colors 快速換色囉

我們從底色開始換

也就是將 #FFFFFF 換成 #1D0C33

然後就依照順序替換

換完之後你會發現整體介面是帶有紫色的暗色模式

非常適合遊戲類型的介面

但我們的淺色模式還是以基本的黑灰白配置為主

所以我們要再調整回原本的色票

這時就可以依據剛剛拉出來的色票名稱來調整

也就是將 #1D0C33 換成 #000000

其他依序調整

到這邊我們的暗色模式已經有模有樣了

但我們仔細看會發現淺色模式的介面層次比較明顯

所以這時我們可以再把暗色模式中

跟 #FFFFFF 太相近的顏色調整地深一點

至於要怎麼調呢

我們可以把色票的編輯器打開

切到 HSL

因為是中性色所以 H 跟 S 應該是 0

而 L 就是亮度

我們可以看看依照前後的亮度差異做調整

調整完後就大功告成囉

暗色模式中的對比度會比淺色模式還要來得難抓

如果還不太會找適當的對比度

可以做顏色無障礙測試來驗證

搜尋 WCAG (color contrast checker) 就可以找到

以我們剛剛暗色模式的小字顏色

為 #828282 來看

放在 純黑(#000000) 的背景對比度如何

基本上只要有達到 AA 就算及格

如果是非常重要的資訊可以考慮 AAA

好啦以上就是關於暗色模式的設計說明

感謝你的觀看

關於作者

設計師 Riven

資深數位產品設計師｜虛擬 VTuber

社群傳送門 - https://portaly.cc/designer.riven

在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。

為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。

常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。

▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。