Topics

Beim Erstellen von Designelementen in Figma und beim Teilen der Arbeit können unerwartete Probleme auftreten. Hatten Sie beispielsweise schon einmal Schwierigkeiten damit, dass sich die Farbe eines Komponentensymbols nicht korrekt ändert?

In diesem Artikel erklären wir die Ursache und die Lösung für das Problem, dass die Farben von Symbolinstanzen nicht korrekt angezeigt werden, mit dem viele Figma-Benutzer konfrontiert sind.

Mein erfahrener Kollege hat den von mir erstellten Button in eine Komponente umgewandelt! Und das Beste: Man kann sogar das Symbol ändern! Fantastisch! Allerdings gibt es noch nicht genug Symbole, deshalb werde ich weiterhin Symbole als Komponenten registrieren und die Komponente so benutzerfreundlich wie möglich gestalten!

Ich habe im Stillen Icons erstellt.

Hä? Die Icon-Komponenten wechseln nicht richtig? Ich bin mir sicher, dass ich sie genauso erstelle wie mein Kollege... Warum wechseln die Farben nicht richtig?

Das liegt an der Art und Weise, wie du deine Icons erstellst!

Senpai! Wie kann ich die Farbe ändern?

Das ist ja toll! Ich verrate dir das Geheimnis, wie man in Figma Icons wechselt. Mach dir unbedingt Notizen und merke sie dir!

Ja! Ich werde mein Bestes geben, es mir zu merken!

Warum werden Farben vererbt? Wie funktionieren Figma-Überschreibungen?

Beim Erstellen von Schaltflächen in Figma ist es üblich, das Symbol über Instanzeigenschaften änderbar zu machen. Beim Wechseln der Symbole treten jedoch häufig Probleme auf, z. B. wird die Farbe nicht übernommen oder ändert sich nicht automatisch.

Wenn Sie in Figma die Symbole wechseln,Die von mir eingestellte Farbe wird nicht wiedergegeben/die Farbe ändert sich nichtSind Sie jemals auf das oben genannte Problem gestoßen? In diesem Artikel erklären wir die Ursachen und Lösungen auf leicht verständliche Weise.

Achten Sie darauf, die Einstellungen auf der Symbol- und Schaltflächenseite zu überprüfen, um sicherzustellen, dass sich die Farbe beim Wechseln der Symbole ordnungsgemäß ändert.

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

Schauen wir uns zunächst an, wie Farben mithilfe der folgenden Struktur überschrieben werden:

① Die ursprüngliche Symbolkomponente ist schwarz

② Kopiere es als Instanz in den Button und überschreibe nur die Farbe.

3. Wenn Sie in diesem Zustand zu einem anderen Symbol wechseln, kann es vorkommen, dass die Symbolfarbe wieder auf die Standardfarbe ansondern ein auf Weiß zurückgesetzt wird.

Tipp: Verstehen Sie die Beziehung zwischen Masterkomponenten und Überschreibungen.

Am wichtigsten ist, dass alle Eigenschaften, die Sie überschreiben, Änderungen, die in der Masterkomponente vorgenommen wurden, nicht mehr widerspiegeln.

Der überschriebene TeilWenn Sie die Farbe oder den Text einer Instanz ändern, wird dieser Teil unabhängig. Wenn Sie später denselben Teil in der Masterkomponente ändern, wird diese Änderung nicht auf die Instanz angewendet. Überschreibungen (Füllung, Konturfarbe, Text usw.) haben Vorrang.

Teile, die nicht überschrieben werdenEigenschaften, die Sie nicht geändert haben (z. B. Innenabstand und Außenabstand), spiegeln die Änderungen wider, die in der Masterkomponente vorgenommen wurden.

Seien Sie besonders vorsichtig, wenn Sie die Ebenenstruktur Ihrer Masterkomponente ändern: Wenn Sie eine Ebene umbenennen oder eine Ebene löschen und eine neue hinzufügen, erkennt Figma diese möglicherweise als ein anderes Element und setzt die Instanzüberschreibungen zurück.

Vor diesem Hintergrund wollen wir uns ansehen, warum sich die Symbolfarbe nicht ändert.

