# 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.

> Page canonique: https://elysiatools.com/fr/tools/figma-tokens-export

- **Catégorie:** Design

- **Mots-clés:** figma, design tokens, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, variables css, thème, design system

## Présentation

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()`.

## Entrées

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

## Quand l'utiliser

- Lors de l'intégration d'un design system Figma dans un projet web utilisant Tailwind CSS ou shadcn/ui.
- Pour convertir des variables exportées de l'API REST de Figma en variables SCSS ou CSS réutilisables.
- Pour standardiser des jetons de design au format W3C DTCG pour Style Dictionary.

## Fonctionnement

- Collez votre JSON de variables Figma ou Tokens Studio dans le champ de saisie.
- Sélectionnez le format cible souhaité (Tailwind, shadcn, Style Dictionary ou SCSS).
- Choisissez le format de rendu des couleurs (Hex, RGB, HSL ou HSL CSS).
- Copiez le code généré prêt à être intégré dans vos fichiers de configuration ou feuilles de style.

## Cas d'usage

- Génération automatique de la configuration theme.extend pour un projet Tailwind CSS à partir de tokens Figma.
- Création de variables CSS au format HSL pour le thème sombre et clair de shadcn/ui.
- Conversion de jetons de design bruts en variables SCSS pour des projets web classiques.

## Questions fréquentes

### 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.

## Outils associés

- [Convertisseur Niveaux de Gris](https://elysiatools.com/fr/tools/color-grayscale-converter): Convertir les couleurs en niveaux de gris avec plusieurs méthodes de conversion et contrôle d'intensité
- [Generateur de cascade de color tokens](https://elysiatools.com/fr/tools/color-token-cascade-generator): Transforme un hex principal en systeme complet de tokens, variables CSS et JSON Style Dictionary
- [Extracteur de tokens de thème ECharts](https://elysiatools.com/fr/tools/echarts-theme-token-extractor): Extrait des design tokens — couleurs, nombres, tailles de police et chaînes — d'un JSON de thème ECharts et les exporte directement dans votre design system. Collez un objet thème (celui enregistré et passé à echarts.init(dom, themeName)) et l'outil parcourt chaque feuille, étiquetant chaque couleur (avec normalisation optionnelle nommé/rgb → hex), nombre d'espacement, taille de police et chaîne, puis émet des variables CSS propres, un thème.extend Tailwind, un tokens.json Style Dictionary ou des variables SCSS. Pont entre un thème de visualisation ECharts et les tokens de design Figma/CSS/Tailwind sans recopier chaque valeur à la main.
- [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes
- [Planificateur de budget de latence API](https://elysiatools.com/fr/tools/api-latency-budget-planner): Planifiez et visualisez un budget de latence API. Saisissez une cible P99 (ex. ≤ 300ms) et l’allocation par étape (DNS, TCP, TLS, TTFB, Processing, Network) pour voir un waterfall en direct, l’utilisation du budget et des alertes de dépassement. Collez optionnellement une trace OpenTelemetry ou Datadog pour déduire une allocation mesurée.
- [Planificateur de migration CSV vers base de donnees](https://elysiatools.com/fr/tools/csv-to-database-migration-planner): Infere un schema relationnel a partir dun CSV et genere CREATE TABLE et ALTER pour PostgreSQL, MySQL, SQLite ou SQL Server
- [Studio de requetes et transformations JSONata](https://elysiatools.com/fr/tools/jsonata-query-transform-studio): Previsualise des requetes et transformations de style JSONata, compare les resultats et exporte en JSON, CSV, YAML ou Markdown.
- [Générateur et Analyseur JWK](https://elysiatools.com/fr/tools/jwk-generator): Génère des JSON Web Keys (JWK) pour RSA, EC (P-256/P-384/P-521/secp256k1) et OKP (Ed25519/Ed448/X25519/X448), ou analyse un JWK existant pour inspecter ses paramètres, empreinte et métadonnées

## Exemples

- [Exemples JWT](https://elysiatools.com/fr/samples/jwt-samples): Exemples complets de JWT de la structure de base des tokens aux implémentations de sécurité avancées
- [Collections Postman - Tests API](https://elysiatools.com/fr/samples/postman-collections): Exemples complets de collections Postman incluant tests API, scripts d'automatisation, variables d'environnement, serveurs mock et patterns de test avancés pour REST APIs
- [Exemples JSON de Terraform Plan](https://elysiatools.com/fr/samples/terraform-plan-json-samples): Fichiers Terraform plan JSON pour visualiser les dependances et revoir les changements, proches de terraform show -json
- [Exemples de Traçage Distribué](https://elysiatools.com/fr/samples/distributed-tracing-samples): Exemples complets de traçage distribué utilisant Jaeger, OpenTelemetry et outils d'observabilité modernes