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.

Elysia Tools

Mobile Navigation

Design

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.

Einzelheiten

Wobei dieses Tool hilft

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.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Tokens Studio → Tailwind

Eine kleine Markenpalette + Abstandsskala als Tailwind theme.extend.

<div class="ft-wrap">3 tokens · 2 colors. colors: { brand: { primary: '#2563eb', secondary: '#9333ea' } }, spacing: { md: '16px' }</div>

Markenpalette → shadcn HSL

Dieselbe Palette als shadcn CSS-Variablen, HSL leerzeichengetrennt.

<div class="ft-wrap">--color-brand-primary: 221% 83% 53%;</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

3 Optionen

InhaltHaupteingaben einfügen oder eingeben.1

Figma-Tokens-JSONtextareaPflichtFigma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.2

ZielformatselectOptionales FeldWhich target format to export the tokens to.FarbformatselectOptionales FeldHow to re-render color tokens in the output. HSL space-separated is the shadcn convention.

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Mit verwandten Tools und Themen fortfahren

{ "color": { "brand": { "primary": { "$value": "#2563eb", "$type": "color" }, "secondary": { "$value": "#9333ea", "$type": "color" } } }, "spacing": { "md": { "$value": "16px", "$type": "spacing" } } }

Figma-Tokens-Exporteur

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Figma-Farben zu Tailwind-Theme konvertieren

2. Markenfarben in shadcn CSS-Variablen umwandeln

FAQ

JWT-Beispiele

Postman Collections - API Tests

Terraform-Plan-JSON-Beispiele

Distributed Tracing Beispiele

Graustufen-Konverter

Color-Token-Kaskaden-Generator

ECharts-Theme-Token-Extraktor

Bild-Palette zu Design-Tokens

Tools fur JSON-Austausch und Format-Ubersetzung

Werkzeuge fur JSON-Inspektion, Diff und Transformation

Generatoren fur JSON-Schemas, Mock-Daten und API-Fixtures

JSON-Formatierungs-, Diff- und Normalisierungs-Tools