Pictogramkleuren veranderen niet in Figma! Gids voor het oplossen van problemen met componentinstanties

Als je ontwerponderdelen in Figma met anderen deelt, kom je onverwacht voor problemen te staan. Heb je niet al eens moeite gehad omdat de kleur van je componentpictogrammen niet goed kon worden omgeschakeld?

Dit artikel behandelt het probleem dat veel Figma-gebruikers ondervinden: pictograminstanties waarvan de kleur niet correct wordt weergegeven. We leggen de oorzaken en oplossingen duidelijk uit.

Mijn collega heeft de knop die ik maakte in een component omgezet! En de pictogrammeeninstellingen kunnen ook worden omgeschakeld! Geweldig! Maar er ontbreken pictogrammen, dus ik zal ze voortdurend als components registreren om het gebruiksvriendelijk te maken!

Ik ben zwijgend pictogrammen blijven maken.

Wacht even? Het pictogramcomponent schakelt niet goed over? Ik doe het op dezelfde manier als mijn collega... Waarom verandert de kleur niet correct?

Dat is vanwege hoe jij je pictogrammen hebt gemaakt!

Collega! Hoe krijg ik de kleur om te veranderen?

Heh, goed! Ik zal je het geheim van pictogramschakelen in Figma vertellen. Zorg dat je goed meekijkt en dit goed onthoudt!

Ja! Ik zal mijn best doen om het te onthouden!

Waarom worden kleuren overgenomen? Hoe Figma-overschrijvingen werken

Bij het maken van knoppen in Figma is het gebruikelijk om het icoongedeelte in te stellen zodat het kan worden omgeschakeld via exemplaarparameters. Echter, wanneer u het pictogram omschakelt, ontstaan er vaak problemen, zoals dat de ingestelde kleur niet wordt weergegeven of onverwacht verandert.

Bent u wel eens tegen problemen aangelopen waarbij in Figma de ingestelde kleur niet wordt weergegeven of niet goed wordt omgeschakeld wanneer u een pictogram omwisselt? Dit artikel presenteert de oorzaken en oplossingen op een duidelijke manier.

Controleer zorgvuldig de instellingen aan de zijde van het pictogram en de knop zodat kleuren correct worden omgeschakeld wanneer u pictogrammen wisselt.

Controleer eerst de structuur van het knopcomponent

Controleer eerst de volgende structuur om een situatie te begrijpen waarin kleuren worden overschreven.

① Het originele pictogramcomponent is zwart

② Gekopieerd als exemplaar binnen de knop met alleen kleuroverschrijving

③ Wanneer u in deze toestand naar een ander pictogram overschakelt, kan de pictogramkleur terugkeren naar de standaardkleur in plaats van wit

tips: Begrijp de relatie tussen mastercomponenten en overrides

Het belangrijkste aandachtspunt is dat overrode eigenschappen niet meer worden bijgewerkt wanneer de mastercomponent wordt gewijzigd.

Overrode onderdelen: Wanneer u kleur of tekst in een instantie wijzigt, wordt dat onderdeel onafhankelijk. Latere wijzigingen in hetzelfde onderdeel van de mastercomponent worden niet toegepast op die instantie. De overrode eigenschappen (vulkleur, lijnkleur, tekst, enz.) hebben voorrang.

Niet-overrode onderdelen: Eigenschappen die niet zijn gewijzigd (zoals padding of margin) nemen wijzigingen van de mastercomponent direct over.

Let vooral op wanneer u de laagstructuur van de mastercomponent wijzigt. Als u laagnamen wijzigt of lagen verwijdert en nieuwe toevoegt, herkent Figma deze als andere elementen en kunnen de overrides van de instantie worden gereset.

Laten we op basis van bovenstaande informatie onderzoeken waarom de iconkleur niet wordt omgeschakeld.

Oorzaak 1: Gemengde instellingen voor 'Fill' (vulling) en 'Stroke' (lijn)

Hoewel pictogrammen visueel identiek lijken, worden 'Fill' (vulling) en 'Stroke' (lijn) in Figma als volledig verschillende eigenschappen behandeld. Daarom kan het voorkomen dat kleuroverschrijvingen niet correct worden weergegeven wanneer u van een pictogram met vulling naar een pictogram met lijnen overschakelt.

Voorbeeld:

Pictogram A

Pictogram B

• Pictogram A: een gecontoureerd pictogram dat uit vullingen (Fill) bestaat
• Pictogram B: een pictogram waarvan de omtrek met lijnen (Stroke) is getekend

Als de tekenmanier van pictogrammen verschilt, verandert het resultaat van kleurtoepassing ook, daarom is het belangrijk om de presentatiemethode consistent te houden. Wanneer u op het pictogram van pictogram B klikt, is witte kleur ingesteld voor Fill, maar omdat dit pictogramcomponent alleen uit lijnen bestaat, wordt de kleur niet vervangen. In werkelijkheid wordt wit echter correct weerspiegeld in de vulling (de vullingelementen zijn afwezig, dus wit heeft geen plaats om heen te gaan...)..

