Figma: Symbolarben ändern sich nicht – Anleitung zur Behebung von Komponenteninstanz-Umschaltungsproblemen

Wenn Sie in Figma Designkomponenten gemeinsam erstellen, können unerwartet Probleme auftreten. Haben Sie schon mal die frustrierende Erfahrung gemacht, dass die Farbe eines Symbol-Komponenten nicht richtig wechselt?

In diesem Artikel erklären wir verständlich das Problem, das viele Figma-Nutzer kennen: "Die Farbe von Symbol-Instanzen wird nicht aktualisiert", sowie dessen Ursachen und Lösungen.

Mein Senior hat den Button, den ich erstellt habe, als Komponente aufgebaut! Und der Symbol-Teil lässt sich auch wechseln! Großartig! Aber wir brauchen mehr Symbole, also werde ich fleißig mehr Symbol-Komponenten registrieren und das Ganze noch besser verwenden!

Ich erstellte unermüdlich Symbol nach Symbol.

Moment? Die Symbol-Komponente wechselt nicht richtig... Ich mache es doch genauso wie mein Senior... Warum ändert sich die Farbe nicht?

Das liegt daran, wie du deine Symbole erstellst!

Senior! Wie kann ich erreichen, dass sich die Farbe ändert?

Hehe, sehr gerne! Ich zeige dir das Geheimnis zum Wechsel von Figma-Symbolen. Merke dir alles gut und präge es dir ein!

Ja! Ich werde es mir gut einprägen!

Warum werden Farben vererbt? So funktionieren Overrides in Figma

Beim Erstellen von Schaltflächen in Figma ist es üblich, das Symbol (Icon) über Instanzeigenschaften austauschbar zu machen. Allerdings treten häufig Probleme auf, bei denen die eingestellte Farbe nicht übernommen wird oder sich unerwartet ändert, wenn das Symbol gewechselt wird.

Haben Sie schon einmal ein Problem in Figma erlebt, bei dem die eingestellte Farbe nicht übernommen wird oder sich die Farbe nicht ändert, wenn Sie ein Symbol austauschen? In diesem Artikel erklären wir die Ursachen und Lösungen verständlich.

Überprüfen Sie die Einstellungen sowohl auf der Symbol- als auch auf der Schaltflächenseite, damit die Farbe beim Symbolwechsel korrekt geändert wird.

Überprüfen Sie zunächst die Struktur des Schaltflächenkomponente

Überprüfen Sie zunächst die folgende Struktur, um eine Situation zu verstehen, in der Farben overridden werden.

① Das ursprüngliche Symbol ist schwarz

② Als Instanz innerhalb der Schaltfläche kopiert, mit nur der Farbe overridden

③ Wenn Sie das Symbol in dieser Situation austauschen, kehrt die Symbolfarbe manchmal zur Standardfarbe zurück, anstatt weiß zu sein

Tipps: Verstehen Sie die Beziehung zwischen Masterkomponenten und Overrides

Der wichtigste Punkt ist, dass überschriebene Eigenschaften nicht länger Änderungen an der Masterkomponente widerspiegeln.

Überschriebene Teile: Wenn Sie in einer Instanz Farben oder Text ändern, werden diese Teile unabhängig. Wenn Sie später die gleichen Teile in der Masterkomponente ändern, werden diese Änderungen nicht auf diese Instanz angewendet. Die überschriebenen Eigenschaften (wie Füllfarbe, Strichfarbe oder Text) haben Vorrang.

Nicht überschriebene Teile: Unveränderte Eigenschaften (z. B. Padding oder Margin) spiegeln Änderungen an der Masterkomponente direkt wider.

Besonders wichtig ist es, auf Änderungen der Ebenenstruktur der Masterkomponente zu achten. Wenn Sie Ebenennamen ändern oder Ebenen löschen und neue hinzufügen, erkennt Figma diese als separate Elemente an, und die Overrides der Instanz können zurückgesetzt werden.

Lassen Sie uns mit diesem Wissen nach der Ursache suchen, warum sich die Symbolfarbe nicht ändert.

