Quels formats d'entrée sont acceptés ?

L'outil accepte les formats Tokens Studio/W3C ($value/$type), les formats hérités (value/type), les valeurs imbriquées simples et les objets RGBA de l'API REST Figma.

Comment fonctionne l'inférence de type ?

Si aucun type n'est spécifié, l'outil détecte automatiquement les couleurs (hex, rgb), les dimensions (px, rem, em, %) et les nombres.

Puis-je exporter mes couleurs pour shadcn/ui ?

Oui, sélectionnez la cible 'Variables CSS shadcn/ui' et le format de couleur 'HSL séparé par espaces' pour une compatibilité directe.

L'outil prend-il en charge les objets RGBA de l'API Figma ?

Oui, les objets de couleur au format { r, g, b, a } issus de l'API REST de Figma sont automatiquement convertis.

Faut-il installer un plugin pour utiliser cet exportateur ?

Non, il s'agit d'un outil en ligne gratuit qui traite vos données localement dans votre navigateur sans aucune installation.

Elysia Tools

Navigation mobile

Design

Exportateur de Tokens Figma

Collez un JSON de variables Figma / Tokens Studio et exportez vers Tailwind, variables CSS shadcn, Style Dictionary ou SCSS. Préserve les tokens de couleur, d'espacement et de police avec inférence de type.

Détails

Ce que cet outil vous aide à faire

Collez un JSON de variables Figma / Tokens Studio et exportez-le vers l'une de quatre cibles populaires :

Tailwind theme.extend — mappe automatiquement color/* → colors, spacing/* → spacing, etc.
Variables CSS shadcn/ui — convention HSL séparée par espaces (--background: 0 0% 100%).
Style Dictionary / W3C DTCG — réémet la forme canonique { $value, $type }.
Variables SCSS — style $color-brand-primary: #2563eb;.

Formes d'entrée acceptées — Tokens Studio/W3C ($value/$type), legacy (value/type), valeurs imbriquées simples et objets rgba de l'API REST Figma.

Inférence de type — quand un token n'a pas de $type explicite, il est déduit : #hex/rgb()/couleurs nommées → color ; valeurs avec px/rem/em/% → dimension ; nombres purs → number ; reste → string. L'option Color format re-rend chaque couleur en hex, rgb(), hsl ou hsl().

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

2 exemples

Tokens Studio → Tailwind

Une petite palette de marque + échelle d'espacement vers Tailwind theme.extend.

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

Palette de marque → shadcn HSL

La même palette en variables CSS shadcn, HSL séparé par espaces.

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

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

3 réglages

ContenuCollez ou saisissez les valeurs principales.1

JSON de tokens FigmatextareaRequisFigma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.

RéglagesAjustez formats, plages, nombres et modes.2

Format cibleselectOptionnelWhich target format to export the tokens to.Format de couleurselectOptionnelHow to re-render color tokens in the output. HSL space-separated is the shadcn convention.

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Continuer avec des outils et dossiers associés

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

Exportateur de Tokens Figma

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Exportation vers Tailwind CSS

2. Conversion pour shadcn/ui en HSL

FAQ

Exemples JWT

Collections Postman - Tests API

Exemples JSON de Terraform Plan

Exemples de Traçage Distribué

Convertisseur Niveaux de Gris

Generateur de cascade de color tokens

Extracteur de tokens de thème ECharts

De la palette d’image aux design tokens

Outils d interchange JSON et de traduction de formats

Outils d inspection, de diff et de transformation JSON

Generateurs de schemas JSON, donnees mock et fixtures API

Outils de formatage, de diff et de normalisation JSON