Figma — Icon instance swap 後保留顏色的方法

近期我在使用 Design System 中的 Icon 時，有時會發生換了 Icon 就要重選 Design Token 的狀況。

例如 — 在 Icon + button 這樣的 component 中， 雖然已事先設定了 hover, disable, contain 與 outline 時的 Icon 顏色，但只要換了 Icon ，事先設定好的 Icon 就會回到該 component 自己的 default 顏色、而不會保留 override color。

分析

這樣的現象是因為我自家的 Design System 中 Icon 的由來多元、也因此圖層名稱和結構也很多元。然而對於 Figma Compoennt 來說，只有 Instance 之間的圖層是相同名稱時，color ( style ) override 才能在 instance swap 後保留。

解決方法

1. 將 Icon 中的所有向量部分 “Uinion selection” 成為單一向量圖層
2. Union 後的圖層取統一的名稱，我建議用 “Vector” ( Iconfy 中多數 Icon 和 Ant Design System 都使用 Vector 為名，因此建議保持一致，以便在使用第三方開源 Icon 時省去重新名命的工夫 )
3. 透過以上 2 點整合後的 Icon Component 即可保持 Color Override 了。

最後要註記的是 — 這個辦法只適用於單色 Icon，如果是多色 Icon 的話，color override 將會只作用於其中一組 Vector 中。