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

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

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

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

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

https://youtu.be/4mXnfZ92MGU

UI 設計元件系統 Component

組件指的是介面中反覆出現、外觀一致、結構相同、操作邏輯一致的元件

良好的組件設計能讓設計系統有序

設計師使用方便、工程團隊閱讀和實作時更加順利

我們將學習如何實作和運用組件的各種技巧

隨著介面變得更加複雜

組件需要展示出更多不同的樣貌來適應各種狀態

變體（Variants）就是用來管理和維護這些多樣化外觀的工具

除了學習如何管理組件的不同樣貌和狀態

在這個單元中

我們將介紹組件屬性（Component Props）

可以快速替換文字和設計元素

更有效率地批次修改組件內容

首先我們先創建一顆按鈕

可以點擊上方工具欄位的「Create Component」變換成 Component

這時候我們可以複製一個

我們可以發現被複製出來的子按鈕

會跟著母按鈕更動

如果要解除 Component

可以點擊滑鼠右鍵「Detach instance」解除綁定

我們將兩個按鈕都創建成 Component

並來設定組件屬性（Component Props）

在藍色按鈕改成 Button/Blue

白色按鈕改成 Button/White

再將兩個按鈕選取

然後在右側選單點擊「combine as variants」

之後當我們從中複製其中一個按鈕

可以透過右邊選單變更 variants

輕鬆切換白色或藍色按鈕

另外各自按鈕依舊是跟著母按鈕可以彈性變化

關於作者

設計師 Riven

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

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

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

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

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

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