Grund 1: Einstellungen für "Füllung" und "Strich" sind gemischt

Auch wenn Symbole auf den ersten Blick identisch aussehen, werden "Füllung" und "Strich" in Figma als völlig separate Eigenschaften behandelt. Wenn Sie daher von einem mit Füllung gestalteten Symbol zu einem mit Strichdicke gezeichneten Symbol wechseln, werden Farbüberschreibungen möglicherweise nicht korrekt angewendet.

Beispiel:

Symbol A

Symbol B

• Symbol A: Ein umrisshaftes Symbol, das aus einer Füllung (Fill) besteht
• Symbol B: Symbol mit Umriss in Linien (Stroke)

Wie hier zu sehen ist, führen unterschiedliche Zeichenmethoden für Icons zu unterschiedlichen Farbverwerbungsergebnissen. Daher ist es wichtig, die Darstellungsmethode zu standardisieren. Wenn man auf Icon B klickt, ist die Füllfarbe auf Weiß eingestellt, aber da dieses Icon-Komponente nur aus Linien besteht, ändert sich die Farbe nicht. Allerdings wird Weiß tatsächlich im Füll-Bereich angewendet (da es kein Füll-Element gibt, hat die Weiße Farbe keinen Platz…).

✅ Lösung:
Alle Symbole sollten als Flächen erstellt werden. Symbole, die als Striche gezeichnet sind, müssen unbedingt in Pfade konvertiert werden ((command+shift+O)) und dann in Flächenobjekte umgewandelt werden. Dies hat den Vorteil, dass die Implementierung später leichter zu handhaben ist.

Bei unserer Implementierung verwenden wir SVG-Pfade als CSS-Variablen oder integrieren sie über Astro Icon, daher halten wir die Farbgebung durchgehend einheitlich.

Wenn Sie nur Striche (Stroke) verwenden, ändert sich die Strichstärke beim Skalieren des Symbols nach oben oder unten, was zu einem Designbruch führen kann. Sofern es keinen besonderen Grund gibt, ist es am besten, die Striche in Pfade umzuwandeln und alles mit Füllungen einheitlich zu gestalten!

Wenn Symbole nur aus Linien aufgebaut sind, bleibt die Linienstärke gleich, wenn das Symbol skaliert wird. Bei einfachen Pfaden wie Pfeilen ist das kein großes Problem, aber bei komplexeren Symbolen wird es bei 12 px oft zu klein und verformt sich, während es bei 80 px häufig überproportional und gedehnt wirkt.

Icons, die aus Linien erstellt werden, ändern ihre Linienstärke nicht, wenn sie skaliert werden. Daher ist es am besten, diese zu konvertieren. Wenn Sie die Daten vor der Konvertierung behalten möchten, speichern Sie das Original in der Nähe der Komponente.

Auch wenn mit Linien (Stroke) erstellte Objekte zusammengeführt und in Flächen (Fill) umgewandelt werden, treten häufig Probleme auf, bei denen sich nur Teile nicht in der erwarteten Größe verändern.

Grund 2: Ebenennamen stimmen nicht überein

Figma hat eine Spezifikation, bei der beim Wechsel von Komponenteninstanzen Stile und Eigenschaften auf Elemente mit demselben Ebenennamen übertragen werden.

Beispiel:

Symbol A

Symbol B

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

Wenn die Ebenennamen auf diese Weise unterschiedlich sind, betrachtet Figma sie als "unterschiedliche Objekte" und die überschriebenen Stile werden nicht korrekt angewendet.

✅ Lösung: Ebennamen für Symbole vereinheitlichen (Beispiel: alle Vector nennen)

Vereinheitlicht einfach alle Ebenennamen der Pfade, denen ihr eine Farbe geben wollt!

Grund 3: Ebenenstruktur (Hierarchie) ist unterschiedlich

Auch wenn die Ebenennamen vereinheitlicht werden, funktioniert der Wechsel manchmal nicht richtig. In diesem Fall können Unterschiede in der Ebenenstruktur eine Rolle spielen. Wenn die Quelle und das Ziel der Instanzumschaltung unterschiedliche Ebenenzahlen oder Strukturen aufweisen, werden die Eigenschaften möglicherweise nicht korrekt zugeordnet. Allerdings gibt es Fälle, in denen bei gleichen Ebenennamen kleinere Unterschiede in der Hierarchie kein Problem darstellen.

