Tokens Studio für Figma
In Figma gibt es seit einiger Zeit ein Plugin namens Tokens Studio, mit dem sich Variablen aus Figma in sogenannte Design Tokens umwandeln und beispielsweise per Git exportieren lassen. Design Tokens vereinfachen die Pflege und Konsistenz von Designsystemen erheblich und schaffen eine gemeinsame Sprache zwischen Design und Entwicklung.
Die Verwendung von Design Tokens bringt zahlreiche Vorteile mit sich:
Zentrale Verwaltung: Design-Parameter werden zentral gepflegt und können systemübergreifend verwendet werden.
Einfachere Wartung: Änderungen müssen nur an einer Stelle vorgenommen werden, was die Pflege erheblich erleichtert.
Bessere Kommunikation: Design und Entwicklung arbeiten mit den gleichen Begriffen und Grundlagen.
Skalierbarkeit: Design-Parameter lassen sich flexibel für verschiedene Endgeräte und Plattformen einsetzen (z. B. Websites, Apps).
Automatisierte Übergabe: Design-Parameter können teilweise automatisiert an die Entwicklung übergeben werden.
Schema des Arbeitsablaufes
1. Variablen in Figma einrichten
Zunächst müssen die Variablen in Figma erstellt werden.
Variablen sind zentrale Bausteine, in denen alle Design-Parameter wie Schriftarten, Farben, Abstände usw. definiert werden. Designer sollten sich intensiv mit dem Thema auseinandersetzen, da die Nutzung von Variablen grundsätzlich empfohlen wird.
In Figma lassen sich Variablen lokal oder global anlegen. Es empfiehlt sich, globale Variablen zu verwenden, da für jeden Entwurf eigene Variablen anzulegen sehr aufwendig und im Agenturalltag unpraktisch wäre.
Variablen in Figma definieren und den Komponenten zuweisen
2. Plugin in Figma installieren
Im nächsten Schritt installierst du das Plugin Tokens Studio in Figma. Dazu rufst du über den Action-Button die Plugin-Übersicht auf. Die Handhabung ist recht einfach, deshalb gehe ich hier nicht näher auf die Installation ein.
Nach der Installation kannst du einen leeren Token oder einen Beispiel-Token anlegen.
Tokens Studio in Figma installieren
3. Web Tokens exportieren
Um die Web Tokens später exportieren zu können, benötigst du einen GitHub- oder GitLab-Account. Alternativ lassen sich die Tokens auch als JSON-Datei lokal speichern. Diese Option wirst du jedoch in der Praxis eher selten nutzen.
Die Entwickler des Plugins empfehlen grundsätzlich GitHub oder GitLab. Nach Eintragen der Zugangsdaten im Plugin kannst du die Tokens direkt ins jeweilige Repository exportieren oder daraus importieren. Screenshots dazu findest du ebenfalls im Artikel.
Github Repo in Tokens Studio hinterlegen (Schritt 1)
Github Repo in Tokens Studio hinterlegen (Schritt 2)
Variablen in Tokens Studio importieren und pushen
4. Design Tokens in SCSS umwandeln
Was passiert nun mit den Design Tokens im Git-Repository? Diese müssen natürlich noch in CSS- oder JavaScript-Code überführt werden.
In diesem Beispiel verwende ich die Tokens, um SCSS-Variablen aus Bootstrap zu überschreiben. Das CSS-Framework nutzt ebenfalls Variablen, mit denen sich das Layout anpassen lässt. Wichtig ist, dass die Namenskonventionen übereinstimmen.
Zum Beispiel muss die Figma-Variable für den Hintergrund genau so heißen wie die Bootstrap-Variable $body-bg.
Um die Tokens in eine SCSS-Datei umzuwandeln, benötigst du das npm-Paket @tokens-studio/sd-transforms. Voraussetzung ist, dass npm auf deiner Entwicklungsumgebung installiert ist.
Installation:
npm install @tokens-studio/sd-transforms
Danach kannst du die Tokens in SCSS, Less oder CSS umwandeln. Ich verwende dazu Node.js und führe folgende JavaScript-Datei aus.
node build-output.js
Die build-output.js baut sich folgendermaßen auf.
import { register } from '@tokens-studio/sd-transforms';
import StyleDictionary from 'style-dictionary';
register(StyleDictionary, {
excludeParentKeys: true,
});
const sd = new StyleDictionary({
source: ['token.json'],
preprocessors: ['tokens-studio'],
platforms: {
css: {
transformGroup: 'tokens-studio',
transforms: ['name/kebab'],
buildPath: 'Resources/Public/scss/',
files: [
{
destination: 'variables-figma.scss',
format: 'scss/variables',
},
],
},
},
});
await sd.cleanAllPlatforms();
await sd.buildAllPlatforms();
In meinem Beispiel generiere ich eine zusätzliche SCSS-Datei und binde sie anschließend in das CSS-Framework ein. Dabei ist die Reihenfolge der Variablen wichtig. Die bootstrap.scss habe ich hierzu durch diese Zeilen ergänzt.
@import "variables-figma";
.btn-primary {
color: $btn-color !important;
}
@import "variables";
Über den File Watcher in PHPStorm kannst du aus den SCSS-Dateien eine CSS-Datei erzeugen.
Du brauchst npm auf dem Live-System nicht installieren, da die Kompilierung bereits auf deiner lokalen Entwicklungsumgebung erfolgt.
Die fertige CSS-Datei wird dann einfach mit dem nächsten Deployment auf das Live-System hochgeladen.
Alternative: Build-Pipeline
Eine weitere Automatisierung ist über eine Build-Pipeline natürlich möglich (z. B. mit GitHub Actions oder GitLab CI) und wäre sogar zu empfehlen.
In diesem Fall erfolgt die Umwandlung der SCSS-Dateien in CSS-Dateien direkt im Repository, also serverseitig — ohne lokale Kompilierung.
Voraussetzungen für die Testumgebung
Entwicklungsumgebung (z. B. ddev, MAMP)
PHP 8.2
Composer
TYPO3 13
npm
- PHPStorm
Aktuelle Hinweise & Trends
Figma Modes & Variablen
Mit den Modes in Figma können Variablen noch flexibler für verschiedene Designzustände (z. B. Light/Dark Mode) definiert werden.
Das erleichtert die Verwaltung von Farbschemata und Style-Varianten erheblich.
Figma Dev Mode
Der Dev Mode in Figma wurde entwickelt, um die Zusammenarbeit mit Entwicklern zu verbessern.
Design Tokens und Variablen lassen sich hier noch einfacher einsehen und exportieren.
Automatisierte CI/CD-Integration
Immer mehr Teams integrieren den Export der Tokens direkt in automatisierte Build-Pipelines.
Mit GitHub Actions oder GitLab CI können Änderungen an den Tokens automatisch ins Repository übernommen und sofort im Frontend wirksam werden.
Fazit
Mit Tokens Studio für Figma lassen sich Designentscheidungen systematisch dokumentieren und nahtlos in den Entwicklungsprozess übertragen.
Durch die Kombination mit Bootstrap und TYPO3 entsteht ein konsistentes, wartbares und flexibles System.
Das hier vorgestellte Vorgehen ist leicht erweiterbar und stärkt die Zusammenarbeit zwischen Design und Entwicklung spürbar.
Vorteile
Designvorgaben werden zentral verwaltet.
Tokens können wiederverwendet werden.
Vereinfachte Zusammenarbeit zwischen Design und Entwicklung.
Plattformunabhängige Arbeit dank Figma und Tokens Studio.
Änderungen können automatisiert aktualisiert werden.
Nachteile
Relativ hohe Lernkurve.
Der Workflow in Figma wird komplexer.
Durch zusätzliche Tools steigt die Gesamtkomplexität.
Hast du bereits Erfahrungen mit Design Tokens in Figma? Teile uns deine Erfahrungen gerne in den Kommentaren mit.
