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

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

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

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

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

https://youtu.be/PMVKHBfSYHo

大理石材質紋路效果

今天呢我們來挑戰看看

在 Figma 做出有質感的大理石紋路材質效果

說不定哪一天會在設計上派上用場噢

首先我們先建立任意的形狀

然後設定寬高為 500x500

第二步驟

我們先決定光線的角度

將這個形狀的填充改成斜 45 度的漸層

選擇 Gradient 後把畫面中的圓點分別拉到左上跟右下

色碼選擇 #F7F9FA 與 #EBECED

然後再設定一個內陰影

Blur 選擇 20、Y 軸 -20

顏色選擇 #FFFFFF 20%

第三步驟

我們來提升形狀的立體度

增加三層的陰影

分別是「 Y：3、顏色 #D6DADF 」

與「 X：-3 、Y：-3、顏色 #FFFFFF」

還有「 Y：100、Blur：70、顏色 #A9B4CB 20%」

然後再加一個圖層模糊，數值為 1

第四步驟

這時就可以加入大理石的背景了

在原本的漸層填色上再加一層圖片填充

選擇 Image 後置入準備好的大理石圖片

然後

旁邊的水滴 Icon 是決定這個填充圖層的混色模式

選擇色彩增值（Multiply）

透明度選擇 60%

這樣就完成囉！

要注意的是這個範例是用淺色明亮的大理石紋路

所以如果你選擇的圖片比較深一點

或是更繽紛一點的顏色

那你可能會覺得做出來效果有點不明顯

別擔心噢

你可以依據圖片的顏色及紋路去調整上面的數值

像是圖片的透明度、陰影與漸層的顏色等等

學會之後你就可以應用在需要特殊背景的 UI 元件上

讓整體視覺更耳目一新

好看討喜的介面視覺也會提升使用者體驗噢

我們明天見

關於作者

設計師 Riven

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

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

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

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

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

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