Icoonkleur verandert niet in Figma! Gids voor het oplossen van problemen met het wisselen van componentinstanties | Topics

Als je onderdelen van een ontwerp in Figma verdeelt over meerdere personen, kun je onverwachte problemen tegenkomen. Heb je al eens last gehad van iconen die na het omzetten naar een component niet van kleur wisselen?

In dit artikel leggen we op een heldere manier uit wat de oorzaak is van het veelvoorkomende probleem dat 'de kleur van een icoonінstantie niet wordt overgenomen', en welke oplossingen er zijn.

Mijn collega heeft de knop die ik maakte omgezet naar een component! En het icoon kan ook gewisseld worden! Geweldig! Maar er ontbreken nog iconen, dus ik ga meer iconen als component registreren zodat het onderdeel makkelijker te gebruiken is!

Ik maakte vastberaden een stuk of wat iconen.

Hm? Waarom wisselt mijn iconcomponent niet goed? Ik werk precies zoals mijn collega, maar waarom wisselt de kleur niet?

Dat komt door de manier waarop je je iconen hebt gemaakt!

Collega! Hoe zorg ik ervoor dat de kleur verandert?

Hmm, goed dan! Ik leer je het geheim van het wisselen van iconen in Figma. Schrijf het goed op en prent het in je geheugen!

Ja, ik zal mijn best doen om het te onthouden!

Waarom worden kleuren overgenomen? Het mechanisme van overrides in Figma

Bij het maken van een button in Figma wordt vaak ingesteld dat het icoondeel kan worden gewisseld via instance properties. Het komt echter ook regelmatig voor dat de ingestelde kleur niet wordt overgenomen wanneer je het icoon wisselt, of dat de kleur ongewenst verandert.

Heb je in Figma ook wel eens een probleem ervaren waarbij de ingestelde kleur niet wordt overgenomen of niet verandert wanneer je een icoon (icon) wisselt? In dit artikel leggen we duidelijk uit wat de oorzaak is en hoe je het oplost.

Controleer de instellingen van zowel het icoon als de button, zodat de kleur correct wordt overgenomen bij het wisselen van het icoon.

Eerst de structuur van de button-component controleren

Laten we eerst de situatie bekijken waarin de kleur wordt overschreven, met de volgende structuur.

1. Het oorspronkelijke iconcomponent is zwart

2. Binnen de button is het als instance gekopieerd, waarbij alleen de kleur is overschreven

3. Wanneer je in deze staat naar een ander icoon wisselt, kan de kleur van het icoon terugvallen naar de standaardkleur in plaats van wit te blijven

Tips: begrijp de relatie tussen mastercomponenten en overschrijvingen

Het belangrijkste aandachtspunt is dat eigenschappen die je hebt overschreven, geen wijzigingen meer volgen van de mastercomponent.

Overschreven onderdelen: als je de kleur of tekst van een instantie wijzigt, wordt dat onderdeel onafhankelijk. Wijzigingen die later aan hetzelfde onderdeel van de mastercomponent worden aangebracht, worden niet toegepast op die instantie. Overschreven waarden (zoals vulling, lijnkleur of tekst) hebben voorrang.

Niet-overschreven onderdelen: eigenschappen die je niet hebt gewijzigd (bijvoorbeeld padding of margin) nemen wijzigingen in de mastercomponent direct over.

Let vooral op wanneer je de laagstructuur van een mastercomponent wijzigt. Als je een laag hernoemt of een laag verwijdert en vervangt door een nieuwe, kan Figma deze als een ander element zien. Daardoor kunnen overschrijvingen in instanties worden gereset.

Met deze informatie in gedachten gaan we nu na waarom de kleur van het pictogram niet wisselt.

Oorzaak 1: instellingen voor 'Vulling (Fill)' en 'Lijn (Stroke)' zijn door elkaar gebruikt

Ook al lijken pictogrammen hetzelfde, in Figma worden 'Vulling (Fill)' en 'Lijn (Stroke)' als volledig verschillende eigenschappen behandeld. Als je een pictogram dat met een vulling is opgebouwd, vervangt door een pictogram dat met een lijndikte is getekend, wordt de kleuroverschrijving daardoor mogelijk niet correct toegepast.

Voorbeeld:

Pictogram A

Icoon B

Icoon A: een geschetst icoon opgebouwd uit opvulling (Fill)
Icoon B: een icoon waarvan de contour is getekend met lijnen (Stroke)

