Figma Variables kamen 2023 als lang überfällige Antwort der Plattform auf Design-Tokens. Die Funktion ist leistungsstark: benannte Sammlungen primitiver Werte — Farben, Zahlen, Strings, Booleans — die Sie an jede Eigenschaft jeder Komponente binden können. Ändern Sie die Variable, und jede Instanz aktualisiert sich. Fügen Sie eine Dark-Mode-Sammlung hinzu, jede Variablenbindung wechselt automatisch.

Für KI-Codegen sind Variables nicht nur nützlich. Sie sind der Mechanismus, der eine Figma-Datei von einem pixelgenauen Mockup in eine Spezifikation verwandelt, die Ihr Agent korrekt implementieren kann. Wenn eine Farbe einen Namen hat — color/brand/primary, nicht #7F5CFE — kann der Agent sie auf einen Code-Token abbilden, den Dark Mode korrekt implementieren und Ausgaben produzieren, die an Ihrem tatsächlichen Design-System teilnehmen.

Das Problem: Die meisten aktiv genutzten Figma-Dateien haben heute keine Variables eingerichtet. figmascope behandelt beide Fälle. Dieser Beitrag erklärt wie.

Was Variables wirklich sind

Eine Figma Variable ist ein benannter Skalar, der an eine Sammlung gebunden ist. Sammlungen organisieren Variables nach Modus — „Light" und „Dark" sind das kanonische Beispiel. Jede Variable in einer Sammlung kann unterschiedliche Werte pro Modus haben: color/surface/background ist #FFFFFF im Light-Modus und #0D0D0D im Dark-Modus. Die Bindung propagiert: Jede Füllung, die color/surface/background referenziert, aktualisiert sich beim Moduswechsel.

Variables können Farben, Zahlen, Strings oder Booleans sein. In der Praxis sind Farben und Zahlen am wirkungsvollsten — das deckt den größten Teil der Token-Oberfläche eines typischen Design-Systems ab: Farbpalette, Abstands-Skala, Randradien, Schriftgrößen, Elevation-Werte.

Figma stellt Variables über seine REST API als localVariables-Sammlung bereit. Jede Variable hat eine ID, einen Namen, einen Typ und Werte pro Modus. Komponenteneigenschaften, die Variables referenzieren, tragen ein boundVariables-Feld mit der Variablen-ID. Das sind strukturierte Daten, die sauber durch die Extraktions-Pipeline reisen.

Der Idealfall: Variables sind vorhanden

Wenn eine Figma-Datei Variables hat, liest figmascope diese aus der API und erstellt eine tokens.json nach einer W3C Design Tokens Community Group-kompatiblen Struktur. Jeder Token hat einen $value und einen $type. Farb-Tokens erhalten Hex-Werte mit optionalem Alpha. Spacing-Tokens erhalten numerische Werte mit einem px-Einheitenhinweis. Der Token-Name folgt dem Sammlungs- und Namenspfad der Variable:

{
  "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" }
  }
}

Wenn das Per-Screen-IR erstellt wird, erhält jede Füllung, die eine boundVariables-Referenz hatte, den Token-Namen statt des aufgelösten Hex-Werts. Der Knoten trägt:

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

Nicht #7F5CFE. Den Token-Namen. Der Agent liest das und generiert background-color: var(--color-brand-primary) oder Color.brandPrimary oder welches Token-Konsummuster das Ziel-Framework auch verwendet. Das ist die Ausgabe, die Sie wollen: Code, der mit Ihrem Design-System verbunden ist, nicht Code, der bricht, sobald ein Designer eine Farbe aktualisiert.

Semantische Benennung ist der Unterschied zwischen Code, der gut altert, und Code, der abdriftet. Ein Hex-Wert im Quellcode ist eine Verbindlichkeit; eine Token-Referenz ist ein Vertrag. Variables sind das, was Figma-Dateien in der Lage macht, Verträge auszudrücken, nicht nur Pixel.

Die Realität: Die meisten Dateien haben keine Variables

Variables erfordern den Figma Professional Plan oder höher. Sie erfordern einen Designer, der sie eingerichtet hat — was das Erstellen von Sammlungen, das Benennen von Variables und das manuelle Binden an jede Komponenteneigenschaft bedeutet. In einer ausgereiften, gut gepflegten Design-System-Datei ist das erledigt. In der Produktfigma eines Startups, der Kundendatei eines Freelancers oder jeder Datei, die vor der Variables-Funktion existiert — typischerweise nicht.

figmascope wurde auch für diese Dateien konzipiert. Es degradiert elegant: Wenn Variables fehlen, greift es auf häufigkeitsbasierte Token-Inferenz zurück.

Der Fallback: Aus Häufigkeit abgeleitet

Der Inferenz-Algorithmus funktioniert so:

  1. Alle Blatt-Knoten in allen exportierten Frames durchlaufen.
  2. Alle Füllfarben, Abstandswerte und Randradien sammeln.
  3. Vorkommen jedes eindeutigen Werts zählen.
  4. Werte, die über einem Häufigkeitsschwellenwert erscheinen, werden zu abgeleiteten Tokens befördert.
  5. Jeder Token erhält einen wertabgeleiteten Namen: color.7f5cfe, spacing.16, radius.8.

Die Ausgabe tokens.json sieht strukturell ähnlich aus wie der Variables-Pfad, aber die Namen sind wertabgeleitet statt semantisch:

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

Im IR erhalten Knoten, die diese Werte verwenden, Token-Referenzen: "tokenRef": "color.7f5cfe". Keine fest codierten Literale. Referenzen — nur auf abgeleitete Tokens statt auf benannte.

