Icon-Farbe in Figma wird nicht geändert! Leitfaden zur Lösung von Problemen beim Wechseln von Komponenten-Instanzen | Topics

Wenn man in Figma Designelemente aufteilt und gemeinsam erstellt, kann es zu unerwarteten Problemen kommen. Besonders ärgerlich ist es, wenn sich die Farbe eines als Komponente angelegten Icons nicht richtig umschalten lässt. Haben Sie das auch schon erlebt?

In diesem Artikel erklären wir verständlich das Problem, das viele Figma-Nutzer kennen: Die Farbe einer Icon-Instanz wird nicht übernommen. Wir zeigen die Ursachen und die passenden Lösungen.

Ich habe einen Button gebaut, und mein Vorgesetzter hat ihn in eine Komponente umgewandelt! Und sogar der Icon-Teil lässt sich umschalten!! Toll! Aber es fehlen noch Icons, also registriere ich jetzt nach und nach weitere Icons als Komponenten, damit das Ganze noch praktischer wird!

Ich habe stillschweigend immer neue Icons erstellt.

Hm? Irgendwie lässt sich die Icon-Komponente nicht richtig umschalten. Dabei baue ich sie genauso wie mein Vorgesetzter… Woran liegt es nur, dass sich die Farbe nicht ändert?

Das liegt an deiner Art, die Icons zu erstellen!

Chef! Wie muss ich vorgehen, damit sich die Farbe ändert?

Na gut, dann will ich dir mal verraten, wie das Umschalten von Icons in Figma funktioniert! Schreib dir alles gut auf und prägʼ es dir ein!

Ja, ich gebe mir Mühe, mir das zu merken!

Warum werden Farben übernommen? Die Funktionsweise von Overrides in Figma

Beim Erstellen eines Buttons in Figma wird häufig eingestellt, dass sich der Symbolbereich über Instanzeigenschaften austauschen lässt. Wenn man das Symbol dann tatsächlich austauscht, kommt es jedoch nicht selten vor, dass die eingestellte Farbe nicht übernommen wird oder sich unerwartet verändert.

Sind Sie in Figma schon einmal auf das Problem gestoßen, dass beim Austauschen eines Icons die eingestellte Farbe nicht übernommen wird oder gleich bleibt? In diesem Artikel erklären wir verständlich die Ursachen und zeigen Lösungswege auf.

Prüfen Sie die Einstellungen sowohl am Icon als auch am Button, damit die Farbe beim Austauschen des Icons korrekt übernommen wird.

Zunächst den Aufbau der Button-Komponente prüfen

Schauen wir uns zunächst an, in welcher Struktur sich Farb-Overrides bemerkbar machen.

(1) Die ursprüngliche Icon-Komponente ist schwarz

(2) Als Instanz in den Button kopiert, wobei nur die Farbe überschrieben wird

(3) Wechselt man in diesem Zustand zu einem anderen Icon, kann die Icon-Farbe statt Weiß auf die Standardfarbe zurückfallen

Tipps: Das Verhältnis zwischen Master-Komponenten und Overrides verstehen

Die grundlegendste Vorsicht ist: Überschriebene Eigenschaften übernehmen keine Änderungen an der Master-Komponente mehr.

Überschriebene Bereiche: Wenn Sie Farbe oder Text einer Instanz ändern, wird dieser Bereich unabhängig. Spätere Änderungen am entsprechenden Bereich der Master-Komponente werden auf diese Instanz nicht angewendet. Überschriebene Werte (z. B. Füll- und Strichfarben oder Texte) haben Vorrang.

Nicht überschriebene Bereiche: Eigenschaften, die Sie nicht verändert haben (z. B. padding oder margin), übernehmen Änderungen der Master-Komponente unverändert.

Besondere Vorsicht ist geboten, wenn Sie die Layer-Struktur der Master-Komponente ändern. Wenn Sie Layer umbenennen oder einen Layer löschen und einen neuen hinzufügen, erkennt Figma das als anderes Element, und Overrides der Instanzen können dadurch zurückgesetzt werden.

