參考

Guide to Components in Figma

Figma Tutorial: Components - The Basics (Youtube)

定義與用途

Figma 的 Component 有點 Class 和 Instance 的關系. Component就是 Class, 通過 copy paste from Component就得到了 Component的 Instance.

當修改 Component樣式時, 所有的 Instance 都會同步. 這就是它的主要作用了.

創建

創建 Component 的方式是在一個元素上按 Ctrl + Alt + K, 或者點擊中上方的菱形 icon

完成后，原本的元素就變成了 Component, 它的框會變成紫色的, 還有一個菱形 icon

要創建 Component 的 Instance 只需要 copy paste 或者 Alt + 拖拉就可以了.

Instance 也是紫色的邊框但是它沒有菱形 icon, 從右邊的 Layer 可以看到, Instance 是空心的菱形 icon. 我們可以用這些特性快速區分 Component 和 Instance.

同步效果

Instance Override 樣式

如果說所以 Isntance 都必須完全和 Component 一模一樣, 那么它的復用范圍就很小了, 因為絕大多數情況不會出現 100% 一樣的元素.

所以 Figma 允許我們做一定程度的 Override. 但是要記住哦, Override 是矛盾的, 因為元素之所以被轉換成 Component 是因為它們有共同特性，如果 Override 過多則表示它們其實并沒有那么多共同特性, 也許根本不應該使用 Component 做管理.

不是所有的樣式都可以 Override 的.

可修改的樣式

不可修改的樣式

涉及到 Layout 的基本上都是不可以改的, 能改的都是一些 Paint 的東西.

如果某一個 Instance 的某個樣式被 override 以后, 這個 Instance 的那個樣式就不再和 Component 保持同步了. (其它 Instance, 其它樣式一樣會被同步)

Reset Override 樣式

Figma 會記入 Instance 修改過那些樣式, 我們也可以通過右側的工具欄快速 reset 掉這些 override 的樣式. 這樣它就會恢復和 Component 的同步了.

Override 注意事項:

Instance 最外層的 dimension 是可以 override 的, 子元素的 dimension 則不可以

子元素的 Resizing 是可以 override 的, 但是它不會被特別記入起來, 只能通過 Reset all 重置

Detach Instance & Undo Component

有時候我們只是想 copy paste 組件, 然后完全切斷鏈接. 這種情況就可以使用 detech instance 了.

此外它還有一個神奇的功能, 就是刪除 Component. 比如我們不小心把一個元素變成了 Component.

Figma 并沒有任何方法可以直接把它變回普通元素, 唯一可以做的方式是做一個 Instance 然后 detech instance 再把 Component 移除掉 (這個是官方給的方式哦).

Swap Instance

Figma 還有一個神奇的功能叫 swap instance, 意思是在一個 instance 中的子 instance 是可以替換掉的.

比如我想把 "小 component 1" 換成 "小 component 2"

注意, 子元素是不能替換的，只有子 instance 可以替換.

雖然替換成功了, 但是我們發現 dimension 視乎被鎖死了, 它并沒有變成新 instance 的 width.

這是一個 Figma 的 Issue來的, 目前的解決方法是, 在 “小 component” 做一層 wrapper + auto layout hug contents

只要是可能被替換的 Component 我們都必須這樣子搞哦.

多了一層 container 負責具體的 dimension, 原先的 Component 設置 Auto Layout + Hug contents

總結

以上是生活随笔為你收集整理的Figma 学习笔记 – Component的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。