✅ Oplossing:
Stel een regel in dat alle pictogrammen met 'vulling' worden gemaakt. Pictogrammen die met lijnen zijn getekend, moeten altijd worden omtrokken (command+shift+O) en naar 'vulling'-objecten worden omgezet. Dit heeft ook voordelen bij implementatie.

In ons geval gebruiken we SVG-paden in CSS-variabelen of integreren ze via Astro Icon bij implementatie, dus we houden alles consistent met vulling.

Als u lijnen (Stroke) laat staan, verandert de lijndikte wanneer u het pictogram vergroot of verkleint, wat kan leiden tot ontwerpfouten. Tenzij er een bijzondere reden is, is het het beste om pictogrammen om te trekken en op vulling in te stellen!

Als het alleen uit lijnen bestaat, verandert de lijngrootte niet wanneer u het pictogram vergroot of verkleint. Voor eenvoudige paden zoals pijlen zijn er weinig problemen, maar met complexe pictogrammen wordt het vaak 12px in elkaar gedrukt of 80px ziet eruit als onnatuurlijk uitgerekt ontwerp.

Pictogrammen die met lijnen zijn gebouwd, veranderen niet alleen van lijndikte bij het wijzigen van de grootte, dus omtrekken is het beste. Als u de gegevens vóór het omtrekken wilt behouden, kunt u deze in de buurt van de component plaatsen.

Ook als iets dat met (Stroke) is gebouwd, wordt samengevoegd, verandert het in vulling (Fill), maar in dat geval treden er ook vaak problemen op zoals alleen een gedeelte dat niet van grootte verandert.

Oorzaak 2: Laagnamen komen niet overeen

Figma heeft een specificatie waarbij bij het omschakelen van componentinstanties stijlen en eigenschappen worden overgedragen aan elementen met dezelfde laagnaam.

Voorbeeld:

Pictogram A

Pictogram B

• Laagnaam van de vector in pictogram A: Vector
• Laagnaam van de vector in pictogram B: Vector2

Als laagnamen op deze manier verschillen, beschouwt Figma ze als 'iets anders' en worden overschreven stijlen niet correct toegepast.

✅ Oplossing: Zorg ervoor dat laagnamen in pictogrammen uniform zijn (bijvoorbeeld allemaal Vector)

Voor nu: zorg ervoor dat alle laagnamen van de paden waaraan je kleur wilt geven dezelfde naam hebben!

Oorzaak 3: Verschillende laagstructuur (hiërarchie)

Zelfs wanneer laagnamen uniform zijn, kan het soms voorkomen dat het omschakelen niet correct werkt. In dat geval kan een verschil in laagstructuur van invloed zijn. Als de bron- en doelinstantie een ander aantal lagen of een verschillende structuur hebben, kunnen eigenschappen mogelijk niet correct worden toegewezen. Echter, als de laagnamen hetzelfde zijn, maken kleine verschillen in hiërarchie soms niet uit.

Voorbeeld:

Pictogram A

Pictogram B

Pictogram C

• Pictogram A: consolideer "Vector(path)" in één vector (basis pictogram).
• Pictogram B: "Flame(Flame) > Vector(path)" hiërarchie → OK (kleur wordt overgenomen in padnaam "Vector").
• Pictogram C: "Vector(Flame) > Flame(path)" structuur → NIET OK (kleurverandering ingesteld in "Vector" verschijnt).

Op deze manier moet je voorzichtig zijn met de toepassingswijze van stijlen in structuren waarbij de laagnaam "Vector" een groep bevat. Bovendien wordt de kleur alleen in de bovenste laag gewijzigd wanneer dezelfde naam wordt gebruikt (zie pictogram C); de kleurverandering wordt niet weerspiegeld in de Vector op het tweede niveau.

✅ Oplossing: Zorg niet alleen voor overeenkomende laagnamen, maar ontwerp ook zodat de werkelijke padstructuur warop stijlen worden toegepast overeenkomt, waardoor problemen gemakkelijker te voorkomen zijn.

Als de vectornamen overeenkomen, werkt het meestal goed zelfs als de structuur iets anders is. Maar bij teamontwikkeling is het vriendelijker om de interne structuur zoveel mogelijk gelijk te houden voor mensen die later toetreden.

Oorzaak 4: Het aantal vullingen (Fill) en lijnen (Stroke) verschilt van het originele component

Bij één kleur hoef je je geen zorgen te maken als je lagen samenvoegt of de laagstructuur en laagnamen unificeert. Maar wanneer je schakelt naar pictogrammen met een ander aantal vullingen (Fill) of lijnen (Stroke) dan het originele component, kunnen bepaalde kleuren veranderen terwijl andere hetzelfde blijven, wat niet het gewenste resultaat oplevert. Ideaal gezien dienen pictogrammen één kleur te hebben. Of als twee kleuren nodig zijn, is het raadzaam om aparte picto-variabelen voor twee-kleurige pictogrammen te maken.

