Figma 圖示顏色無法變更？元件實例切換問題的解決指南

在 Figma 中分工製作設計零件時，是否曾遇到意料之外的問題？特別是將圖示轉為元件後，顏色無法順利切換而感到困擾的經驗，您是否也有過呢？

本文將淺顯易懂地說明許多 Figma 使用者都會遇到的「圖示實例顏色無法反映」問題，並介紹其原因與解決方法。

我做的按鈕被前輩做成元件了！！而且圖示部分也能切換！！太厲害了！但是圖示不夠，所以我要把更多圖示註冊成元件，做成更好用的元件！

我默默地一直製作圖示。

咦？圖示元件怎麼無法順利切換？ 明明和前輩用同樣的方法製作，為什麼顏色就是切換不了呢？

這是因為你製作圖示的方法有問題喔！

前輩！要怎麼做才能讓顏色改變呢？

哼哼，好吧！我來教你 Figma 圖示切換的秘訣。要仔細記下來，牢牢記在腦海裡喔！

好的！我會努力記住的！

為什麼顏色會被沿用？Figma 覆寫機制的運作方式

在 Figma 中製作按鈕時，常會設定成可透過實例屬性切換圖示部分。然而，實際切換圖示時，卻常發生設定好的顏色沒有套用，或是顏色自動改變的問題。

在 Figma 中切換圖示（icon）時，你是否曾遇到設定的顏色沒有套用、顏色也沒有改變的問題？本文將淺顯易懂地介紹其原因與解決方法。

為了讓切換圖示時顏色能正確切換，請確認圖示端與按鈕端的設定是否正確。

首先確認按鈕元件的結構

首先，請先確認在以下結構中，顏色會如何被覆寫。

① 原始的圖示元件為黑色

② 以實例形式複製到按鈕中，並僅覆寫顏色

③ 在此狀態下切換為其他圖示時，圖示顏色有時會恢復為預設顏色，而非白色

tips：理解主元件與覆寫的關係

最基本的注意事項是，被覆寫的屬性將不再反映主元件的變更。

已覆寫的部分：當在實例中變更顏色或文字時，該部分將變為獨立。即使之後變更主元件的相同部分，也不會套用到該實例。已覆寫的內容（填色、線條顏色、文字等）將優先顯示。

未覆寫的部分：未變更的屬性（例如 padding 或 margin）將直接反映主元件的變更。

需要特別留意的是變更主元件的圖層結構時。若變更圖層名稱，或刪除圖層後新增其他圖層，Figma 可能會將其視為不同的元素，導致實例的覆寫被重設。

基於以上內容，我們來探究為什麼圖示顏色無法切換的原因。

原因 1：「填色（Fill）」與「線條（Stroke）」的設定混雜

即使外觀相同的圖示，在 Figma 中「填色（Fill）」與「線條（Stroke）」也是完全不同的屬性。因此，若將以填色呈現的圖示切換為以線條粗細繪製的圖示，顏色覆寫可能無法正確反映。

範例：

圖示 A

圖示B

• 圖示A：由填色（Fill）構成的外框化圖示
• 圖示B：以線條（Stroke）描繪輪廓的圖示

如此一來，若圖示的繪製方式不同，套用顏色的結果也會跟著不同，因此統一表現方式是很重要的。點選圖示B時，Fill 指定了白色，但這個圖示元件只由線條構成，所以顏色無法被替換。不過其實填色的部分確實有套用白色（因為沒有填色元素，白色就無處可去了…）。

✅ 解決方法：
建議規定所有圖示都以「填色」製作。以線條繪製的圖示，務必進行外框化（command + shift + O），轉換為「填色」物件。如此一來，實作時也更容易處理。

敝公司在實作時，會將 SVG 的 path 放入 CSS 變數，或使用 Astro Icon 嵌入，因此統一採用填色方式。

若維持線條（Stroke）狀態，放大或縮小圖示時線條粗細也會跟著改變，進而造成設計走樣。除非有特殊理由，否則最好進行外框化並統一為「填色」！

若圖示僅由線條構成，放大縮小時線條的粗細會維持不變。箭頭等簡單路徑的圖示問題較少，但複雜的圖示若設定為 12px 會變得糊成一團，設定為 80px 則常常會顯得鬆散、比例失衡。

由線條構成的圖示，在變更尺寸時線條粗細也不會跟著變化，因此最好的做法是進行外框化。若想保留外框化前的原始檔案，建議將原始資料放在元件附近。

即使將線條（Stroke）構成的圖示合併後轉為填色（Fill），也常會出現部分區域大小不隨之改變等問題。

原因 2：圖層名稱不一致

在 Figma 中，切換元件的實例時，具有相同圖層名稱的元素會繼承樣式與屬性。

範例：

圖示 A

圖示B

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

像這樣圖層名稱不同時，Figma 會判定為「不同的物件」，導致覆寫的樣式無法正確套用。

✅ 解決方法：統一圖示所使用的圖層名稱（例如全部改為 Vector）

總之，想要上色的路徑圖層，先全部取同一個名稱吧！

原因 3：圖層結構（階層）不同