Beispiel:

Symbol A

Symbol B

Symbol C

• Symbol A: «Vector（path）» in Pfade konvertieren und zu einem einzelnen Vektor zusammenfassen (Basis-Symbol)
• Symbol B: «Flame（Flame） > Vector（path）» Hierarchie → OK (die Farbe wird an den Pfadnamen «Vector» vererbt)
• Symbol C: «Vector（Flame） > Flame（path）» Struktur → NICHT OK (die Farbänderung, die für den Namen «Vector» festgelegt ist, tritt auf)

Auf diese Weise ist bei Strukturen, in denen der Schichtname «Vector» eine Gruppe enthält, Vorsicht bei der Stilanwendung geboten. Auch wenn der Name gleich ist, ändert sich die Farbe nur auf der obersten Ebene (siehe Symbol C), und die Farbänderung wird auf den Vector in der zweiten Ebene nicht angewendet.

✅ Lösung: Wenn Sie nicht nur die Schichtnamen, sondern auch die tatsächliche Pfadstruktur, auf die der Stil angewendet wird, konsistent gestalten, lassen sich Probleme leichter vermeiden.

Wenn die Vektornamen übereinstimmen, funktioniert es in den meisten Fällen auch bei leicht unterschiedlichen Strukturen. Aber in der Teamarbeit ist es rücksichtsvoll, die interne Struktur soweit wie möglich zu standardisieren, damit auch später beigetretene Mitarbeiter problemlos arbeiten können.

Grund 4: Unterschiedliche Anzahl von Füllungen und Strichen im Vergleich zur ursprünglichen Komponente

Bei einer Farbe können Sie sich beruhigt zurücklehnen, wenn Sie die Ebenen zusammenführen oder die Ebenenstruktur und Ebenennamen einheitlich gestalten. Wenn Sie jedoch zu Symbolen mit unterschiedlicher Anzahl von Füllungen («Fill») oder Strichen («Stroke») im Vergleich zur ursprünglichen Komponente wechseln, kann es vorkommen, dass nur einige Farben wechseln und andere gleich bleiben, was nicht zum gewünschten Ergebnis führt. Grundsätzlich sollten Symbole in einer Farbe einheitlich sein. Falls zwei Farben erforderlich sind, ist es ratsam, separate Symbolvariablen für zweifarbige Symbole zu erstellen.

✅ Lösung:

• Mischen Sie nicht einfarbige und mehrfarbige Symbole.
• Wenn mehrfarbige Symbole erforderlich sind, duplizieren Sie die Symbolkomponente in der Variablen und erstellen Sie eine Version für zweifarbige Symbole.
• Wenn Sie mehrfarbige Symbole verwenden, sollten Sie grundsätzlich keine Farbüberschreibungen verwenden.

Beachten Sie: Auch wenn Sie ein einfarbiges Symbol überschreiben, können Sie nur eine Farbe ändern!

Ursache 5: Auswirkungen von Mischmodus und Maske

Wenn das Symbol eine Maske oder einen speziellen Mischmodus (z. B. Multiplizieren) verwendet, kann das Ändern der Farbe möglicherweise keine sichtbaren Auswirkungen haben.

✅ Abhilfe:
Wenn Sie Masken oder Mischmodi verwenden, vereinigen oder flachen Sie das Objekt ab und konvertieren Sie es in ein einfaches Pfadobjekt entsprechend der visuellen Darstellung, bevor Sie es zu einer Komponente machen.

Auch in diesem Fall ist es sicher, das Objekt am Ende zu konvertieren oder zu vereinfachen. Wenn Sie Multiplizieren verwenden, ist es sicher, das Objekt mit Live Trace gründlich in Pfade zu konvertieren.

Überprüfungszusammenfassung

Tatsächlich bestätigtes Farbwiedergabe-Verhalten