Schauen wir uns auf dieser Grundlage an, warum sich die Farbe des Icons nicht umschalten lässt.

Ursache 1: Füllung (Fill) und Kontur (Stroke) sind gemischt eingestellt

Auch wenn zwei Icons gleich aussehen, werden "Füllung (Fill)" und "Kontur (Stroke)" in Figma als völlig verschiedene Eigenschaften behandelt. Wechseln Sie daher von einem Icon, das mit Füllung dargestellt ist, zu einem Icon, das mit Strichstärke gezeichnet ist, kann das Überschreiben der Farbe unter Umständen nicht korrekt übernommen werden.

Beispiel:

Icon A

Icon B

Icon A: Ein als Umriss gestaltetes Icon, das aus Flächen (Fill) aufgebaut ist
Icon B: Ein Icon, dessen Kontur mit Linien (Stroke) gezeichnet ist

Wenn die Icons unterschiedlich gezeichnet sind, ändert sich auch das Ergebnis der Farbzuweisung. Daher ist es wichtig, die Darstellungsweise einheitlich zu halten. Wenn Sie das Icon B anklicken, ist für Fill zwar Weiß festgelegt, doch da diese Icon-Komponente nur aus Linien aufgebaut ist, wird die Farbe nicht ersetzt. Tatsächlich ist Weiß jedoch im Fill-Bereich korrekt übernommen (da kein Flächenelement vorhanden ist, hat das Weiß keinen Ort, an den es gehen kann …).

✅ Lösung:
Legen Sie als Regel fest, dass alle Icons als „Fläche“ erstellt werden. Linienbasierte Icons sollten immer in Umrisse umgewandelt (command + shift + O) und als Flächenobjekte umgewandelt werden. Dadurch lassen sich die Icons auch bei der Implementierung leichter handhaben.

Bei uns werden die SVG-Pfade bei der Implementierung in CSS-Variablen eingefügt oder mit Astro Icon eingebunden. Deshalb verwenden wir durchgängig Flächen (Fill).

Bleiben Icons bei Linien (Stroke), ändert sich beim Vergrößern oder Verkleinern die Strichstärke, und das Design kann dadurch aus dem Gleichgewicht geraten. Sofern es keinen besonderen Grund gibt, ist es am besten, die Icons in Umrisse umzuwandeln und einheitlich als Fläche (Fill) zu gestalten!

Bei Icons, die nur aus Linien bestehen, bleibt die Linienstärke beim Skalieren gleich. Bei einfachen Pfaden wie Pfeilen gibt es meist wenig Probleme, bei komplexen Icons wirkt das Ergebnis jedoch häufig bei 12px zu gedrängt oder bei 80px zu gestreckt.

Icons, die aus Linien aufgebaut sind, ändern beim Skalieren auch ihre Strichstärke. Am besten wandeln Sie sie daher in Umrisse um. Wenn Sie den Stand vor der Umwandlung behalten möchten, legen Sie die Originaldaten am besten in der Nähe der Komponente ab.

Auch Linien (Stroke), die zusammengefügt werden, wechseln zu Fläche (Fill). Dabei treten jedoch häufig Probleme auf, etwa dass sich nur einzelne Teile nicht in der Größe verändern.

Ursache 2: Die Ebenennamen stimmen nicht überein

In Figma gilt die Regel, dass beim Austauschen einer Instanz einer Komponente Stile und Eigenschaften auf Elemente mit demselben Ebenennamen übertragen werden.

Beispiel:

Icon A

Icon B

Ebenenname des Vektors von Symbol A: Vector
Ebenenname des Vektors von Symbol B: Vector2

Wenn sich die Ebenennamen auf diese Weise unterscheiden, betrachtet Figma die Elemente als "unterschiedlich", und die überschriebenen Stile werden nicht korrekt angewendet.