Ursache 1: Die Einstellungen für Füllung und Kontur sind gemischt.

Auch wenn die Icons auf den ersten Blick gleich aussehen, werden „Füllung“ und „Kontur“ in Figma als völlig separate Eigenschaften behandelt. Wenn Sie also von einem Icon mit Füllung zu einem Icon mit Konturstärke wechseln, wird die Farbüberschreibung möglicherweise nicht korrekt übernommen.

Beispiel:

Symbol A

Symbol B

• Symbol A: Ein umrandetes Symbol mit Füllung.
• Symbol B: Ein Symbol mit einer Umrandung (Kontur)

Wenn das Symbol anders gezeichnet wird, ändert sich somit auch das Ergebnis der Farbanwendung.Es ist wichtig, den Ausdruck einheitlich zu halten.Beim Klicken auf Symbol B wird die Füllung auf Weiß gesetzt. Da diese Symbolkomponente jedoch nur aus Linien besteht, wird die Farbe nicht geändert. Die Füllung ist aber tatsächlich korrekt auf Weiß eingestellt (da kein Füllelement vorhanden ist, kann das Weiß aber nirgendwo hin...).

✅ Lösung：
Die Regel lautet, alle Icons mit einem „Füllungseffekt“ zu erstellen. Mit Linien gezeichnete Icons müssen in Konturen umgewandelt werden (command+shift+O) um es in ein „paint“-Objekt umzuwandeln. Dies hat den Vorteil, dass es bei der Implementierung einfacher zu handhaben ist.

In unserem Fall speichern wir bei der Implementierung den SVG-Pfad in einer CSS-Variable oder integrieren ihn mit Astro Icon, sodass alles einheitlich dargestellt wird.

Wenn Sie die Linienstärke als Kontur festlegen, ändert sich diese beim Skalieren des Symbols, was zu Darstellungsfehlern führen kann. Sofern kein besonderer Grund vorliegt, empfiehlt es sich, die Kontur zu definieren und eine einheitliche Füllung zu verwenden.

Wenn Sie ein Symbol nur aus Linien erstellen, bleibt die Linienstärke beim Skalieren des Symbols gleich. Bei einfachen Pfaden wie Pfeilen ist das kein Problem, aber bei komplexeren Symbolen wirken 12 Pixel zu stark gestaucht und 80 Pixel oft zu stark gestreckt.

Icons, die aus Linien bestehen, sollten am besten umrandet werden, da sich die Linienstärke beim Skalieren nicht ändert. Wenn die Originaldaten vor der Umrandung erhalten bleiben sollen, platzieren Sie diese in der Nähe des Icons.

Wenn Sie etwas, das mit einer Kontur erstellt wurde, mit einer Füllung kombinieren, wird es in eine Füllung umgewandelt. Aber auch in diesem Fall treten oft Probleme auf, z. B. dass sich nur ein Teil der Form nicht in der Größe ändert.

Ursache 2: Die Ebenennamen stimmen nicht überein

In Figma, KomponentenBeim Wechsel zwischen Instanzen werden Stile und Eigenschaften für Elemente mit demselben Ebenennamen vererbt.Es gibt eine Spezifikation, die besagt:

Beispiel:

Symbol A

Symbol B

• Symbol A Vektorebenenname:Vector
• Name der Vektorebene „Symbol B“:Vector2

Wenn die Ebenennamen auf diese Weise unterschiedlich sind, geht Figma davon aus, dass sie „unterschiedliche“ sind, und die überschriebenen Stile werden nicht richtig angewendet.

✅ Lösung: Vereinheitlichen Sie die in den Symbolen verwendeten Ebenennamen (z. B. Alle).Vector）

Stellen wir zunächst sicher, dass alle Ebenennamen für die Pfade, die Sie einfärben möchten, identisch sind!

Ursache 3: Unterschiedliche Schichtstrukturen (Hierarchien)

