iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法系列 第 24

Day 24. 打造可重覆使用的設計-Figma 的 Component 元件解析

  • 分享至 

  • xImage
  •  

在一個網站中,常常會在不同的頁面之間看到許多相同共用的元素,比如說按鈕、導覽列。而在同一個網頁中,也經常會看到有些一再重覆出現的元素,比如說卡片、列表等。

我們在設計這些元素的時候,需要盡可能確保一致性 (例如在首頁的按鈕跟在內頁的按鈕顏色、框線應該要一致)。另一方面,設計師在修改這些分散在不同頁面上的元素其實不太有效率且容易出錯,Figma 內建了一個好用的功能- Component ,正是為了解決這個問題。

如何設轉換成 Component

首先設計好一個按鈕,然後將此按鈕如下做成一個 component。(觀察一下左方的 Layer 面版,此時這個已經被轉換成 Component 的元件在圖層的 icon,會變成四個實心菱形,這代表它是 "Main Component")
https://i.postimg.cc/qRjFPnnK/24-create-Comp.gif

接著我們可以拉出 Instance 重覆使用,有二種方式可以做到:

(1) 直接在畫板上從剛做好的 Main Component,按著 Alt 鍵復製一份出來
https://i.postimg.cc/yxxGsdXb/24-copy-From-Mcompo.gif

(2) 從 Assets 面版中拉出剛做好的 Component
https://i.postimg.cc/vTKNBs0H/24-drag-From-Assets.gif

Instance 與 Main Component 的關系

首先,如何辨別呢?看左戶的圖層面板 Instance 的 icon 是一個空心菱形,與 Main Component 不同。
https://ithelp.ithome.com.tw/upload/images/20211018/20105528HjKKTZrcEi.png

Instance 是源自 Main Component的,打個比方說明,Instance 就像是分身,而 Main Component 則是本尊,所以當一但修改了 Main Component 內部的任何物件/屬性,所有 Instance 就會隨之變化
https://i.postimg.cc/PqcyY4m2/24-change-M.gif

Instance 的 Overwrite 特性

我們對每個 Instances 做不同的改變,然後來觀察 Main Component 對他們還有沒有約束性。

Instance 1:修改按鈕圓角

Instance 2:修改按鈕底色

Instance 3:修改按鈕底色及文字顏色

https://ithelp.ithome.com.tw/upload/images/20211018/20105528UHY0ZPCwhX.png

此時會發現,當 Instance 有覆寫到的屬性, Main Component 對他們不再有約束性,但對於沒有覆寫到的屬性,Instance 還是會被 Main Component 影晌。

Instance 1:除了按鈕圓角之外,其他都會隨之影晌

Instance 2:除了按鈕底色之外,其他都會隨之影晌

Instance 3:除了按鈕底色及文字顏色之外,其他都會隨之影晌

checkMainChange.gif

Instance 如何切斷、取代及重置

Figma 提供了很有彈性的機制讓 instance 可以很方便的切斷、取代及重置
https://ithelp.ithome.com.tw/upload/images/20211018/20105528k6ryiwsI8K.png

(1) Reset:當改動了 Instance 之後發現改錯了,但已經調整了許多屬性,此時就可以用 Reset 重置回一開始 Main Component 預設的所有屬性。 (上方也有快速鍵可快速 reset)

Reset.gif

(2) Detach: 若想完全切斷與 Main Component 的關系,則可以使用 Detach 與 Main Component 恩斷意決,從此再無瓜葛。

Detach.gif

(3) Push: 當改動的這個 instance,希望它能夠取代成原本的 Main Component,則可以使用 Push overrides to main component

https://i.postimg.cc/L89xph9B/24-push-To-Main.gif

總結

Component 的好處有很多:

  1. 設計的過程中,容易保持或檢視一致性
  2. 提高設計的效率 (善用 Main Component 及 Instance 的 overwrite 及 push 機制)
  3. 配合整理 Design Guideline,可降低與工程師溝通的成本

大多數的 UI 設計工具,都著有類似此篇介紹的元件概念,像 Sketch 的 Symbol、Adobe XD 的 Component 都有著類似的機制,只是細節設計上有點不同。

這麼重要的功能,大家務必要學起來哦!

對了,用快速鍵可更節省時間、有效率

  • 轉換成 component:Cmd + option + K
  • 從 instance 取消: Cmd + option + B

上一篇
Day 23. 透過 Constraints 機制,實作出能夠拉伸的響應式卡片設計
下一篇
Day 25 Figma 設計檔的多啦時光機 - 檔案歷史紀錄與版本控制
系列文
網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言