Im Folgenden finden Sie das bestätigte Farbwiedergabe-Verhalten beim Wechsel verschiedener Symbole innerhalb von Schaltflächen (siehe Bilder).

Betriebstipps

Wichtige Erkenntnisse aus der Überprüfung:

• Es ist äußerst wichtig, dass die Layer-Namen und die Struktur übereinstimmen
• Die Verwaltung der Füllung über Color Style oder Variables ist zuverlässig, ist aber nicht unbedingt erforderlich
• Bei der Ikonen-Erstellung sollte auf einheitliche Füllung geachtet werden, um die Implementierung zu vereinfachen. Striche können bei Größenänderungen zu Versatz führen, daher wird Umrisspfad empfohlen
• Wenn Sie einem vorhandenen Icon ein Element hinzufügen möchten, vermeiden Sie das Bearbeiten der aktuell angezeigten Variante. Erstellen Sie stattdessen ein neues Icon und ersetzen Sie die einzelnen Elemente nacheinander, um Farbprobleme zu vermeiden

Wichtige Punkte für einen reibungslosen Ablauf vom Design zur Implementierung:

• Vereinheitlichen Sie die Frame-Größen (verwenden Sie nicht unterschiedliche Größen wie 24px, 40px, 80px)
• Der Icon-Bereich wird bei Größenänderungen automatisch proportional zur Icon-Größe skaliert (dies vereinfacht die Datenverarbeitung sowohl in der Implementierung als auch im Design erheblich)

Zusätzlich unsere Implementierungsrichtlinien:

• Farbe auf reines Schwarz #000 setzen (Astro Icon funktioniert bei Farbänderungen nur, wenn die Originaldaten bereits schwarz sind)

Häufig auftretende Probleme in der Betriebsphase:

• Vorsicht bei der Bearbeitung bestehender Symbole: Wenn Sie während des Betriebs Elemente zu bestehenden Symbolen hinzufügen oder diese bearbeiten, kann sich die Struktur unbeabsichtigt ändern und es entstehen Farbprobleme. In diesem Fall ist es sicherer, das bestehende Komponentenzu nicht direkt zu bearbeiten, sondern nach den Regeln ein neues Symbolkomponentenzu erstellen und auszutauschen.

Fazit

Hast du das verstanden? Bei der Erstellung von Symbolen brauchst du grundsätzlich nur diese 3 Regeln zu beachten! 1. Verwende durchgehend die "Fläche"-Methode zum Zeichnen (Linien müssen in Pfade konvertiert werden!) 2. Vereinheitliche den "Ebenennamen" für Pfade, die Farbe erhalten sollen 3. Halte die "Ebenenstruktur" des Symbols so einfach wie möglich Und besonders in der Betriebsphase solltest du auf die Bearbeitung bestehender Symbole achten. Während der Bearbeitung ändern sich häufig die Strukturen, wodurch Farbprobleme entstehen. Daher solltest du bestehende Symbole nicht direkt ändern, sondern nach den Regeln neue Komponenten erstellen und dort die Symbole bearbeiten. Anschließend kannst du im Schaltflächenkomponente das alte Symbol durch das neue ersetzen – dadurch sollten Farbprobleme deutlich seltener auftreten.

Vielen Dank! Jetzt bin auch ich ein Symbol-Experte! Ich werde die Komponenten mit der Methode erstellen, die mir der Senior beigebracht hat!

Wenn du Symbol-Instanzen austauschst, funktioniert die Farbreflektion nicht richtig, auch wenn das Aussehen gleich ist, aber die interne Struktur unterschiedlich ist.

Die in diesem Artikel vorgestellten Punkte – besonders die beiden Aspekte "Vereinheitlichung der Fläche" und "Vereinheitlichung der Ebenennamen" – sollten fast alle Probleme verhindern, wenn du sie konsequent befolgst.

Wenn es trotzdem nicht richtig funktioniert, liegt es häufig an Unterschieden in der internen Struktur oder daran, dass übergeordnete Ebenen den gleichen Namen haben.

Ich hoffe, dieser Artikel hilft dir, deine Design-Arbeit in Figma angenehmer zu gestalten.