Selbst wenn Sie die Layernamen vereinheitlichen, funktioniert das Umschalten möglicherweise nicht ordnungsgemäß. In diesem Fall könnte dies mit Unterschieden in der Layerstruktur zusammenhängen.Wenn die Anzahl der Schichten oder die Struktur unterschiedlich ist, werden die Eigenschaften möglicherweise nicht korrekt zugeordnet..Jedoch,In einigen Fällen stellen geringfügige Unterschiede in der Hierarchie kein Problem dar, solange die Ebenennamen übereinstimmen.。

Beispiel:

Symbol A

Symbol B

Symbol C

• Symbol A ist "Vektor（path）" Umriss und zu einem Vektor kombinieren (Basissymbol)
• Symbol B ist "Flamme"（Flame） > Vector（path）" → OK (Die Farbe wird an den Pfadnamen "Vektor" vererbt.)
• Symbol C ist "Vektor（Flame） > Flame（path）" Struktur → NG (die im Flammennamen "Vektor" festgelegte Farbänderung erscheint)

Auf diese Weise wird der Ebenenname "In einer Struktur, in der "Vektor" eine Gruppe enthält, muss man beim Anwenden des Stils vorsichtig sein.Auch wenn der Name gleich ist, ändert sich die Farbe nur in der obersten Ebene (siehe Symbol C), und die Farbänderung spiegelt sich nicht in den Vektoren der zweiten Ebene wider.

✅ LösungNicht nur der Ebenenname,Gestalten Sie es so, dass die Pfadstruktur, auf die die Stile tatsächlich angewendet werden, übereinstimmt.Dadurch lassen sich Probleme leichter vermeiden.

Solange die Vektornamen korrekt sind, ist eine leicht abweichende Struktur in der Regel unproblematisch. Bei der Teamentwicklung ist es jedoch hilfreich, die interne Struktur für später hinzukommende Teammitglieder so einheitlich wie möglich zu gestalten.

Ursache 4: Die Anzahl der Füllungen oder Striche weicht von der ursprünglichen Komponente ab.

Bei Verwendung einer einzigen Farbe besteht kein Grund zur Sorge, solange Sie Ebenen zusammenführen oder deren Struktur und Namen vereinheitlichen. Wechseln Sie jedoch zu einem Symbol mit einer anderen Anzahl an Füll- oder Konturlinien als die ursprüngliche Komponente, ändern sich nur einige Farben, während andere unverändert bleiben. Dies kann zu unerwünschten Ergebnissen führen. Generell sollten Symbole daher auf eine einzige Farbe standardisiert werden. Benötigen Sie zwei Farben, erstellen Sie eine separate Symbolvariable für das zweifarbige Symbol oder finden Sie eine andere Lösung.

✅ Lösung：

• Mischen Sie keine einfarbigen und mehrfarbigen Symbole.
• Falls Sie ein mehrfarbiges Symbol benötigen, duplizieren Sie die Symbolkomponente mit Variablen und erstellen Sie eine für ein zweifarbiges Symbol.
• Bei der Verwendung mehrfarbiger Symbole sollten Farbüberschreibungen generell nicht verwendet werden.

Vorsicht: Selbst wenn Sie ein einzelnes Farbsymbol überschreiben, können Sie nur eine Farbe ändern!

Ursache 5: Füllmethoden und Masken

Wenn das Symbol eine Maske oder einen speziellen Mischmodus (z. B. Multiplizieren) verwendet,Eine Farbänderung führt möglicherweise nicht zu einer sichtbaren Veränderung.。

✅ Lösung：
Wenn Sie Masken oder Mischmodi verwenden, wandeln Sie diese in einfache Pfadobjekte um, die so aussehen, wie sie aussehen sollen, indem Sie die Objekte kombinieren oder reduzieren, bevor Sie Komponenten erstellen.

Auch in diesem Fall ist es unbedenklich, den Pfad durch Umreißen am Ende zu vereinfachen. Bei Multiplikationen ist es sicherer, den Pfad mithilfe von Live-Trace oder einer ähnlichen Funktion korrekt zu definieren.

Verifizierungszusammenfassung

Tatsächliches Farbreflexionsverhalten bestätigt

Im Folgenden ist das Farbwiedergabeverhalten dargestellt, das beim Umschalten zwischen verschiedenen Symbolen innerhalb der Schaltfläche beobachtet wurde (siehe Abbildung).