✅ Lösung: Einheitliche Ebenennamen für Symbole verwenden (z. B. alle Vector)

Am einfachsten gibst du allen Pfaden, denen du eine Farbe zuweisen möchtest, einfach denselben Ebenennamen!

Ursache 3: Unterschiedliche Ebenenstruktur (Hierarchie)

Manchmal wechselt die Instanz auch dann nicht richtig, wenn die Ebenennamen einheitlich sind. In diesem Fall könnten Unterschiede in der Ebenenstruktur die Ursache sein. Wenn sich die Anzahl oder der Aufbau der Ebenen zwischen der ursprünglichen und der neuen Instanz unterscheidet, werden Eigenschaften unter Umständen nicht korrekt zugeordnet. Allerdings ist ein leicht unterschiedlicher Verschachtelungsgrad bei gleichen Ebenennamen in manchen Fällen unproblematisch.

Beispiel:

Icon A

Icon B

Symbol C

Icon A wird als "Vector(path)" in Umrisse umgewandelt und zu einem einzigen Vektor zusammengefasst (das Basis-Icon).
Icon B hat die Hierarchie "Flame(Flame) > Vector(path)" → OK (die Farbe wird vom Pfadnamen "Vector" übernommen).
Icon C hat die Struktur "Vector(Flame) > Flame(path)" → NG (die für den Flame-Layer mit dem Namen "Vector" festgelegte Farbänderung wird sichtbar).

Bei Strukturen, in denen der Ebenenname "Vector" eine Gruppe enthält, ist auf die Stilzuweisung zu achten. Außerdem ändert sich die Farbe nur auf der obersten Ebene, selbst wenn der Name gleich ist (siehe Icon C). Eine Farbänderung wird auf der zweiten Ebene "Vector" nicht übernommen.

✅ Lösung: Nicht nur die Ebenennamen, sondern auch die Pfadstruktur, auf die der Stil tatsächlich angewendet wird, sollte übereinstimmend aufgebaut werden. Dadurch lassen sich Probleme leichter vermeiden.

Stimmen die Vektornamen überein, funktioniert es oft auch dann, wenn die Struktur leicht abweicht. In Teamprojekten ist es jedoch hilfreich für Personen, die später dazukommen, den inneren Aufbau möglichst einheitlich zu halten.

Ursache 4: Die Anzahl der Füllungen (Fill) und Striche (Stroke) unterscheidet sich von der ursprünglichen Komponente.

Bei einfarbigen Icons gibt es keine Probleme, wenn Ebenen zusammengeführt oder die Ebenenstruktur und Ebenennamen vereinheitlicht werden. Wird jedoch ein Icon verwendet, das eine andere Anzahl an Füllungen (Fill) oder Strichen (Stroke) als die ursprüngliche Komponente hat, kann es vorkommen, dass nur einige Farben umgestellt werden, während andere unverändert bleiben, und das Ergebnis nicht wie beabsichtigt aussieht. Grundsätzlich sollten Icons einfarbig gestaltet werden. Falls zwei Farben nötig sind, empfiehlt es sich, dafür eine separate Icon-Variable für zweifarbige Icons anzulegen.

✅ Lösung:

Einfarbige und mehrfarbige Icons nicht mischen.
Wenn mehrfarbige Icons benötigt werden, duplizieren Sie die Icon-Komponente über eine Variable und erstellen eine Version für zweifarbige Icons.
Bei der Verwendung mehrfarbiger Icons sollten Farb-Overrides grundsätzlich nicht eingesetzt werden.

Beim Überschreiben einfarbiger Icons lässt sich nur eine einzige Farbe ändern, also bitte aufpassen!

Ursache 5: Einfluss von Blend-Modi und Masken

Wenn Icons Masken oder spezielle Blend-Modi (z. B. Multiplizieren) verwenden, kann es vorkommen, dass sich die Darstellung trotz Farbänderung nicht verändert.

