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

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

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

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

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

https://youtu.be/xwY9WoBkTqs

簡易版 3D 立體化效果

首先我們先建立基本的形狀：正方形和原形，然後設定寬高為 100x100。

顏色的部分可以依照大家的喜好去調整～

接著我們來讓原本平平的畫面變成凸凸的感覺，需要有黑暗面和亮光面才可以製作出這種感覺。

我們先來製作黑暗面～

點擊Effect這邊的「＋」新增一個Effect

這時候預設是Drop shadow，我們要把陰影設置在形狀內，這裡幫我點下去選擇Innershadow，黑色的部分是在底部，因此數值X幫我調整成4，Y幫我調整成-4，其他數值先不用動，登愣～黑暗面就完成了。

接著是我們亮光面。
跟剛剛一樣的步驟，點下去選擇Innershadow，白色的部分是在頂部，因此數值X幫我調整成-4，Y幫我調整成4，其他數值一樣先不用動。

我們就完成一個最基本的3D方形。

那圓型的部分我們有兩種做法。
可以先試試看原本正方形的方式，這樣會有一種糖餅的感覺

那第二種做法，是讓他更像一個球體！但一樣保有黑暗面和亮光面。

先製作亮光面。

把剛剛拉好的圓形，填色的部分依照個人喜好，接著幫我點選顏色這邊

點擊這個Gradient就有漸層效果了，接著把Liner變成Radial

把顏色的部分調整一下，位置也可以調整
這樣亮光面就完成囉～

接著黑暗面，一樣新增一個Effect，點下去選擇Innershadow，黑色的部分是在底部，因此數值X幫我調整成4，Y幫我調整成-4，其他數值先不用動。

就完成一個球體了

是不是跟剛剛的不太一樣呢？

接著我們就可以利用這個基礎形，來編排想要的圖稿。
假裝做一個網頁的樣子～

那在這之中不管是黑暗面的數值和亮光面的數值都可以調整唷～
切記，越小的物件在X、Y值數字也會在小一些，大家可以動手玩玩看🥳

關於作者

設計師 Riven

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

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

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

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

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

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