Tipps zur Verwendung

Wichtigste Erkenntnisse aus dem Test:

• Es ist sehr wichtig, dass die Ebenennamen und die Struktur übereinstimmen.
• Die Füllfarbe kann sicher über Farbstile oder Variablen angegeben werden, dies ist jedoch nicht notwendig.
• Icons werden mithilfe von Füllungen erstellt, um die Implementierung zu vereinfachen (Linien verlieren beim Vergrößern oder Verkleinern tendenziell an Größe, daher werden Konturen empfohlen).
• Wenn Sie einem bestehenden Symbol Elemente hinzufügen möchten, ist es einfacher, Farbprobleme zu vermeiden, indem Sie ein neues Symbol erstellen und jedes Element einzeln ersetzen, ansondern ein die aktuell angezeigte Variante zu bearbeiten.

Tipps für einen reibungslosen Übergang von der Konzeption zur Umsetzung:

• Verwenden Sie einheitliche Rahmengrößen (verwenden Sie keine unterschiedlichen Größen wie 24px, 40px, 80px usw.).
• Wenn Sie das Symbol skalieren, wird es entsprechend der Symbolgröße optimal angepasst (dies erleichtert die Datenverarbeitung sowohl im Design als auch in der Implementierung erheblich).

Darüber hinaus gelten folgende Implementierungsregeln:

• Die Farbe sollte auf Tiefschwarz #000 eingestellt werden (die Farbe des Astro-Icons kann nur geändert werden, wenn die Originaldaten schwarz sind).

Häufige Probleme, die während der Betriebsphase auftreten können:

• Seien Sie vorsichtig beim Ändern vorhandener Symbole.Wenn Sie während des Betriebs Elemente zu einem bestehenden Symbol hinzufügen oder ändern, kann sich die Struktur unbeabsichtigt ändern, was zu Problemen mit der Farbwiedergabe führen kann. Bearbeiten Sie in diesem Fall nicht die bestehende Komponente direkt, sondern befolgen Sie die Regeln.Erstellen Sie eine neue Symbolkomponente und ersetzen Sie sie.Es ist sicherer.

Zusammenfassung

Haben Sie es verstanden? Im Grunde genommen sollten Sie beim Erstellen von Icons einfach diese drei Regeln beachten! 1. Verwenden Sie eine einheitliche Füllmethode (Konturlinien!). 2. Verwenden Sie einheitliche Ebenennamen für die Pfade, die Sie einfärben möchten. 3. Halten Sie die Ebenenstruktur des Icons so einfach wie möglich. Seien Sie während der Produktionsphase besonders vorsichtig beim Bearbeiten bestehender Icons. Die Struktur ändert sich oft während der Bearbeitung, was zu Problemen mit der Farbdarstellung führen kann. Erstellen Sie daher anstelle der direkten Bearbeitung bestehender Icons eine neue Komponente gemäß den Regeln und bearbeiten Sie das Icon dort. Ersetzen Sie anschließend das alte Icon in der Schaltflächenkomponente durch das neue. Dadurch sollten Farbprobleme deutlich reduziert werden.

Vielen Dank! Jetzt bin ich ein Meister im Erstellen von Icons! Ich werde versuchen, eine Komponente mit der Methode zu erstellen, die mir mein Mentor beigebracht hat!

Beim Wechsel zwischen Symbolinstanzen ist die interne Struktur unterschiedlich, auch wenn sie gleich aussehen, und die Farben werden nicht korrekt wiedergegeben.

Die diesmal vorgestellten Punkte, insbesondere„Füllung vereinheitlichen“ „Ebenennamen vereinheitlichen“Wenn Sie diese beiden Punkte befolgen, sollten Sie die meisten Probleme vermeiden können.

Wenn der Wechsel immer noch nicht ordnungsgemäß funktioniert, liegt das wahrscheinlich an Unterschieden in der internen Struktur oder an übergeordneten Ebenen mit demselben Namen.

Ich hoffe, dieser Artikel hilft Ihnen, Ihre Designarbeit in Figma komfortabler zu gestalten.