Was sind Figma-Variablen?

Figma-Variablen sind benannte Werte in einer Figma-Datei für Farben, Zahlen, Zeichenketten und Wahrheitswerte, mit Modi für Fälle wie helles und dunkles Theme. Sie sind Figmas native Form von Design-Tokens, doch sie programmatisch über die Figma-REST-API zu lesen setzt einen Enterprise-Plan voraus.

Was sie leisten

Variablen erlauben es einer Figma-Datei, benannte Werte zu halten, statt rohe Werte zu wiederholen. Vier Typen werden unterstützt: Farbe, Zahl, Zeichenkette und Wahrheitswert.

Sie lassen sich in Collections organisieren, und jede Collection kann Modi haben - meist Hell und Dunkel, aber auch Dichte, Marke oder Plattform. Eine an eine Variable gebundene Ebene aktualisiert sich beim Moduswechsel, wodurch Theming innerhalb von Figma so funktioniert, wie es soll.

Variablen können außerdem andere Variablen aliasieren, und so baut man eine semantische Ebene: text/danger zeigt auf red/600.

Wo die Schwierigkeit liegt

Variablen lösen das Problem innerhalb von Figma. Das Problem außerhalb bleibt ungelöst, und genau hier werden Teams überrascht.

Variablen über die Figma-REST-API zu lesen setzt einen Enterprise-Tarif voraus. Der Endpunkt existiert und antwortet in den Tarifen Professional und Organization mit 403.

Die praktische Konsequenz wiegt bei der Werkzeugauswahl schwer. Alles, was Figma-Token-Sync über die REST-API verspricht, funktioniert auf einem Enterprise-Konto und tut auf dem Tarif, den die meisten Teams haben, schlicht nichts. Es lohnt sich, vor einem Kauf direkt danach zu fragen, denn in Marketingmaterial taucht es üblicherweise nicht auf.

Plugins sind nicht betroffen. Die Plugin-API liest Variablen von innerhalb der Datei, und ein Plugin läuft in jedem Tarif. Ein Werkzeug, dessen Transport ein Plugin ist, funktioniert unabhängig von deiner Figma-Stufe.

Variablen und Design-Tokens

Figma-Variablen sind eine Form von Design-Tokens, begrenzt auf Figma. Für sich genommen sind sie nicht portabel: Es gibt keinen eingebauten Export nach CSS, nach Tailwind oder in das W3C-Token-JSON-Format.

Diese Lücke zu schließen ist genau die Aufgabe von Token-Werkzeugen. Die Wahl steht zwischen einem Plugin, das überall funktioniert, und der REST-API, die das nicht tut.

Wo Flash DSM hier steht

Flash DSM nutzt genau aus diesem Grund ein Figma-Plugin als Transport. Es liest Variablen in jedem Figma-Tarif, macht aus einem Publish ein prüfbares Token-Diff und exportiert nach CSS, Tailwind, Tokens Studio JSON oder einen GitHub-Pull-Request.