# Figma-Tokens-Exporteur

Fügen Sie ein Figma-/Tokens-Studio-Variablen-JSON ein und exportieren Sie nach Tailwind, shadcn CSS-Variablen, Style Dictionary oder SCSS. Erhält Farb-, Abstands- und Font-Tokens mit Typ-Inferenz.

> Kanonische Seite: https://elysiatools.com/de/tools/figma-tokens-export

- **Kategorie:** Design

- **Schlagwörter:** figma, design-tokens, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, css-variablen, theme, design-system

## Überblick

Fügen Sie ein **Figma-/Tokens-Studio-Variablen-JSON** ein und exportieren Sie es in eines von vier beliebten Zielen:

- **Tailwind** `theme.extend` — mappt automatisch `color/*` → `colors`, `spacing/*` → `spacing` usw.
- **shadcn/ui CSS-Variablen** — HSL-Konvention leerzeichengetrennt (`--background: 0 0% 100%`).
- **Style Dictionary / W3C DTCG** — gibt die kanonische Form `{ $value, $type }` erneut aus.
- **SCSS-Variablen** — Stil `$color-brand-primary: #2563eb;`.

**Akzeptierte Eingabeformen** — Tokens Studio/W3C (`$value/$type`), Legacy (`value/type`), einfache verschachtelte Werte und rgba-Objekte der Figma-REST-API.

**Typ-Inferenz** — wenn ein Token keinen expliziten `$type` hat, wird er inferiert: `#hex`/`rgb()`/benannte Farben → color; Werte mit `px/rem/em/%` → dimension; reine Zahlen → number; Rest → string. Die Option **Color format** rendert jede Farbe als `hex`, `rgb()`, `hsl` oder `hsl()` neu.

## Eingaben

- **Figma-Tokens-JSON** (textarea): Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.
- **Zielformat** (select): Which target format to export the tokens to.
- **Farbformat** (select): How to re-render color tokens in the output. HSL space-separated is the shadcn convention.

## Wann verwenden

- Wenn Sie Design-Tokens aus Figma oder Tokens Studio direkt in eine Tailwind-Konfiguration überführen möchten.
- Wenn Sie CSS-Variablen im HSL-Format für shadcn/ui-Komponenten generieren müssen.
- Wenn Sie rohe JSON-Daten der Figma-REST-API in strukturierte SCSS-Variablen oder W3C-konforme Style-Dictionary-Tokens konvertieren wollen.

## Funktionsweise

- Fügen Sie Ihr Figma- oder Tokens-Studio-JSON in das Eingabefeld ein.
- Wählen Sie das gewünschte Zielformat aus (Tailwind, shadcn, Style Dictionary oder SCSS).
- Bestimmen Sie das bevorzugte Farbformat wie Hex, RGB oder HSL.
- Kopieren Sie den generierten Code direkt in Ihre Design-System-Konfiguration.

## Anwendungsfälle

- Synchronisation von Figma-Farbpaletten mit der Tailwind-Konfiguration eines Webprojekts.
- Bereitstellung von Design-Tokens für plattformübergreifende Teams via Style Dictionary.
- Schnelle Konvertierung von Figma-API-Rohdaten in saubere SCSS-Variablen für Legacy-Projekte.

## Häufig gestellte Fragen

### Welche Eingabeformate werden unterstützt?

Das Tool akzeptiert Tokens Studio/W3C-Formate, ältere Tokens-Studio-Strukturen, einfache verschachtelte JSON-Werte sowie RGBA-Objekte der Figma-REST-API.

### Wie funktioniert die automatische Typ-Inferenz?

Ohne expliziten Typ werden Hex/RGB-Werte als Farbe, Werte mit Einheiten wie px/rem als Dimension und reine Zahlen als Number eingestuft.

### Kann ich Farben für shadcn/ui konvertieren?

Ja, wählen Sie das Zielformat 'shadcn' und das Farbformat 'HSL leerzeichengetrennt', um die passende CSS-Variablen-Syntax zu erhalten.

### Unterstützt das Tool W3C Design Tokens Community Group (DTCG) Standards?

Ja, beim Export in das Style Dictionary Format wird die kanonische Struktur mit $value und $type ausgegeben.

### Müssen meine Tokens bereits Typen definiert haben?

Nein, das Tool erkennt und ergänzt fehlende Typen automatisch anhand des Werts.

## Ähnliche Tools

- [Graustufen-Konverter](https://elysiatools.com/de/tools/color-grayscale-converter): Farben in Graustufen umwandeln mit mehreren Konvertierungsmethoden und Intensitätssteuerung
- [Color-Token-Kaskaden-Generator](https://elysiatools.com/de/tools/color-token-cascade-generator): Erzeugt aus einem Primaer-Hex eine komplette Token-Hierarchie mit CSS-Variablen und Style-Dictionary-JSON
- [ECharts-Theme-Token-Extraktor](https://elysiatools.com/de/tools/echarts-theme-token-extractor): Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren.
- [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala
- [API-Latenzbudget-Planer](https://elysiatools.com/de/tools/api-latency-budget-planner): Planen und visualisieren Sie ein API-Latenzbudget. Geben Sie ein P99-Ziel (z. B. ≤ 300ms) und die Phasenzuweisung (DNS, TCP, TLS, TTFB, Processing, Network) ein, um ein Live-Waterfall, die Budgetauslastung und Warnungen bei Überschreitung zu sehen. Optional OpenTelemetry- oder Datadog-Trace einfügen, um eine gemessene Zuweisung abzuleiten.
- [CSV-zu-Datenbank-Migrationsplaner](https://elysiatools.com/de/tools/csv-to-database-migration-planner): Leitet aus CSV-Daten ein relationales Schema ab und erzeugt CREATE-TABLE- und ALTER-Plaene fuer PostgreSQL, MySQL, SQLite oder SQL Server
- [JSONata-Abfrage- und Transformationsstudio](https://elysiatools.com/de/tools/jsonata-query-transform-studio): Vorschau fuer JSONata-aehnliche Abfragen und Transformationen, Vergleich mehrerer Payloads und Export als JSON, CSV, YAML oder Markdown.
- [JWK-Generator & Parser](https://elysiatools.com/de/tools/jwk-generator): Generiert JSON Web Keys (JWK) für RSA, EC (P-256/P-384/P-521/secp256k1) und OKP (Ed25519/Ed448/X25519/X448) oder parst einen bestehenden JWK zur Inspektion von Parametern, Fingerabdruck und Metadaten

## Beispiele

- [JWT-Beispiele](https://elysiatools.com/de/samples/jwt-samples): Umfassende JWT-Beispiele von der grundlegenden Token-Struktur bis zu fortgeschrittenen Sicherheitsimplementierungen
- [Postman Collections - API Tests](https://elysiatools.com/de/samples/postman-collections): Umfassende Postman Collection Beispiele inklusive API Tests, Automatisierungsskripte, Umgebungsvariablen, Mock Server und fortgeschrittene Testmuster für REST APIs
- [Terraform-Plan-JSON-Beispiele](https://elysiatools.com/de/samples/terraform-plan-json-samples): Terraform-Plan-JSON-Dateien fuer Abhaengigkeitsvisualisierung und Change-Review, passend zu terraform show -json
- [Distributed Tracing Beispiele](https://elysiatools.com/de/samples/distributed-tracing-samples): Umfassende Beispiele für verteiltes Tracing mit Jaeger, OpenTelemetry und modernen Observability Tools