Wanneer iconen op verschillende manieren zijn getekend, verandert ook het resultaat van de kleurtoepassing. Daarom is het belangrijk om een vaste werkwijze voor de vormgeving aan te houden. Wanneer je op het icoon van Icoon B klikt, is Fill ingesteld op wit, maar omdat dit iconencomponent alleen uit lijnen is opgebouwd, verandert de kleur niet. Eigenlijk is het wit wel correct doorgevoerd in de vulling, maar omdat er geen vulelement is, heeft het wit geen plek om te verschijnen...

✅ Oplossing:
Stel als regel dat alle iconen worden gemaakt met "vulling". Iconen die met lijnen zijn getekend, moet je altijd omzetten naar contouren (outline) met command+shift+O en omzetten naar een object met "vulling". Dit maakt het ook makkelijker om ze later in de implementatie te gebruiken.

Bij ons implementeren we iconen door de svg-path in een CSS-variabele te zetten of door ze met Astro Icon in te bouwen. Daarom gebruiken we overal consequent vulling.

Als een icoon met lijnen (Stroke) blijft, verandert de lijndikte wanneer je het icoon vergroot of verkleint, waardoor het ontwerp kan vervormen. Tenzij er een specifieke reden is, is het beste om het naar contouren om te zetten en consequent met vulling te werken!

Bij iconen die alleen uit lijnen bestaan, blijft de lijndikte gelijk wanneer je het icoon vergroot of verkleint. Bij eenvoudige paden, zoals pijlen, is dit meestal geen probleem. Bij complexe iconen gebeurt het echter vaak dat ze bij 12px dichtlopen of dat ze bij 80px juist te uitgerekt en leeg ogen.

Iconen die uit lijnen zijn opgebouwd, behouden hun lijndikte niet bij het aanpassen van het formaat. Omzetten naar contouren is daarom de beste optie. Wil je het origineel bewaren? Zet dan het bronbestand in de buurt van het component.

Ook wanneer je lijnen (Stroke) samenvoegt, worden ze omgezet naar vulling (Fill). In dat geval ontstaan er vaak problemen, zoals dat sommige delen hun formaat niet mee veranderen.

Oorzaak 2: de laagnamen komen niet overeen

In Figma geldt de regel dat bij het wisselen van een component-instantie stijlen en eigenschappen worden overgenomen door elementen met dezelfde laagnaam.

Voorbeeld:

Pictogram A

Icoon B

Laagnaam van de vector van icoon A: Vector
Laagnaam van de vector van icoon B: Vector2

Wanneer de laagnamen op deze manier verschillen, beschouwt Figma de elementen als "verschillende objecten" en worden de overschreven stijlen niet correct toegepast.

✅ Oplossing: gebruik dezelfde laagnaam voor de elementen in iconen (bijv. overal Vector)

Geef de paden die je een kleur wilt geven sowieso dezelfde naam!

Oorzaak 3: de laagstructuur (hiërarchie) verschilt

Soms wisselt een instantie nog steeds niet goed, ook al zijn de laagnamen gelijk. In dat geval kan het verschil in laagstructuur de oorzaak zijn. Als het aantal lagen of de structuur verschilt tussen het oorspronkelijke en het nieuwe element van de instantie, worden eigenschappen mogelijk niet correct gekoppeld. Bij dezelfde laagnamen zijn kleine verschillen in hiërarchie in veel gevallen geen probleem.

Voorbeeld:

Pictogram A

Icoon B

Icoon C

Icoon A: "Vector(path)" wordt omlijnd en samengevoegd tot één vector (het basisicoon).
Icoon B heeft de structuur "Flame(Flame) > Vector(path)" → OK (de kleur wordt overgenomen door de padnaam "Vector").
Icoon C heeft de structuur "Vector(Flame) > Flame(path)" → NIET OK (de kleurwijziging die is ingesteld op de laag "Vector" met de naam Flame verschijnt).

Zo'n structuur, waarbij de laagnaam "Vector" een groep bevat, vraagt om extra aandacht bij het toepassen van stijlen. Ook als de naam hetzelfde is, verandert de kleur alleen op het hoogste niveau (zie icoon C). Op het tweede niveau van "Vector" wordt geen kleurwijziging doorgevoerd.

