Figma Design UI/UX Components

Figma - Components 入門:打造自己的設計系統,快速提升設計效率!

Rene Wu 2023/05/03 10:02:48
6053

Figma 作為一個強大的設計工具,擁有著許多好用的功能,其中之一就是 Components。

Components 可以讓設計師輕鬆建立可重複使用的元件,大大提升設計效率。接下來將分享 Figma Components 的基本概念,以及如何運用 Components 進行設計。

#探索 Components Properties

Components 屬性是可以改變的,通過以下四種屬性設定來定義可更改的部分:

  1. Boolean:設定 true/false values 允許打開或關閉屬性
  2. Instance swap:設定幾個預設顯示可替換的 Instance
  3. Text:設定可編輯的文字圖層
  4. Variant:將相似的組件組織到單一容器中,例如狀態、顏色或大小

接下來將示範建立一個彈窗 Component,透過屬性與值的設定產出三種版型的彈窗。


#建立 Components

選擇要做為組件的圖層,點擊建立組件,也可以一次建立多個組件,這裡點擊【Create multiple components】分別生成3個組件。

接著再建立按鈕組件,製作 2 組按鈕,樣式為 Fill、Border,狀態為 Default、Disabled

Variant 運用

點擊【Create component set】建立組件集,新增 Variant Properties:

  • Compoments 命名為 Button
  • 新增 Variable Properties 為 Type 及 Status
  • Values 依樣式分別設為 1 Default 及 2 Disabled

從 Assets 中拉出按鈕的 Instance 來看看變體切換

當 Main Components 修改時,Instance 會同步更新

或是修改 Instance 將異動 push 到 Main Component,當 Main Component 異動時,其他 Instance 也會同步樣式


#建立彈窗

將建立好的圖片組件加上標題、內文和兩個按鈕,設定好顏色、圓角、陰影樣式後,建立 Component

Instance swap 運用

在圖片 Instance 按下為彈窗的圖片設定3張預設的切換圖片

Text 運用

在 Content 的右側按下,為標題和內文描述建立 Text Properties

Boolean 運用

最後設定圖片和 Secondary 按鈕的顯示隱藏 Switch 開關並預設 true,分別在 Layer 按下建立開關

最後在 Assets 拉出彈窗的 Instance,透過屬性與值調整出三種版型彈窗:


學會如何使用 Properties 來設定 Components 的行為,創建出多個變體以滿足不同的設計需求,也能省去重複繪製的步驟,更可以輕鬆的維護和更新設計,提升工作效率。

Rene Wu