Figma Variables verschenen in 2023 als het langverwachte antwoord van het platform op ontwerptokens. De functie is krachtig: benoemde verzamelingen primitieve waarden — kleuren, getallen, strings, booleans — die je aan elke eigenschap in elk component kunt koppelen. Verander de variabele en elke instantie wordt bijgewerkt. Voeg een donkeremodus-verzameling toe en elke variabelekoppeling wisselt automatisch.

Voor AI-codegeneratie zijn Variables niet alleen nuttig. Ze zijn het mechanisme dat een Figma-bestand omzet van een pixel-perfecte mockup naar een specificatie die je agent correct kan implementeren. Wanneer een kleur een naam heeft — color/brand/primary, niet #7F5CFE — kan de agent het koppelen aan een codetoken, de donkere modus correct implementeren en uitvoer produceren die deelneemt aan je werkelijke ontwerpsysteem.

Het probleem: de meeste Figma-bestanden die momenteel actief worden gebruikt, hebben geen Variables ingesteld. figmascope verwerkt beide gevallen. Dit artikel legt uit hoe.

Wat Variables werkelijk zijn

Een Figma Variable is een benoemde scalar gekoppeld aan een verzameling. Verzamelingen organiseren variabelen per modus — "Licht" en "Donker" zijn het canonieke voorbeeld. Elke variabele in een verzameling kan per modus verschillende waarden hebben: color/surface/background is #FFFFFF in Licht en #0D0D0D in Donker. De koppeling propageert: elke vulling die color/surface/background verwijst, wordt bijgewerkt wanneer je van modus wisselt.

Variables kunnen kleuren, getallen, strings of booleans zijn. In de praktijk hebben kleuren en getallen de grootste impact — dat dekt het grootste deel van het tokenoppervlak in een typisch ontwerpsysteem: kleurenpalet, afstandsschaal, randstralen, lettergrootten, hoogteverschilwaarden.

Figma stelt Variables bloot via zijn REST API als een localVariables-verzameling. Elke variabele heeft een ID, een naam, een type en waarden per modus. Componenteigenschappen die variabelen verwijzen, bevatten een veld boundVariables met de variabele-ID. Dit is gestructureerde data die schoon door de extractiepijplijn reist.

Het ideale geval: Variables zijn aanwezig

Wanneer een Figma-bestand Variables heeft, leest figmascope ze uit de API en bouwt een tokens.json conform een W3C Design Tokens Community Group-compatibele structuur. Elk token heeft een $value en een $type. Kleurtokens krijgen hexwaarden met optionele alpha. Tussenruimtetokens krijgen numerieke waarden met een px-eenheidstip. De tokennaam volgt het pad van de verzameling en naam van de variabele:

{
  "color": {
    "brand": {
      "primary": { "$value": "#7F5CFE", "$type": "color" }
    },
    "surface": {
      "background": { "$value": "#FFFFFF", "$type": "color" }
    }
  },
  "spacing": {
    "4": { "$value": 4, "$type": "number" },
    "8": { "$value": 8, "$type": "number" },
    "16": { "$value": 16, "$type": "number" }
  }
}

Wanneer de per-scherm IR wordt gebouwd, krijgt elke vulling die een boundVariables-referentie had de tokennaam in plaats van de opgeloste hex. De node bevat:

"fills": [{ "type": "SOLID", "tokenRef": "color/brand/primary" }]

Niet #7F5CFE. De tokennaam. De agent leest dit en genereert background-color: var(--color-brand-primary) of Color.brandPrimary of welk tokenconsumptiepatroon het doelframework ook gebruikt. Dat is de uitvoer die je wilt: code die verbonden is met je ontwerpsysteem, niet code die breekt zodra een ontwerper een kleur bijwerkt.

Semantische naamgeving is het verschil tussen code die goed veroudert en code die driftt. Een hexwaarde in broncode is een aansprakelijkheid; een tokenreferentie is een contract. Variables zijn wat Figma-bestanden in staat stelt contracten uit te drukken, niet alleen pixels.

De realiteit: de meeste bestanden hebben geen Variables

Variables vereisen een Figma Professional-abonnement of hoger. Ze vereisen een ontwerper die ze heeft ingesteld — wat betekent: verzamelingen aanmaken, variabelen benoemen en ze handmatig koppelen aan elke componenteigenschap. In een volwassen, goed onderhouden ontwerpsysteembestand is dat gedaan. In het product-Figma van een startup, het klantenbestand van een freelancer, of elk bestand dat dateert van vóór de Variables-functie, is dat doorgaans niet het geval.

figmascope is ontworpen om ook voor die bestanden nuttig te zijn. Het degradeert netjes: wanneer Variables ontbreken, valt het terug op op frequentie gebaseerde tokeninferentie.

Het terugvalplan: afgeleid op basis van frequentie

Het inferentie-algoritme werkt als volgt:

  1. Doorloop elke leaf-node in elk geëxporteerd frame.
  2. Verzamel alle vulkleuren, tussenruimtewaarden en randstralen.
  3. Tel het voorkomen van elke unieke waarde.
  4. Waarden die boven een frequentiedrempel verschijnen, worden gepromoveerd tot afgeleide tokens.
  5. Elk token krijgt een op de waarde gebaseerde naam: color.7f5cfe, spacing.16, radius.8.

De uitvoer tokens.json ziet er structureel vergelijkbaar uit als het Variables-pad, maar de namen zijn op waarde gebaseerd in plaats van semantisch:

{
  "color": {
    "7f5cfe": { "$value": "#7F5CFE", "$type": "color" },
    "f6f2ea": { "$value": "#F6F2EA", "$type": "color" }
  },
  "spacing": {
    "16": { "$value": 16, "$type": "number" },
    "8": { "$value": 8, "$type": "number" }
  }
}