✅ Lösung:
Wenn Masken oder Blend-Modi verwendet werden, sollten Sie die Objekte kombinieren bzw. zusammenführen (Flatten) und so in einfache Pfadobjekte umwandeln, die der Darstellung entsprechen, bevor Sie sie zu einer Komponente machen.

Auch in diesem Fall ist es am sichersten, die Formen zum Schluss in Konturen umzuwandeln, um einfache Pfade zu erhalten. Wird Multiplizieren verwendet, empfiehlt es sich, die Objekte per Live Trace gründlich in Pfade umzuwandeln.

Prüfungszusammenfassung

Ursache	Inhalt	Lösungsansätze
Abweichung bei den Ebenennamen	Eigenschaften werden beim Wechseln der Instanz nicht übernommen	Ebenennamen bei allen Icons vereinheitlichen (z. B. Vector)
Abweichung in der Ebenenstruktur	Wenn sich Ebenenhierarchie oder -struktur unterscheiden, werden Styles unter Umständen nicht angewendet	Die Struktur der finalen Render-Objekte angleichen
Anzahl der Ebenen weicht vom Ausgangskomponenten ab	Anzahl der Fills weicht von der Ausgangskomponente ab	Lösung über Style-Anwendung, zusammengesetzte Pfade und Merge
Blend/Maske	Farbe wird visuell nicht angewendet	`Normal`-Mischmodus zurücksetzen, Maske aufheben

Tatsächlich beobachtetes Verhalten der Farbübernahme

Im Folgenden ist das Verhalten der Farbübernahme dargestellt, das beim Wechseln verschiedener Symbole innerhalb der Schaltfläche beobachtet wurde (siehe Abbildung).

Testmuster	Ergebnis	Hinweise
Pfade in Konturen umwandeln	✅ Farbübernahme vorhanden	Einfache Struktur, dadurch stabil. Nachträgliche Bearbeitung ist jedoch nur schwer möglich.
Wenn Pfade boolesch verknüpft werden (z. B. vereinigt)	✅ Farbübernahme vorhanden	Solange der oberste Ebenenname gleich bleibt, gibt es keine besonderen Probleme. Wenn die Anzahl der direkt untergeordneten Ebenen mit der Originalinstanz übereinstimmt, wird korrekt umgeschaltet.
Die Vektor-Hierarchie unterscheidet sich (Group > Vector).	✅ Farbübernahme vorhanden	Solange die Ebenennamen an der betreffenden Stelle übereinstimmen, ist alles in Ordnung. Wenn sich die Struktur unterscheidet oder Namen doppelt vorkommen, kann die Darstellung jedoch fehlerhaft sein.
Komplexere Formen (z. B. Überblendungen oder vereinigte Pfade)	✅ Farbübernahme vorhanden	Wenn Pfade zusammengefasst werden, ist die Darstellung stabil.
Wenn der Quellvektor in eine Gruppe oder einen Frame verschoben wird oder die Struktur anderweitig verändert wird	🔺 Auch wenn die Farbe nicht übernommen wird	Da diese vermutlich als eigenständige Ebene erkannt werden, ist es bei Ergänzungen zuverlässiger, die Komponente zu duplizieren und diese Kopie zu bearbeiten.
Vector-Name weicht ab	❌ Die Farbe wird nicht übernommen	Abweichende Ebenennamen werden als eigenständige Ebenen erkannt
Die interne Struktur ist im Vergleich zu den Originaldaten komplexer und weist viele Abweichungen auf	❌ Die Farbe wird nicht angewendet	Bei zunehmender Anzahl an Ebenen oder Frames werden nur noch einige Farben übernommen. Die Abweichungen sind groß, sodass die Ebenen mit hoher Wahrscheinlichkeit als unterschiedliche Ebenen behandelt werden
Austausch nach dem Löschen der Quelle	❌ Die Farbe wird nicht übernommen	Auch bei gleichem Namen werden sie getrennt behandelt
Wenn der übergeordnete Frame des Icon-Pfads einen Frame mit demselben Namen enthält	❌ Die Farbe wird vom übergeordneten Frame überlagert	Farbänderungen werden auf Frames mit demselben Namen im übergeordneten Element angewendet, daher greift der Stil nicht auf den Pfad.

