Topics

在 Figma 中創建設計部件並分享作品時，您可能會遇到一些意想不到的問題。您是否遇到過組件圖示顏色無法正確變更的情況？

在本文中，我們將清楚地解釋圖示實例顏色不反映問題的原因和解決方法，這是許多 Figma 使用者都會遇到的問題。

我的資深同事把我做的按鈕做成了一個組件！更棒的是，你甚至可以更換圖標！太讚了！不過圖標數量還不夠，所以我打算繼續把圖標註冊成組件，讓它成為一個易於使用的組件！

我悄悄地製作了圖標。

咦？圖示組件切換不正常？ 我確定我的製作方法和前輩一樣…為什麼顏色切換不正常？

那都是因為你製作圖示的方式！

前輩！怎麼樣才能讓它變色呢？

太好了！我會教你如何在 Figma 切換圖示。記得記筆記並牢記！

是的！我會盡力記住的！

為什麼顏色會被繼承？ Figma 的顏色覆蓋機制是如何運作的？

在 Figma 中建立按鈕時，通常會將圖示設定為可透過實例屬性變更。但是，切換圖示時經常會出現問題，例如顏色無法同步或無法自動變更。

在 Figma 中切換圖示時，我設定的顏色沒有反映出來/顏色沒有改變。你是否遇到過上述問題？本文將以簡單易懂的方式解釋其原因和解決方法。

請務必檢查圖示和按鈕側的設置，以確保切換圖示時顏色能夠正確變化。

首先，檢查按鈕組件的結構

首先，我們來看看如何使用以下結構來覆蓋顏色：

① 原圖示組件為黑色

② 將其複製到按鈕中作為實例，並僅覆蓋顏色。

3. 如果在此狀態下切換到另一個圖標，圖標顏色可能會恢復為預設顏色而是白色。

提示：了解主組件和覆蓋組件之間的關係

最基本的一點是，你所覆蓋的任何屬性將不再反映主組件中所做的變更。

被覆蓋的部分如果在實例中變更顏色或文本，該部分將變為獨立部分。如果之後在主組件中更改同一部分，則更改不會套用到實例。覆蓋設定（填滿、描邊顏色、文字等）具有更高的優先權。

未被覆蓋的部分您未更改的屬性（例如 padding 和 margin）將反映主元件中所做的變更。

如果您變更主元件的圖層結構，請格外小心：如果您重新命名圖層或刪除圖層並新增圖層，Figma 可能會將其識別為不同的元素並重設實例覆寫。

考慮到以上情況，讓我們來看看為什麼圖示顏色不會改變。

原因 1：填滿和描邊設定混用

即使圖示乍看之下相同，但在 Figma 中，「填充」和「描邊」是完全獨立的屬性。因此，如果您從使用填充的圖標切換到使用描邊繪製的圖標，顏色變更可能無法正確反映。

例子：

圖示 A

圖示 B

• 圖示 A：一個有填滿的輪廓圖示。
• 圖標 B：帶有描邊的圖標

這樣一來，如果圖示的繪製方式不同，套用顏色後的結果也會隨之改變。保持表達方式的一致性很重要。點選圖示 B 時，填滿色彩設定為白色，但由於圖示元件僅由線條構成，因此顏色並未被取代。然而，填充顏色實際上已被正確地設定為白色（儘管由於沒有填充元素，白色無處可去…）。

✅ 解決方案：
規則是所有圖示都必須使用“填充”效果。用線條繪製的圖示必須轉換為輪廓（command+shift+O將其轉換為“paint”物件。這樣做的好處是便於實現時的處理。

在我們的實作過程中，我們會將 SVG 路徑放入 CSS 變數中，或與 Astro Icon 結合使用，這樣所有內容都會統一繪製。

如果只保留描邊，縮放圖示時線條粗細會發生變化，這可能會導致設計失真。除非有特殊原因，否則最好將其描邊並使用一致的“填充”設定！

如果僅使用線條建立圖標，縮放圖標時線條粗細將保持不變。對於箭頭等簡單路徑來說，這不成問題，但對於更複雜的圖標，12px 的線條粗細會讓圖標看起來被壓扁，而 80px 的線條粗細則常常會讓圖標看起來被拉長。

用線條繪製的圖示最好描邊，因為線條粗細在調整大小時不會改變。如果想保留描邊前的原始數據，請將原始資料放在元件附近。

當您將描邊創建的內容與填充內容組合時，它會變成填充，但即使在這種情況下，也經常會出現問題，例如形狀的某個部分大小沒有改變。

原因 2：圖層名稱不符

在 Figma 中，組件切換實例時，圖層名稱相同的元素會繼承樣式和屬性。規範中有一條規定：

例子：

圖示 A

圖示 B

• 圖示 A 向量圖層名稱：Vector
• 圖示 B 向量圖層名稱：Vector2

如果圖層名稱像這樣不同，Figma 會認為它們是“不同的”，並且覆蓋的樣式將無法正確應用。

✅ 解決方案統一圖示中使用的圖層名稱（例如，「全部」）。Vector）

現在，讓我們確保所有要著色的路徑的圖層名稱都相同！

原因三：不同的層級結構（層次結構）

