Topics

Wanneer u ontwerponderdelen in Figma maakt en het werk deelt, kunt u onverwachte problemen tegenkomen. Hebt u ooit problemen gehad met de kleur van een componentpictogram dat niet correct veranderde?

In dit artikel leggen we op een heldere manier de oorzaak en oplossing uit voor het probleem waarbij de kleuren van pictogrammen niet worden weergegeven. Dit is een probleem waar veel Figma-gebruikers mee te maken hebben.

Mijn senior collega heeft de knop die ik heb gemaakt, omgezet in een component! Sterker nog, je kunt zelfs het pictogramgedeelte aanpassen! Dat is geweldig! Maar er zijn niet genoeg pictogrammen, dus ik blijf pictogrammen als componenten registreren en er een gebruiksvriendelijk onderdeel van maken!

Ik heb in alle stilte een aantal iconen gemaakt.

Huh? De icooncomponenten wisselen niet goed? Ik weet zeker dat ik ze op dezelfde manier maak als mijn senior... Waarom wisselen de kleuren niet goed?

Dat komt door de manier waarop u uw pictogrammen maakt!

Senpai! Hoe kan ik hem van kleur laten veranderen?

Nou, dat is geweldig! Ik leer je het geheim van het wisselen van iconen in Figma. Zorg ervoor dat je aantekeningen maakt en ze uit je hoofd leert!

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

Waarom worden kleuren overgeërfd? Hoe Figma-overschrijvingen werken

Bij het aanmaken van een knop in Figma is het gebruikelijk om het pictogram aan te passen via de eigenschappen van de instantie. Bij het wisselen van pictogrammen treden echter vaak problemen op, zoals het niet weergeven van de kleur of het automatisch wijzigen ervan.

Wanneer u in Figma van pictogram wisselt,De kleur die ik heb ingesteld wordt niet weerspiegeld/de kleur verandert nietHeb je ooit last gehad van bovenstaand probleem? In dit artikel leggen we de oorzaken en oplossingen op een begrijpelijke manier uit.

Controleer de instellingen aan de kant van het pictogram en de knop om er zeker van te zijn dat de kleur correct verandert wanneer u van pictogram wisselt.

Controleer eerst de structuur van het knopcomponent

Laten we eerst eens kijken hoe kleuren worden overschreven in de volgende structuur:

① Het originele pictogramcomponent is zwart

② Kopieer het als een exemplaar naar de knop en overschrijf alleen de kleur

3. Als u in deze staat naar een ander pictogram overschakelt, kan de pictogramkleur terugkeren naar de standaardkleur maar een wit.

Tip: Begrijp de relatie tussen hoofdcomponenten en overschrijvingen

Het belangrijkste om te weten is dat eigenschappen die u overschrijft, geen wijzigingen meer weerspiegelen die in het hoofdcomponent zijn aangebracht.

Het overschreven deel: Als u de kleur of tekst in een instantie wijzigt, wordt dat onderdeel onafhankelijk. Als u later hetzelfde onderdeel in het hoofdonderdeel wijzigt, wordt het niet op de instantie toegepast. Overrides (opvulling, lijnkleur, tekst, enz.) hebben voorrang.

Onderdelen die niet worden overschreven: Eigenschappen die u niet hebt gewijzigd (bijv. opvulling en marge), worden weergegeven met de wijzigingen die in het hoofdonderdeel zijn aangebracht.

Wees extra voorzichtig als u de lagenstructuur van uw hoofdcomponent wijzigt: als u een laag een andere naam geeft of een laag verwijdert en vervolgens een nieuwe toevoegt, herkent Figma deze mogelijk als een ander element en worden de instantie-overschrijvingen opnieuw ingesteld.

Laten we, met het bovenstaande in gedachten, eens kijken waarom de kleur van het pictogram niet verandert.

Oorzaak 1: Vulling- en lijninstellingen zijn gemengd

Ook al zien de pictogrammen er op het eerste gezicht hetzelfde uit, de eigenschappen "Vulling" en "Lijn" worden in Figma als volledig afzonderlijke eigenschappen behandeld. Als u dus overschakelt van een pictogram met een vulling naar een pictogram met een lijndikte, wordt de kleuroverride mogelijk niet correct weergegeven.

voorbeeld:

Icoon A

Icoon B

• Icoon A: Een omlijnd icoon met een vulling.
• Icoon B: Een icoon omlijnd met een lijn (streek)

Op deze manier zal, als het pictogram anders wordt getekend, het resultaat van het toepassen van de kleur ook veranderen,Het is belangrijk om de uitdrukking consistent te houdenWanneer u op pictogram B klikt, wordt de vulling ingesteld op wit, maar omdat dit pictogramcomponent alleen met lijnen is opgebouwd, wordt de kleur niet vervangen. De vulling is echter wel correct ingesteld op wit (hoewel het wit nergens heen kan, omdat er geen vullingselement is...).