In de IR krijgen nodes die deze waarden gebruiken tokenreferenties: "tokenRef": "color.7f5cfe". Geen hardgecodeerde literalen. Referenties — maar dan naar afgeleide tokens in plaats van benoemde.

De agent genereert nog steeds tokengerefereerde code. var(--color-7f5cfe) is niet zo leesbaar als var(--color-brand-primary), maar het is nog steeds een token — je kunt het zoeken-en-vervangen, hernoemen, het gebruik controleren. Het is een benoemde handle op een waarde, geen magisch getal.

Het veld tokensSource

Elke figmascope-bundel bevat een _meta.json die documenteert wat er in de bundel zit en hoe het is geproduceerd. Het veld tokensSource heeft drie mogelijke waarden:

Dit is belangrijk omdat het de verbruikende agent (en de ontwikkelaar die de bundel leest) precies vertelt hoeveel vertrouwen de tokennamen verdienen. Een figma-variables-bundel is de bron van waarheid voor je ontwerpsysteem. Een inferred-from-frequency-bundel is een nuttig structureel steiger dat een naambeoordelingen door de ontwerper nodig heeft voordat het canoniek is. Een none-bundel is een startpunt met hardgecodeerde waarden die later moeten worden getokeniseerd.

Eerlijke metadata is onderschat. Tools die stilzwijgend afleiden zonder het als inferentie te markeren, creëren vals vertrouwen. figmascope maakt de inferentieketen expliciet zichtbaar zodat je weet waarmee je werkt.

Waarom frequentie-inferentie beter is dan niets

Het alternatief voor frequentie-inferentie is overal opgeloste letterwaarden uitvoeren — #7F5CFE in elke vulnode die die kleur gebruikt. Dit produceert code die moeilijker te refactoren, moeilijker te controleren en moeilijker te verbinden is aan een ontwerpsysteem wanneer er uiteindelijk een wordt toegevoegd.

Frequentie-inferentie extraheert minimaal de set waarden die het ontwerp werkelijk gebruikt. Als #7F5CFE 47 keer verschijnt in het ontwerp, is dat een signaal: dit is een primaire kleur, geen accent. De tokennaam weet dat niet — het is gewoon color.7f5cfe — maar de frequentiegegevens vertellen het verhaal. Een agent met de afgeleide tokens kan redelijke vermoedens doen over welke waarden primair zijn en welke eenmalig.

Praktischer: frequentie-inferentie geeft je een tokens.json die diffbaar is over versies heen. Als je hetzelfde bestand tweemaal exporteert nadat een ontwerper een terugkerende kleur heeft gewijzigd, toont de diff dat de tokenwaarde is veranderd. Zonder inferentie zou je elke afzonderlijke letterwaardeverandering moeten opsporen verspreid over meerdere IR-bestanden.

Wat ontwerpers nog steeds moeten doen

Frequentie-inferentie is een compatibiliteitslaag, geen vervanging voor Variables. Het juiste pad is voor ontwerpers om Variables te adopteren voor alle waarden die deel uitmaken van een ontwerpsysteem: merkkleuren, neutrale schaal, tussenruimteschaal, randstralen, hoogte, typografie. Zodra die aanwezig zijn, gaan de figmascope-bundeltokens van steiger-kwaliteit naar productiekwaliteit.

Variables ontgrendelen ook thematisering in de bundel: meerdere moduswaarden per token. Een bestand met Licht/Donker-modi produceert een tokens.json met per-modus-waarden die direct voeden in CSS-aangepaste eigenschappen met media query-overschrijvingen, of platformspecifieke thema-objecten. Dit is onmogelijk te afleiden uit een enkele ontwerpmomentopname — het vereist expliciete intentie van de ontwerper, uitgedrukt via Variables.

Het upgradepad is incrementeel. Een team kan vandaag beginnen met inferentie-kwaliteitstokens, Variables geleidelijk adopteren naarmate het ontwerpsysteem rijpt, en automatisch betere bundels krijgen naarmate ze dat doen. Het veld tokensSource houdt bij waar je bent in die progressie.

De tokenpijplijn volledig uitgelegd

Om het concreet te maken, hier is de volledige oplossingsvolgorde die figmascope gebruikt voor elke vulling in de IR:

  1. Heeft de node een boundVariables.fills-referentie? Zo ja, los op naar de variabelenaam en modus-nul-waarde. Tokenbron: figma-variables.
  2. Is de opgeloste waarde aanwezig in de afgeleide frequentietokens (boven drempelwaarde)? Zo ja, map naar de afgeleide tokennaam. Tokenbron: inferred-from-frequency.
  3. Anders: gebruik de opgeloste hexwaarde direct. Geen tokenreferentie. Tokenbron: none.

Stappen worden in volgorde geprobeerd. De hoogste-kwaliteitsbron wint. Het veld tokensSource in _meta.json weerspiegelt het dominante pad voor de bundel als geheel.

Dit betekent dat een gedeeltelijk-Variables-bestand — waarbij sommige componenten bindingen hebben en andere niet — een gemengde bundel produceert. Benoemde tokens waar ze bestaan, afgeleide tokens waar ze niet bestaan. Dat is het juiste gedrag: gebruik elk stukje gestructureerde informatie dat beschikbaar is, val netjes terug waar het ontbreekt, en wees eerlijk over welk pad elke waarde heeft genomen.

Exporteer je bundel vanuit de figmascope-app om te zien welke tokensSource je bestand produceert. Gebruik dan de bundel met Claude Code of Cursor voor nauwkeurige, tokengerefereerde codegeneratie.