✅ Oplossing: In plaats van alleen de laagnaam te controleren, ontwerp je de padstructuur zo dat de stijl daadwerkelijk op de juiste paden wordt toegepast. Zo voorkom je dit soort problemen vaker.

Als de vectornamen kloppen, werkt het vaak nog goed wanneer de structuur iets afwijkt. Bij teamontwikkeling is het echter handig om de interne structuur zoveel mogelijk gelijk te houden, zodat collega's die later instappen er ook wijs uit kunnen.

Oorzaak 4: het aantal vullingen (Fill) of lijnen (Stroke) verschilt van het oorspronkelijke component

Bij één kleur is er niets aan de hand als je lagen samenvoegt en de laagstructuur en laagnamen gelijk trekt. Wanneer je echter een icoon gebruikt dat een ander aantal vullingen (Fill) of lijnen (Stroke) heeft dan het oorspronkelijke component, kan het gebeuren dat alleen sommige kleuren veranderen terwijl andere ongewijzigd blijven, waardoor het resultaat niet is wat je wilde. Houd iconen daarom in principe bij één kleur. Als je toch twee kleuren nodig hebt, maak dan een apart icoonvariabele voor het tweekleurenicoon.

✅ Oplossing:

Meng niet iconen in één kleur met iconen in meerdere kleuren.
Als er meerdere kleuren voor een icoon nodig zijn, dupliceer je het icoonomponent via variabelen en maak je een versie voor het tweekleurige icoon.
Wanneer je meerkleurige iconen gebruikt, gebruik je in principe geen kleuroverrides.

Let op: bij eenkleurige iconen kun je met een override maar één kleur wijzigen!

Oorzaak 5: invloed van overvloeimodi en maskers

Als voor een icoon een masker of een speciale overvloeimodus (bijvoorbeeld vermenigvuldigen) wordt gebruikt, kan het voorkomen dat een kleurwijziging visueel geen effect heeft.

✅ Oplossing:
Als je maskers of overvloeimodi gebruikt, combineer of vlak dan de objecten af (Flatten) zodat ze worden omgezet naar een eenvoudig padobject dat er hetzelfde uitziet, en maak daarna pas het component.

Ook in dit geval is het veiliger om het uiteindelijk om te zetten naar contouren of een eenvoudig pad. Gebruik je vermenigvuldigen, zet het dan via live trace goed om naar paden voor de zekerheid.

Verificatieoverzicht

Oorzaak	Inhoud	Oplossing
Niet-overeenkomende laagnamen	Eigenschappen worden niet overgenomen bij het wisselen van instantie	Gebruik één laagnaam voor alle pictogrammen (bijv. Vector)
Niet-overeenkomende laagstructuur	Stijlen worden mogelijk niet toegepast wanneer de laaghiërarchie of -structuur verschilt	Zorg dat de structuur van het uiteindelijke renderobject overeenkomt
Het aantal lagen verschilt van het bronomponent	Het aantal fills van de broncomponent is anders ingesteld	Oplossen met stijltoepassing, samengestelde paden en samenvoegen
Mengen/masker	Kleur wordt visueel niet toegepast	Terug naar `Normaal`-mengen, masker opheffen

Waargenomen gedrag van kleurtoepassing

Hieronder staat het gedrag van kleurtoepassing dat werd vastgesteld bij het wisselen van verschillende pictogrammen binnen de knop (zie afbeelding).