✅ Oplossing：
De regel is om alle pictogrammen met een "opvuleffect" te maken. Pictogrammen die met lijnen zijn getekend, moeten worden omgezet naar contouren (command+shift+O) om het om te zetten in een "verf"-object. Dit heeft als voordeel dat het gemakkelijker te hanteren is tijdens de implementatie.

In ons geval plaatsen we bij de implementatie het SVG-pad in een CSS-variabele of integreren we het in Astro Icon, zodat alles uniform wordt geverfd.

Als je het als een lijn laat staan, verandert de lijndikte wanneer je het pictogram schaalt, waardoor het ontwerp uit elkaar kan vallen. Tenzij er een speciale reden is, is het het beste om de omtrek te tekenen en een consistente 'Vulling'-instelling te gebruiken!

Als je een pictogram maakt met alleen lijnen, blijft de lijngrootte hetzelfde wanneer je het pictogram schaalt. Dit is geen probleem voor eenvoudige paden zoals pijlen, maar bij complexere pictogrammen ziet het er bij 12 px platgedrukt uit, en bij 80 px lijken ze vaak uitgerekt.

Pictogrammen met lijnen kunnen het beste worden omlijnd, omdat de lijndikte niet verandert wanneer de grootte wordt aangepast. Als u de originele gegevens wilt behouden voordat u de omlijning aanbrengt, plaatst u de originele gegevens dicht bij het component.

Wanneer u iets combineert dat is gemaakt met een lijn, wordt het omgezet naar een vulling. Maar zelfs in dat geval ontstaan ​​er vaak problemen, zoals het feit dat slechts één deel van de vorm niet in grootte verandert.

Oorzaak 2: Laagnamen komen niet overeen

In Figma, componentenBij het wisselen van instanties worden stijlen en eigenschappen overgenomen voor elementen met dezelfde laagnaam.Er is een specificatie die zegt:

voorbeeld:

Icoon A

Icoon B

• Icoon Een vectorlaagnaam:Vector
• Naam van de vectorlaag van pictogram B:Vector2

Als de laagnamen op deze manier verschillen, denkt Figma dat ze 'verschillend' zijn en worden de overschreven stijlen niet correct toegepast.