Der Agent generiert trotzdem token-referenzierten Code. var(--color-7f5cfe) ist nicht so lesbar wie var(--color-brand-primary), aber es ist trotzdem ein Token — Sie können es suchen und ersetzen, umbenennen, seine Verwendung prüfen. Es ist ein benanntes Griff an einem Wert, keine magische Zahl.

Das tokensSource-Feld

Jedes figmascope-Bundle enthält eine _meta.json, die dokumentiert, was im Bundle ist und wie es produziert wurde. Das tokensSource-Feld hat drei mögliche Werte:

Das ist wichtig, weil es dem konsumierenden Agenten (und dem Entwickler, der das Bundle liest) genau mitteilt, wie sehr er den Token-Namen vertrauen kann. Ein figma-variables-Bundle ist die Quelle der Wahrheit für Ihr Design-System. Ein inferred-from-frequency-Bundle ist ein nützliches strukturelles Gerüst, das vor der Kanonisierung eine Designer-Namens-Überprüfung benötigt. Ein none-Bundle ist ein Ausgangspunkt mit fest codierten Werten, die später tokenisiert werden müssen.

Ehrliche Metadaten sind unterschätzt. Werkzeuge, die stillschweigend ableiten ohne es als Ableitung zu kennzeichnen, erzeugen falsches Vertrauen. figmascope legt die Inferenzkette explizit offen, damit Sie wissen, womit Sie arbeiten.

Warum Häufigkeitsinferenz besser als nichts ist

Die Alternative zur Häufigkeitsinferenz ist, überall aufgelöste Literalwerte auszugeben — #7F5CFE in jedem Füllknoten, der diese Farbe verwendet. Das produziert Code, der schwieriger zu refaktorieren, schwieriger zu prüfen und schwieriger mit einem Design-System zu verbinden ist, wenn eines schließlich hinzugefügt wird.

Häufigkeitsinferenz extrahiert zumindest den Satz von Werten, die das Design tatsächlich verwendet. Wenn #7F5CFE 47 Mal im Design erscheint, ist das ein Signal: Das ist eine Primärfarbe, kein Akzent. Der Token-Name weiß das nicht — er ist nur color.7f5cfe — aber die Häufigkeitsdaten erzählen die Geschichte. Ein Agent mit abgeleiteten Tokens kann vernünftige Vermutungen anstellen, welche Werte primär und welche einmalig sind.

Praktischer gesehen: Häufigkeitsinferenz gibt Ihnen eine tokens.json, die über Versionen hinweg vergleichbar ist. Wenn Sie dieselbe Datei zweimal exportieren, nachdem ein Designer eine wiederkehrende Farbe geändert hat, zeigt der Diff die geänderte Token-Wert. Ohne Inferenz müssten Sie jede einzelne Literaländerung über mehrere IR-Dateien verstreut verfolgen.

Was Designer trotzdem tun sollten

Häufigkeitsinferenz ist eine Kompatibilitätsschicht, kein Ersatz für Variables. Der richtige Weg ist, dass Designer Variables für alle Werte übernehmen, die an einem Design-System teilnehmen: Brand-Farben, Neutral-Skala, Abstands-Skala, Randradien, Elevation, Typografie. Sobald diese vorhanden sind, geht das figmascope-Bundle von scaffold-qualitätigen Tokens zu produktionsqualitätigen Tokens über.

Variables schalten auch Theming im Bundle frei: mehrere Moduswerte pro Token. Eine Datei mit Light/Dark-Modi erzeugt eine tokens.json mit Werten pro Modus, die direkt in CSS Custom Properties mit Media-Query-Overrides oder plattformspezifische Theme-Objekte einfließt. Das ist per Inferenz aus einem einzelnen Design-Snapshot unmöglich — es erfordert explizite Designer-Intention, ausgedrückt durch Variables.

Der Upgrade-Pfad ist inkrementell. Ein Team kann heute mit inferenz-qualitätigen Tokens beginnen, Variables schrittweise einführen, wenn das Design-System reift, und automatisch bessere Bundles erhalten, wenn es das tut. Das tokensSource-Feld verfolgt, wo Sie in dieser Progression stehen.

Die Token-Pipeline im vollen Umfang

Um es konkret zu machen, hier ist die vollständige Auflösungsreihenfolge, die figmascope für jede Füllung im IR verwendet:

  1. Hat der Knoten eine boundVariables.fills-Referenz? Wenn ja, auf den Variablennamen und den Modus-Null-Wert auflösen. Token-Quelle: figma-variables.
  2. Ist der aufgelöste Wert in den abgeleiteten Häufigkeits-Tokens vorhanden (über dem Schwellenwert)? Wenn ja, auf den abgeleiteten Token-Namen abbilden. Token-Quelle: inferred-from-frequency.
  3. Andernfalls: den aufgelösten Hex-Wert direkt verwenden. Keine Token-Referenz. Token-Quelle: none.

Die Schritte werden der Reihe nach versucht. Die höchste Qualitätsquelle gewinnt. Das tokensSource-Feld in _meta.json spiegelt den dominanten Pfad für das Bundle insgesamt wider.

Das bedeutet, dass eine teilweise mit Variables versehene Datei — wo einige Komponenten Bindungen haben und andere nicht — ein gemischtes Bundle erzeugt. Benannte Tokens wo sie existieren, abgeleitete Tokens wo nicht. Das ist das richtige Verhalten: Verwenden Sie jeden Fetzen strukturierter Information, der verfügbar ist, und seien Sie ehrlich darüber, welchen Pfad jeder Wert genommen hat.

Exportieren Sie Ihr Bundle aus der figmascope App, um zu sehen, welche tokensSource Ihre Datei erzeugt. Verwenden Sie dann das Bundle mit Claude Code oder Cursor für genaue, token-referenzierte Code-Generierung.