Praxistipps für den Betrieb

Wichtige Erkenntnisse aus der Überprüfung:

Entscheidend ist, dass Ebenennamen und Struktur übereinstimmen.
Füllungen lassen sich sicher über Color Styles oder Variables verwalten, müssen aber nicht zwingend festgelegt werden.
Erstellen Sie Icons einheitlich mit Füllungen, um die Implementierung zu erleichtern. Linien verschieben sich beim Skalieren leicht in der Größe, daher empfiehlt sich die Umwandlung in Konturen.
Wenn Sie einem bestehenden Icon Elemente hinzufügen möchten, bearbeiten Sie nicht die aktuell angewendete Variante, sondern erstellen Sie ein neues Icon und ersetzen Sie die Icons nacheinander. So lassen sich Farbprobleme leichter vermeiden.

Tipps für einen reibungslosen Ablauf von der Gestaltung bis zur Implementierung:

Vereinheitlichen Sie die Frame-Größen (z. B. nicht unterschiedliche Größen wie 24px, 40px, 80px).
Wenn Icon-Bereiche skaliert werden, passt sich die Icon-Größe automatisch an. Das erleichtert die Implementierung und auch die Datenverwaltung im Design deutlich.

Außerdem unsere internen Implementierungsregeln:

Die Farbe auf reines Schwarz #000 setzen (Astro Icon funktioniert nur dann mit Farbänderungen, wenn die Originaldaten schwarz sind).

Häufige Probleme in der Betriebsphase:

Bestehende Icons sollten mit Bedacht überarbeitet werden: Wenn während des Betriebs Elemente zu bestehenden Icons hinzugefügt oder diese geändert werden, verändert sich die Struktur oft unbeabsichtigt, und es kommt häufig zu Problemen bei der Farbdarstellung. In diesem Fall ist es sicherer, bestehende Komponenten nicht direkt zu bearbeiten, sondern die Regeln zu befolgen und eine neue Icon-Komponente zu erstellen und die alte zu ersetzen.

Fazit

Alles klar? Beim Erstellen von Icons reicht es im Grunde, sich an diese drei Regeln zu halten! 1. Mit Füllungen zeichnen, einheitlich (Linien in Konturen umwandeln!) 2. Die Ebenennamen der Pfade, die eingefärbt werden sollen, einheitlich benennen 3. Die Ebenenstruktur des Icons so einfach wie möglich halten Besonders aufpassen solltest du bei der Überarbeitung bestehender Icons in der Betriebsphase. Dabei verändert sich oft die Struktur, und die Farbe wird nicht mehr übernommen. Deshalb solltest du bestehende Icons nicht direkt ändern, sondern die Regeln befolgen, eine neue Komponente erstellen und das Icon dort überarbeiten. Anschließend ersetzt du in der Button-Komponente das alte Icon durch das neue. Dann treten Farbprobleme deutlich seltener auf.

Vielen Dank! Jetzt bin ich auch ein Icon-Meister! Ich werde versuchen, Komponenten so zu erstellen, wie du es mir gezeigt hast!

Beim Wechseln von Icon-Instanzen funktioniert die Farbübernahme nicht richtig, auch wenn das Aussehen gleich ist, weil sich die interne Struktur unterscheidet.

Wenn Sie die heute vorgestellten Punkte, insbesondere „Einheitlich mit Füllungen“ und „Ebenennamen vereinheitlichen“, konsequent umsetzen, lassen sich die meisten Probleme bereits vermeiden.

Wenn das Umschalten dennoch nicht funktioniert, liegt es meist an Unterschieden in der internen Struktur oder daran, dass übergeordnete Ebenen denselben Namen tragen.

Wir hoffen, dass dieser Artikel Ihnen die Arbeit mit Figma etwas erleichtert.