✅ Oplossing:

• Meng geen eenkleurige en meerkleuri pictogrammen.
• Als u meerdere kleuren pictogrammen nodig hebt, dupliceert u het pictogramcomponent als variabele en maakt u een versie voor tweekleurenpictogrammen.
• Bij het gebruik van meerdere kleuren pictogrammen moet u in het algemeen niet de kleuroverschrijving gebruiken.

Let op: als u een monochroom pictogram overschrijft, kunt u slechts één kleur wijzigen!

Oorzaak 5: Effect van blendmodus of masker

Als het pictogram een masker of speciale blendmodus (zoals vermenigvuldigen) gebruikt, kan het voorkomen dat het uiterlijk niet verandert wanneer u de kleur wijzigt.

✅ Oplossing:
Als u maskers of blendmodi gebruikt, voegt u de objecten samen of vlakt u deze af (Flatten) en converteert u deze naar eenvoudige padobjecten die overeenkomen met de weergave voordat u ze in een component omzet.

In dit geval is het ook veiliger om uiteindelijk de omtrekken om te zetten in vereenvoudigde paden. Als u vermenigvuldigen gebruikt, zorg dan dat u de paden goed converteert met live tracing voor extra zekerheid.

Verificatieoverzicht

Werkelijk waargenomen kleurweergavegedrag

Hieronder ziet u het kleurweergavegedrag dat is waargenomen bij het schakelen tussen verschillende pictogrammen in knoppen (zie afbeelding).

Operationele tips

Belangrijke punten uit de verificatie:

• Het is essentieel dat de laagnamen en structuur overeenkomen
• Het is veiliger om vulkleuren te beheren via Color Style of Variables, maar dit is niet altijd noodzakelijk
• Bij het maken van pictogrammen moet rekening worden gehouden met de implementatiegemak. We raden aan om vullingen consistent te gebruiken (lijnen kunnen oneven van grootte veranderen wanneer ze worden geschaald, dus omtrek instellen wordt aanbevolen)
• Wanneer u elementen wilt toevoegen aan bestaande pictogrammen, kunt u kleurproblemen het beste vermijden door de variant die momenteel wordt weergegeven niet te bewerken, maar in plaats daarvan nieuwe pictogrammen te maken en deze één voor één te vervangen

Belangrijke punten voor een soepel verloop van ontwerp naar implementatie:

• Zorg dat de framegrootten consistent zijn (gebruik niet variërende grootten zoals 24px, 40px, 80px)
• Wanneer u het pictogramgedeelte schaalt, wordt het formaat automatisch aangepast op basis van de pictogramgrootte (dit maakt de dataverwerking veel gemakkelijker, zowel in de implementatie als in het ontwerp)

Bovendien onze implementatieregels:

• Zet de kleur op pure zwart #000 (Astro Icon werkt niet goed met kleurwijzigingen als de originele gegevens niet zwart zijn)

Veelvoorkomende problemen in de operationele fase:

• Wees voorzichtig bij het wijzigen van bestaande pictogrammen: als je tijdens de bedrijfsvoering elementen aan bestaande pictogrammen toevoegt of wijzigt, kan de structuur onbedoeld veranderen en ontstaan er kleurproblemen. In dat geval is het veiliger om niet direct het bestaande component te bewerken, maar om volgens de regels een nieuw pictogramcomponent te maken en dit in te ruilen.

Samenvatting

Begrepen? Bij het maken van pictogrammen hoef je alleen deze 3 regels te volgen! 1. Gebruik alleen vullingen (converteer lijnen naar omtrekken!) 2. Zorg voor uniforme laagnamen voor paden die je van kleur wilt voorzien 3. Houd de laagstructuur van pictogrammen zo eenvoudig mogelijk En wat je vooral in de operationele fase moet opgeven: het wijzigen van bestaande pictogrammen. Tijdens het wijzigen verandert de structuur vaak, waardoor de kleur niet meer correct wordt weergegeven. Daarrom moet je bestaande pictogrammen niet rechtstreeks wijzigen, maar volgens de regels een nieuw component maken en het pictogram daar wijzigen. Vervolgens vervang je het oude pictogram door het nieuwe in het buttoncomponent, waardoor kleurproblemen veel minder voorkomen.

Dank je wel! Nu ben ik ook een pictogrammasteraar! Ik ga de methode die je me hebt geleerd gebruiken om componenten te maken!

Als je pictograminstanties uitwisselt, kan de kleur niet correct worden weergegeven, zelfs als de uitstraling gelijk is maar de interne structuur verschilt.

Als je alleen de twee punten uit deze gids toepast — met name "uniforme vullingen" en "uniforme laagnamen" — kun je bijna alle problemen voorkomen.

Als het nog steeds niet goed uitwisselt, is het meestal een verschil in interne structuur of dezelfde naam op het bovenliggende niveau.

Ik hoop dat dit artikel je Figma-ontwerpen gemakkelijker maakt.