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

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

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

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

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

https://youtu.be/oNqHWi7P1Ug

信用卡金屬光澤效果

今天我們來挑戰信用卡的金屬光澤感效果

相信能為 UI 介面增加不少視覺設計感

或是在結帳頁面做一個超帥的刷卡互動也很讚噢

一開始我們先建立一個 400x400 的矩形

接著我們從左到右拉一個斜角的漸層來製作光線感

然後依序加上這些色碼

再來我們把間隔調整一下

你可以調出一個你喜歡的光線感

再來我們加一個光圈

新增漸層填色後

選擇放射狀（Radial）

混合模式選 Overlay

兩端顏色都填上白色

然後我們先把兩端交換

因為我們想要光線是從內而外發散出來的

再把 100% 的那端拉到矩形的左上角

0% 那端拉到中間的位置

再加入 2 層內陰影來增加立體感

分別是 Y：3，Blur：1.5

顏色：#FFFFFF 40%

跟 Y：-3， Blur：1.5

顏色：#000000 50%

最後新增一個橢圓形的陰影

來讓卡片與背景的距離感更明顯

寬高設定為 286x215

填色為 #000000

圖層模糊 140

放到矩形後面就完成基本的卡片光澤囉

你可能會覺得目前的陰影很重

這是因為這個陰影是設計給深色背景用的

我們就用一個深色的介面來示範吧

範例中我們用剛剛學到的樣式來設計卡片

只要將剛剛的樣式參數

透過 Copy properties 來貼上即可

然後我們就可以新增一層填色來變更卡面的顏色

記得要把混合模式改成 Color

這樣我們剛剛設定的紋路才會凸顯出來

最後就把橢圓形的陰影放在卡片下方

依據卡片寬度調整就大功告成囉

趕緊去試試看吧！

關於作者

設計師 Riven

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

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

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

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

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

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