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

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

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

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

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

https://youtu.be/jk-j7yZAKWk

Neon Glass 霓透玻璃感

Neon glass effect 霓透玻璃感，顧名思義就是霓虹燈的發光效果與玻璃材質結合的一種視覺呈現，保留了毛玻璃的透明感，因為霓虹的關係會使設計的風格看起更流行時尚。

這邊需要注意的是，大家應該都看過霓虹燈對吧～霓虹燈有個特殊的發光效果，因此應用在深色背景上時，可以更好的展現它的特色，也更容易和玻璃的質感形成對比，讓整體的可以更引人注目！

首先，新增一個500x500的Ffame，顏色填入單色#000000也可以試試看利用漸層來當作背景。

點擊Fill到小方塊，選擇第二個漸層方塊，保留Liner的選項，顏色就可以保有原本的#000000，然後第二個顏色，點擊下去大家可以試著感覺看看～
例如：我想有更科技的感覺就使用藍色基底的深色作為第二個顏色的漸變，像這樣，可以感受一下

（手在顏色拉桿做滑動示意）

顏色選擇完畢之後，就可以來稍微改變一下漸層方向，這邊就讓大家自己玩玩看唷～

好了之後就來進行主體的製作。

我們先建立基本的正方形，然後設定寬高為 200x200。

顏色的部分，保留玻璃的特性，但不用像毛玻璃一樣這麼凸顯玻璃感受，因此建議大家使用灰色來做為底色，數值的地方幫我輸入#C4C4C4，透明度幫我調整成1%維持它玻璃的感覺～

霓透玻璃感的陰暗面和亮光面會比較多層，其目的就是為了可以增加對比。
首先第一層，一樣是我們的老朋友～點擊Effect這邊的「＋」新增一個Effect

這時候預設是「Drop shadow」，幫我點下去選擇「Background Blur」調整模糊值來模擬玻璃的模糊感，一般來說，通常設置在10px至20px之間，我們就設定10，這取決於你想要的玻璃質感程度，當然也可以利用背景或是你想要達成的樣式再把數值提高唷～
點擊Effect這邊的「＋」新增一個Effect

這時候預設是「Drop shadow」，幫我點下去選擇「Background Blur」調整模糊值來模擬玻璃的模糊感，一般來說，Glassmorphism的模糊會比較高，通常設置在10px至20px之間，這取決於你想要的玻璃質感程度。20以上會更好，那我們就設定20，也可以利用背景或是你想要達成的樣式再把數值提高唷～
接著再新增一個Effect選擇「Inner Shadow」製作微微製作微微小界線，讓我們方塊更明顯，因為背景篇紫色，因此這邊的界線也可以稍微紫一些，數值#E3DEFF，20%，而X、Y的可以調整成0，這樣就會完美的呈現在物件上方，最後調整Blur，10-20，這個可以看個人就可以囉～

第二層，新增一個Effect選擇「Inner Shadow」顏色可以比剛剛再深一點的紫色#9A92D2、30%，X為0，Y為4，調整Blur為16，接著再一個Effect選擇「Inner Shadow」，顏色一樣是#9A92D2、30%，X為0，Y為100，調整Blur輸入100，特別的是Spread幫我輸入-48。

最後一層，我們來凸顯霓透玻璃的感覺。

新增一個Effect選擇「Inner Shadow」顏色可以比之前都再深一點的紫色#604490、30%，X為0，Y為-80，調整Blur輸入68，Spread輸入-64。

接著最特別的地方！
再一個Effect選擇「Inner Shadow」，顏色是#FFFFFF、100%，X為0，Y為7，調整Blur輸入11，Spread幫我輸入-4，這個就是最主要的高對比的位置。
接著也是裡面最後一個Effect，一樣新增後選擇「Inner Shadow」，顏色是#000000、50%，X為0，Y為40，調整Blur輸入56，Spread幫我輸入-36，這層加上去之後是不是讓整個玻璃敢更加明顯了呢～

完成囉～

雖然這些步驟比起毛玻璃會比較繁雜，但只要大家拆分Effect來多多練習的話，一定能很好上手的！

小小tips，大家可以多多參考霓虹燈的色系，例如亮綠色、紅色、藍色等鮮艷的顏色來作為霓虹發光效果的基礎色唷～

關於作者

設計師 Riven

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

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

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

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

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

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