Figma 是一款 UI/UX 使用者介面與體驗設計軟體，專用於介面設計和原型製作，能讓多名設計師同時在同一專案上協作，這使得團隊合作變得更加簡單。Figma 支援向量圖形編輯，並提供各種設計元件庫和擴充套件，方便設計師快速建立和調整設計。
Figma 不僅適用於設計師，也對開發者友好。開發者可以直接查看設計的樣式、間距等細節，並導出設計資產和切圖標註，這極大地縮短了設計與開發之間的溝通時間。
我們可以直接註冊並下載軟體到 Windows, macOS 使用，並且 Figma 是網頁瀏覽器就能打開的軟體，因此就算不安裝也可以在任何設備上使用，包括 Linux 作業系統等。
很開心這次可以挑戰鐵人賽！接下來的 30 天我會每天發佈一則關於 Figma 的小教學，並且為了能夠有體驗更好地學習軟體操作，也會搭配一支螢幕錄影的影片，可以點進 YouTube 頻道觀看順便訂閱噢！🥸
大家有熟悉上昨天所介紹的 3D 立體化效果的方式嗎？
接下來這堂新擬物化（Neumorphism）設計
其實也是相同邏輯與模式噢
稍微講一下這種風格
這種風格結合了擬物化設計（Skeuomorphism）
和扁平化設計（Flat Design）的特點
利用比較柔和的陰影（就是陰暗面）和高光效果（亮光面）為主
讓介面的物件看起來像是從背景中浮起或壓入背景中
產生一種比較細膩且柔和的 3D 效果
這邊最需要注意的地方是介面的背景
因為在新擬物化（Neumorphism）強調的是整體的介面
和物件看起來「和諧共處」
因此背景和物件通常會使用相似的顏色來營造出微妙的立體感
讓我們來試試看吧
首先我們拉一個背景
數值幫我輸入 #F0F0F3
接著建立基本的形狀：正方形
然後設定寬高為 100x100
顏色數值也是 #F0F0F3
接著要完成我們的黑暗面和光亮面的部分
首先是黑暗面：
點擊 Effect 這邊的「＋」新增一個效果
這時候預設是「Drop shadow」
我們維持就好
黑色的部分是在底部
因此數值 X 幫我調整成 2
Y 幫我調整成
這邊幫我注意一下
因為它需要有一種柔和的感覺
因此 Blur 需要重設
這邊先幫我設置為 3
Color 幫我設置為半透明的深色
不用預設的黑
這邊幫我輸入數值 #AEAEC0
透明度 40%
將將～黑暗面就完成了
再來是光亮面：
一樣點擊 Effect 這邊的「＋」新增一個效果
維持原本的「Drop shadow」
白色就是黑色的相反
先將 X 值和 Y 值調成 -1
保留柔和的感覺 Blur 調成 3
Color 數值為 #FFFFFF
而也因為我們的 Blur 夠柔和
所以透明度維持 100 就好
這樣亮光面也一起完成了
以上是物件突起來的方式
那如果是壓下去的感覺呢
沒錯，又是我們的老朋友內陰影（Inner shadow）
在這個課程裡已經用到爛了
不過好用以後還是會繼續用
因為壓下去是一種往內集中的感覺
因此在 Blur 上就不用給太大的數值
黑暗面可以變成：
數值 X 幫我調整成 1
Y 軸也幫我調整成 1
blur 設置為 1
Color 一樣不用預設的黑
這邊幫我輸入數值 #AEAEC0
透明度因為 blur 降低
因此這裡的透明度也一起降低 15% 就好
亮光面的地方就是：
數值 X 幫我調整成 -1
Y 軸調整成 -1
blur 設置為 1
Color 這邊幫我輸入數值 #FFFFFF
透明度 70% 就好
這樣突起和壓下去的樣式都有了
就可以應用在不同形狀之中噢
大家可以嘗試不同的顏色組合
只需要確保元素在不同背景下都能保持清晰可見就沒問題
補充個小 tips
在比較淺的樣式中
會更有新擬物化（Neumorphism）的視覺感受噢😆
社群傳送門 - https://portaly.cc/designer.riven
在 IT 和網路產業近十年的數位產品設計師，專注於 UI/UX 使用者介面與體驗設計領域，在全臺多間大專院校與社群機構擔任顧問及講師，並於國內外各大線上課程平台開立設計課程，目前已累積超過近萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider，曾環島舉辦設計工作坊，並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會，並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察，並得到官方認證 #Design 領域 Top Writer，同時也會在 YouTube 上製作影片教學設計的方法，近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容，將艱難的設計與開發技術，用任何人都能夠聽得懂的語彙，說給每一個人聽。
iThome鐵人賽
看影片追技術