Testpatroon	Resultaat	Opmerkingen
Pad omgezet naar contouren	✅ Kleurtoepassing aanwezig	Eenvoudige structuur, dus stabiel. Opnieuw bewerken is echter lastig.
Wanneer een pad een booleaanse bewerking ondergaat (bijvoorbeeld samenvoegen)	✅ Kleurtoepassing aanwezig	Zolang de naam van het bovenste niveau hetzelfde is, is er geen probleem. Wanneer het aantal lagen direct eronder gelijk is aan het oorspronkelijke exemplaar, schakelt het correct om.
De hiërarchiestructuur van de vector is anders (Group > Vector)	✅ Kleurtoepassing aanwezig	OK zolang de laagnamen op de betreffende plek overeenkomen. Als de structuur afwijkt of namen dubbel voorkomen, kan de weergave echter onjuist zijn.
Complexere vormen (zoals mengmodi of padsamenvoeging)	✅ Kleurtoepassing aanwezig	Stabiel wanneer paden zijn samengevoegd
Wanneer de structuur van de bronvector wordt gewijzigd, bijvoorbeeld door deze in een groep of frame te plaatsen	🔺 Kleur wordt mogelijk ook niet weergegeven	Het is waarschijnlijk dat dit als een andere laag wordt herkend. Als je wijzigingen wilt aanbrengen, is het betrouwbaarder om het component te dupliceren en dat aan te passen.
Vectornaam komt niet overeen	❌ Kleur wordt niet weergegeven	Een afwijkende laagnaam wordt als een andere laag herkend
De interne structuur is complexer dan de oorspronkelijke gegevens en vertoont veel verschillen	❌ Kleur wordt niet toegepast	Naarmate het aantal lagen toeneemt of er meer frames zijn, wordt slechts een deel van de kleuren weergegeven. De verschillen zijn groot, waardoor het waarschijnlijk is dat er als aparte lagen wordt gedacht
Vervanging na verwijdering van de bronkopie	❌ Kleur wordt niet weergegeven	Wordt als afzonderlijk behandeld, ook bij dezelfde naam
Wanneer het bovenliggende frame van het icoonpad een frame met dezelfde naam bevat	❌ Kleur botst met het bovenliggende frame	Kleurwijzigingen worden toegepast op het frame van de ouder, waardoor de stijl niet op het pad wordt toegepast

Tips voor het beheer

Inzichten uit de verificatie:

Het is zeer belangrijk dat de laagnamen en de structuur overeenkomen
Het beheren van vullingen via Color Styles of Variables is veilig, maar het is niet noodzakelijk om ze altijd op te geven
Maak iconen met een vulling om ze eenvoudiger te implementeren. Lijnen verschuiven vaak in grootte bij schalen, dus het is aan te raden ze om te zetten naar contouren (outlines)
Als u elementen aan een bestaand icoon wilt toevoegen, bewerk dan niet de huidige variant maar maak een nieuw icoon en vervang ze één voor één. Zo voorkomt u kleurproblemen

Tips voor een soepele overgang van ontwerp naar implementatie:

Houd de framegroottes gelijk (vermijd willekeurige maten zoals 24px, 40px, 80px)
Als u een icoondeel schaalbaar maakt, past het formaat van het icoon zich automatisch aan bij het schalen (dit maakt het werken met gegevens aanzienlijk eenvoudiger, zowel bij de implementatie als in het ontwerp)

Daarnaast onze implementatieregels:

Maak de kleur puur zwart #000 (Astro Icon heeft een zwart brondossier nodig, anders werkt de kleurwijziging niet).

Veelvoorkomende problemen in de beheerfase:

Wijzig bestaande iconen met zorg: als je tijdens het beheer elementen toevoegt aan of wijzigingen aanbrengt in een bestaand icoon, verandert de structuur onbedoeld en ontstaan er vaak problemen met de kleurweergave. In dat geval is het veiliger om het bestaande component niet rechtstreeks aan te passen, maar om de regels te volgen en een nieuw iconcomponent te maken en dat te vervangen.

Conclusie

Begrepen? Bij het maken van iconen volstaan in principe deze drie regels! 1. Werk met vulling (zet lijnen om naar contouren!) 2. Gebruik dezelfde laagnaam voor de paden waaraan je een kleur wilt geven 3. Houd de laagstructuur van het icoon zo eenvoudig mogelijk En let vooral in de beheerfase op het wijzigen van bestaande iconen. Tijdens het bewerken verandert de structuur vaak, waardoor de kleur niet meer wordt doorgevoerd. Daarom pas je een bestaand icoon niet rechtstreeks aan. Maak in plaats daarvan een nieuw component volgens de regels en wijzig het icoon daarin. Vervang daarna in het knopcomponent het oude icoon door het nieuwe. Dan treden er veel minder kleurproblemen op.

Bedankt! Nu ben ik ook een icoonexpert! Ik ga een component maken op de manier die mijn senior heeft uitgelegd.

Wanneer je een icoon-instantie wisselt, werkt de kleurweergave niet goed als de interne structuur verschilt, ook al ziet het er hetzelfde uit.

Als je vooral "werk met vulling" en "gebruik dezelfde laagnaam" consequent toepast, voorkom je de meeste problemen.

Als het dan nog steeds niet goed wisselt, komt dat vaak door verschillen in de interne structuur of doordat een bovenliggende laag dezelfde naam heeft.

We hopen dat dit artikel je helpt om met Figma nog prettiger te ontwerpen.