即使統一圖層名稱，有時切換仍不順利。這種情況可能與圖層結構的差異有關。在實例切換的來源與目標之間，若圖層數量或結構不同，屬性可能無法正確對應。不過，若圖層名稱相同，階層些微的差異有時並不會造成問題。

範例：

圖示 A

圖示B

圖示 C

• 圖示A是將「Vector（path）」轉為外框並合併為一個向量（基礎圖示）
• 圖示B的階層為「Flame（Flame） > Vector（path）」 → OK（顏色會沿用路徑名稱「Vector」）
• 圖示C的結構為「Vector（Flame） > Flame（path）」 → NG（會出現套用在名為「Vector」的 Flame 上的顏色變化）

如上所述，當圖層名稱「Vector」包含群組的結構時，需要特別留意樣式的套用方式。此外，即使名稱相同，只有最上層的顏色會改變（參見圖示C），第二層的 Vector 不會反映顏色變化。

✅ 處理方法：不只是圖層名稱，設計時確保樣式實際套用的路徑結構一致，就能更容易避免問題。

只要向量名稱相符，即使結構稍有不同，通常也沒問題。不過在團隊開發中，為了之後加入的成員著想，建議盡量統一內部結構，會更加貼心。

原因4：來源元件與「填色（Fill）」或「描邊（Stroke）」的數量不同

若為單一顏色，只要合併圖層或統一圖層結構與圖層名稱，就不必擔心。但若要切換的圖示與來源元件的「填色（Fill）」或「描邊（Stroke）」數量不同，可能只有部分顏色會切換，其他顏色維持原狀，無法達到預期效果。基本上建議圖示統一使用單一顏色。若必須使用兩種顏色，則需另外建立雙色圖示專用的顏色變數等方式來因應。

✅ 處理方法：

• 避免混用單色與多色圖示。
• 若需要多色圖示，請使用變數複製圖示元件，並製作兩色圖示專用的版本。
• 使用多色圖示時，基本上不使用顏色覆寫（Override）功能。

即使覆寫單色圖示，也只能變更一種顏色，請特別留意！

原因 5：混合模式與遮罩的影響

若圖示使用了遮罩或特殊的混合模式（如正片疊底），即使變更顏色，外觀也可能不會有任何變化。

✅ 解決方法：
若使用了遮罩或混合模式，請將物件合併或統合（Flatten）等方式，轉換為外觀相同的簡單路徑物件後再元件化。

即使如此，最後仍建議轉換為外框路徑等簡單路徑，會比較安心。若使用了正片疊底，建議透過即時描圖（Live Trace）等方式確實轉換為路徑，會比較安心。

驗證總結

實際確認的顏色套用行為

以下為在按鈕內切換各種圖示時，實際確認到的顏色套用行為（請參閱圖片）。

營運小技巧

驗證過程中發現的重點：

• 圖層名稱與結構是否一致非常重要。
• 填色建議透過 Color Style 或 Variables 管理會比較安心，但並非必須指定。
• 製作圖示時，為了方便實作，建議統一使用填色（線條在縮放時大小容易產生偏差，因此建議轉換為外框化）。
• 若想在既有圖示中新增元素，建議不要直接編輯目前已套用的 variant，而是建立新的圖示後逐一替換，這樣比較能避免顏色問題。

為了讓設計製作到實作過程更加順暢，以下是幾個重點：

• 統一框架尺寸（避免使用 24px、40px、80px 等各種不一致的尺寸）。
• 若將圖示部分設定為縮放，圖示尺寸變動時會自動調整為合適的大小（無論是實作或設計端，資料處理都會輕鬆許多）。

此外，本公司的實作規則如下：

• 顏色請設為純黑 #000（Astro Icon 的原始資料必須是黑色，否則無法變更顏色）

營運階段容易發生的問題：

• 修改既有圖示時請謹慎：營運期間若在既有圖示中新增或修改元素，結構可能會在不經意間改變，進而容易造成顏色無法套用的問題。此時，建議不要直接編輯既有元件，而是依照規則建立新的圖示元件並進行替換，會更加安全。

總結

聽懂了嗎？製作圖示時，基本上只要遵守這三條規則就沒問題囉！ 1. 繪製方式統一為「填色」（線條請轉為外框！） 2. 統一要上色之路徑的「圖層名稱」 3. 盡量保持圖示「圖層結構」簡單 另外，營運階段特別要注意的是既有圖示的修改。修改過程中結構常常會改變，導致顏色無法套用，這是很常見的問題。 因此，不要直接變更既有的圖示，而是依照規則建立新的元件，並在該元件中修改圖示。之後再於按鈕元件中，將舊圖示替換為新圖示，顏色問題應該就會大幅減少。

謝謝您！這樣我也成為圖示達人了！我會試著用前輩教我的方法來製作元件。

切換圖示的實例時，即使外觀相同，若內部結構不同，顏色也無法正確套用。

今天介紹的重點，特別是「統一為填色」與「統一圖層名稱」這兩點，只要確實遵守，大部分的問題都能避免。

若仍無法正常切換，通常是內部結構不同，或上層圖層使用了相同的名稱。

衷心希望這篇文章能幫助您讓 Figma 的設計工作更加順手。