即使統一了圖層名稱，切換也可能無法正常運作。在這種情況下，問題可能與層結構差異有關。如果層數或結構不同，屬性可能無法正確對應。。然而，在某些情況下，如果圖層名稱相同，則層級結構上的細微差異不會造成問題。。

例子：

圖示 A

圖示 B

圖示 C

• 圖示 A 是“向量”（path）勾勒輪廓並合併成一個向量圖（基本圖示）
• 圖示 B 是“火焰”（Flame） > Vector（path）→ 確定（顏色會繼承到路徑名「Vector」）
• 圖示 C 是“向量”（Flame） > Flame（path）結構 → NG（火焰名稱「Vector」中設定的顏色變化出現）

這樣，圖層名稱“在「Vector」包含群組的結構中，您需要注意如何套用樣式。此外，即使名稱相同，顏色也僅在頂層發生變化（請參閱圖示 C），而顏色變化不會反映在第二層的向量圖中。

✅ 解決方案不只是圖層名稱，設計時請確保樣式實際套用的路徑結構與之匹配這將有助於避免問題。

只要向量名稱正確，結構略有不同通常也沒關係。但是，在團隊開發中，為了方便後來加入的成員，最好盡可能保持內部結構的一致性。

原因 4：填充或描邊的數量與原始元件不同

如果只使用一種顏色，只要合併圖層或統一圖層結構和圖層名稱，就無需擔心。但是，如果切換到與原始圖標填充或描邊數量不同的圖標，則只有部分顏色會改變，而其他顏色保持不變，這可能無法達到預期效果。一般來說，圖示應統一使用一種顏色。或者，如果需要使用兩種顏色，則需要為雙色圖示建立單獨的圖示變量，或採用其他巧妙的方法。

✅ 解決方案：

• 請勿混用單色圖示和多色圖示。
• 如果您需要多色圖標，請複製帶有變數的圖標組件，並建立用於雙色圖標的組件。
• 使用多色圖示時，一般不應使用顏色覆蓋。

請注意，即使您只更改一個顏色的圖標，也只能更改一種顏色！

原因五：混合模式與蒙版

如果圖示使用了遮罩或特殊混合模式（例如正片疊底），改變顏色可能不會帶來任何可見的變化。。

✅ 解決方案：
如果您使用蒙版或混合模式，請在建立元件之前，透過合併或展平對象，將它們轉換為看起來合適的簡單路徑對象。

在這種情況下，也可以在最後勾勒出路徑輪廓，將其簡化為一個簡單的路徑。如果使用乘法運算，最好使用即時追蹤或其他類似工具正確地建立路徑，這樣更安全。

核實摘要

實際顏色反射行為已證實

下面顯示的是在按鈕內切換不同圖示時觀察到的顏色反射行為（見圖）。

運用Tips

從測試中總結的關鍵點：

• 圖層名稱和結構必須匹配，這一點非常重要。
• 可以使用顏色樣式或變數來指定填滿顏色，但並非必須指定。
• 為了便於實施，圖示通常使用填充來創建（線條在放大或縮小時容易變小，因此建議使用輪廓）。
• 如果要為現有圖標添加元素，為了避免顏色問題，最好建立一個新圖標，然後逐一替換每個元素，而是編輯目前顯示的變體。

從設計到實施順利過渡的秘訣：

• 使畫面尺寸統一（不要使用不同的尺寸，例如 24px、40px、80px 等）。
• 縮放圖示時，它會根據圖示大小進行平滑調整（這使得在設計和實作中處理資料變得更加容易）。

此外，我們的實施規則如下：

• 將顏色設定為純黑色 #000（除非原始資料為黑色，否則無法變更天文圖示的顏色）

操作階段可能出現的常見問題：

• 修改現有圖示時要小心。如果在操作過程中為現有圖示新增或修改元素，其結構可能會發生意外變化，導致顏色反射問題。在這種情況下，請勿直接編輯現有組件，而應遵循相關規則。創建一個新的圖標組件並替換它這樣比較安全。

概括

你明白了嗎？基本上，在建立圖示時，只需遵循以下三條規則！ 1. 使用一致的「填滿」繪製方法（輪廓線！） 2. 為需要著色的路徑使用一致的「圖層名稱」。 3. 盡可能簡化圖示的「圖層結構」。 此外，在製作階段，修改現有圖示時要格外小心。修改過程中，圖示結構通常會發生變化，導致顏色無法正確反映。 因此，不要直接修改現有圖標，而是建立一個遵循這些規則的新元件，並在其中修改圖標。然後，在按鈕組件中用新圖示取代舊圖示。這樣可以顯著減少顏色問題。

謝謝！我現在可是圖示製作高手了！我會嘗試用前輩教我的方法來製作一個組件！

切換圖示實例時，即使它們看起來相同，但內部結構不同，顏色也無法正確反映。

這次提出的觀點，特別是“統一填充”“統一圖層名稱”只要遵循這兩點，你應該就能避免大多數問題。

如果仍然無法正確切換，則可能是由於內部結構或同名父層存在差異所致。

希望這篇文章能幫助你更輕鬆地使用 Figma 進行設計工作。