Variabelen in Dev Mode
Als ontwikkelaar kom je bij het bekijken van ontwerpen in Dev Mode kleur-, getal-, string- en booleaanse variabelen tegen. De waarden van die variabelen kunnen afhankelijk zijn van zaken zoals de variabele modus, wat het soms moeilijker maakt om de exacte waarden te identificeren die je uit het ontwerp wilt halen.
Figma biedt enkele opties in de Dev Mode om het werken met variabelen eenvoudiger te maken voor ontwikkelaars:
Details van variabele
Wanneer je een ontwerp inspecteert in Dev Mode, kun je details bekijken over de variabelen die in het ontwerp zijn gebruikt. De modaal Details van variabele geeft informatie over een variabele, waaronder:
- De naam van de variabele
- Een link naar het bestand dat de variabele host
- De naam van de variabelenverzameling die de variabele bevat
- De modus van de variabele
- De waarde van de variabele en, indien relevant, de keten van aliassen naar een ruwe waarde
- De reikwijdte van de variabele (waar deze gebruikt kan worden)
- Een codefragment om de variabele te gebruiken
Een nuttige functie is de mogelijkheid om een keten van variabele-aliassen terug te volgen naar een specifieke waarde. In de vorige afbeelding gebruikt de variabele Achtergrond/Positief/Standaard bijvoorbeeld Groen/500 als alias, wat overeenkomt met de kleurwaarde #14AE5C.
Met de modaal Details van variabele kun je ook van modus veranderen, zodat je de andere waarden kunt zien die de variabele kan hebben.
Open de modaal "Details van variabele"
Er zijn twee manieren om de modaal Details van variabele te openen:
Voor variabelen die in een codefragment voorkomen, zoals ontwerptokens in CSS, klik je op de variabelenaam in het paneel Inspecteren om de modaal Details van variabele te openen.
Voor andere variabelen, zoals in de sectie Selectiekleuren, klik je op Details van variabele in het paneel Inspecteren om de modaal Details van variabele te openen.
Voorgestelde variabelen
Wanneer je een ontwerp inspecteert in Dev Mode, kom je soms ruwe waarden tegen in plaats van variabelen of stijlen. Dit kan om verschillende redenen voorkomen, bijvoorbeeld als een ontwerper tijdens de ontwerpfase per ongeluk een variabele heeft losgekoppeld. Wanneer je een ruwe waarde tegenkomt, wil je misschien controleren of er een bestaande variabele is die in plaats daarvan gebruikt moet worden.
Om het identificeren van overeenkomstige variabelen gemakkelijker te maken, kan Dev Mode variabelen voorstellen.
Om een variabele voor te stellen, moet de variabele beschikken over:
- Precies dezelfde waarde
- De juiste scope
Je kunt op een voorgestelde variabele klikken om de naam te kopiëren.
Haal voorgestelde variabelen op
Om suggesties voor variabelen te krijgen voor een waarde in de Dev-modus, klik je in het paneel Inspecteren op de waarde waarvoor je een suggestie wilt krijgen. De modaal Gesuggereerde variabelen verschijnt naast de waarde waarop je hebt geklikt.
Toegang tot lokale variabelenverzamelingen
In Dev Mode kun je de lokale variabelenverzamelingen in het bestand bekijken en openen.
In de vorige afbeelding is bijvoorbeeld in de sectie Verzamelingen uit dit bestand de variabelenverzameling Kleurprimitieven geselecteerd. Deze namen zijn slechts voorbeelden — de werkelijke namen van verzamelingen en variabelen komen overeen met de lokale variabelen en verzamelingen in je bestand.
Onder de sectie Verzamelingen uit dit bestand staat een lijst van alle variabelegroepen die in de verzameling voorkomen, zoals Merk, Zwart en Wit. Alle variabelen is standaard geselecteerd. De groepen zijn gerangschikt op dezelfde manier als dat ze zijn georganiseerd in de modaal Variabelen.
Voor de geselecteerde groep toont de tabel de variabelen, samen met de waarden voor elke variabelemodus. Als je Alle variabelen hebt geselecteerd, wordt de tabel per groep georganiseerd.
Je kunt op individuele variabelen en waarden klikken om ze naar je klembord te kopiëren en details over de variabele te bekijken.
Variabelentabel openen
Om de variabelentabel te openen, klik je in het gedeelte Variabelen van het paneel Inspecteren op Variabelen openen. De variabelentabel vouwt uit en vult het canvas.