✅ Oplossing: Verenig de laagnamen die in de pictogrammen worden gebruikt (bijv. AlleVector）

Zorg er nu voor dat alle laagnamen voor de paden die u wilt kleuren, hetzelfde zijn!

Oorzaak 3: Verschillende laagstructuren (hiërarchieën)

Zelfs als u de laagnamen uniform maakt, werkt de omschakeling mogelijk niet goed. In dat geval kan dit te maken hebben met verschillen in de laagstructuur.Als het aantal lagen of de structuur verschilt, worden eigenschappen mogelijk niet correct toegewezen..Echter,In sommige gevallen vormen kleine verschillen in de hiërarchie geen probleem, zolang de laagnamen maar gelijk zijn.。

voorbeeld:

Icoon A

Icoon B

Icoon C

• Icoon A is "Vector（path）"Omtrek tekenen en combineren tot één vector (basispictogram)
• Icoon B is "Vlam（Flame） > Vector（path）" → OK (De kleur wordt overgenomen van de padnaam "Vector")
• Pictogram C is "Vector（Flame） > Flame（path）"structuur → NG (de kleurverandering ingesteld in de vlamnaam "Vector" verschijnt)

Op deze manier wordt de laagnaam "In een structuur waarin "Vector" een groep bevat, moet u voorzichtig zijn met de manier waarop u de stijl toepast.Ook al is de naam hetzelfde, dan verandert de kleur alleen in de bovenste laag (zie pictogram C). De kleurverandering wordt niet weerspiegeld in de vectoren in de tweede laag.

✅ Oplossing: Niet alleen de laagnaam,Ontwerp het zo dat de padstructuur waar de stijlen daadwerkelijk worden toegepast overeenkomtZo voorkomt u problemen.

Zolang de vectornamen correct zijn, is het meestal oké als de structuur iets afwijkt. Bij teamontwikkeling is het echter nuttig om de interne structuur zo consistent mogelijk te houden voor degenen die later toetreden.

Oorzaak 4: Het aantal vullingen of streken is anders dan bij het originele onderdeel

Als u één kleur gebruikt, hoeft u zich geen zorgen te maken, zolang u lagen samenvoegt of de laagstructuur en -namen standaardiseert. Als u echter overschakelt naar een pictogram met een ander aantal "Opvulling" of "Lijn" dan het oorspronkelijke component, zullen slechts enkele kleuren veranderen en blijven andere kleuren hetzelfde, wat mogelijk niet naar behoren werkt. Over het algemeen moeten pictogrammen worden gestandaardiseerd op één kleur. Als u echter twee kleuren moet gebruiken, moet u een aparte pictogramvariabele voor het tweekleurige pictogram maken, of een andere vindingrijkheid gebruiken.

✅ Oplossing：

• Gebruik geen enkelkleurige en meerkleurige pictogrammen door elkaar.
• Als u een meerkleurig pictogram nodig hebt, dupliceert u het pictogramcomponent met variabelen en maakt u er één voor een tweekleurig pictogram.
• Bij het gebruik van pictogrammen met meerdere kleuren is het doorgaans niet verstandig om kleuroverrides te gebruiken.

Let op: zelfs als u het pictogram van één kleur overschrijft, kunt u slechts één kleur wijzigen!

Oorzaak 5: Overvloeimodi en maskers

Als het pictogram een ​​masker of een speciale overvloeimodus (zoals vermenigvuldigen) gebruikt,Het kan voorkomen dat een verandering in de kleur geen zichtbare verandering tot gevolg heeft.。

✅ Oplossing：
Als u maskers of overvloeimodi gebruikt, converteert u deze naar eenvoudige padobjecten die eruitzien zoals het hoort, door de objecten te combineren of af te vlakken voordat u componenten maakt.

Ook in dit geval is het veilig om er een eenvoudig pad van te maken door het aan het einde te schetsen. Als je vermenigvuldiging gebruikt, is het veiliger om er een echt pad van te maken met behulp van live trace of iets dergelijks.

Verificatiesamenvatting

Werkelijke kleurreflectiegedrag bevestigd

Hieronder ziet u het kleurreflectiegedrag dat werd waargenomen bij het schakelen tussen verschillende pictogrammen binnen de knop (zie afbeelding).

Tips gebruiken

Belangrijkste punten uit de test:

• Het is erg belangrijk dat de laagnamen en de structuur overeenkomen
• U kunt de opvulkleur veilig opgeven via Kleurstijl of Variabelen, maar dit is niet noodzakelijk.
• Pictogrammen worden gemaakt met behulp van vullingen, zodat ze gemakkelijk kunnen worden geïmplementeerd (lijnen verliezen vaak hun grootte als ze worden vergroot of verkleind, dus contouren worden aanbevolen).
• Als u elementen aan een bestaand pictogram wilt toevoegen, kunt u kleurproblemen gemakkelijker voorkomen door een nieuw pictogram te maken en elk element afzonderlijk te vervangen, maar een de momenteel weergegeven variant te bewerken.

Tips voor een soepele overgang van ontwerp naar implementatie:

• Zorg dat de framegroottes uniform zijn (gebruik geen verschillende groottes zoals 24px, 40px, 80px, etc.)
• Wanneer u het pictogram schaalt, wordt het formaat ervan aangepast aan de grootte van het pictogram (dit maakt het verwerken van gegevens veel eenvoudiger, zowel tijdens het ontwerp als tijdens de implementatie).

Daarnaast onze implementatieregels:

• Stel de kleur in op pikzwart #000 (de kleur van Astro Icon kan niet worden gewijzigd, tenzij de oorspronkelijke gegevens zwart zijn)

Veelvoorkomende problemen die zich tijdens de operationele fase kunnen voordoen:

• Wees voorzichtig bij het wijzigen van bestaande pictogrammen: Als u tijdens het gebruik elementen aan een bestaand pictogram toevoegt of wijzigt, kan de structuur onbedoeld veranderen, wat problemen met de kleurreflectie kan veroorzaken. Bewerk in dat geval het bestaande onderdeel niet rechtstreeks, maar volg de regels.Maak een nieuw pictogramcomponent en vervang dezeHet is veiliger.

samenvatting

Snap je het? Volg bij het maken van pictogrammen gewoon deze drie regels! 1. Gebruik een consistente tekenmethode (omtreklijnen!) 2. Gebruik consistente laagnamen voor de paden die je wilt kleuren. 3. Houd de lagenstructuur van het pictogram zo eenvoudig mogelijk. Wees tijdens de productiefase extra voorzichtig met het aanpassen van bestaande pictogrammen. De structuur verandert vaak tijdens het aanpassingsproces, waardoor er problemen ontstaan ​​met kleuren die niet worden weergegeven. Dus maar een bestaande pictogrammen direct aan te passen, maak je een nieuw component aan volgens de regels en pas je het pictogram daar aan. Vervang vervolgens het oude pictogram door het nieuwe in het knopcomponent. Dit zou kleurproblemen aanzienlijk moeten verminderen.

Dankjewel! Nu ben ik een meester in iconen! Ik ga proberen een onderdeel te maken met de methode die mijn senior me heeft geleerd!

Bij het wisselen tussen pictograminstanties is de interne structuur anders, ook al zien ze er hetzelfde uit, en worden de kleuren niet goed weergegeven.

De punten die deze keer zijn geïntroduceerd, vooral"Vulling verenigen" "Laagnaam verenigen"Als u deze twee punten volgt, kunt u de meeste problemen voorkomen.

Als de omschakeling nog steeds niet goed verloopt, ligt de oorzaak waarschijnlijk aan verschillen in de interne structuur of aan bovenliggende lagen met dezelfde naam.

Ik hoop dat dit artikel u helpt om uw ontwerpwerk in Figma comfortabeler te maken.