Export Style Dictionary · PRO

Exportez n'importe quel site en tokens Style Dictionary

Design Snap extrait les design tokens d'un site web et les exporte au format standard Style Dictionary v3 — paires { value, type } pour color, dimension, fontFamily, fontWeight, boxShadow et typography — prêtes à intégrer dans une config de build Style Dictionary pour générer du CSS, de l'iOS, de l'Android ou toute autre sortie de plateforme.

Ajouter à Chrome — gratuit Voir les plans PRO

Plan gratuit · Sans compte · Analyse 100 % locale

Comment exporter un site en tokens Style Dictionary

Transformer un site web en fichier de tokens Style Dictionary tient en trois étapes avec Design Snap : extraire les design tokens de la page, basculer l'export vers le format standard, puis intégrer le résultat à votre build Style Dictionary existant.

  1. Extraire

    Ouvrez le site, cliquez sur l'icône Design Snap et appuyez sur Extract. Couleurs, typographie, radius et ombres sont classés par usage réel en une seconde environ.

  2. Basculer vers le format standard

    Dans le panneau d'export, choisissez Style Dictionary (PRO) plutôt que le JSON simplifié gratuit pour obtenir le schéma officiel { value, type }.

  3. Builder avec Style Dictionary

    Placez le fichier dans une config Style Dictionary comme source, puis lancez un build pour générer des variables CSS, du SCSS, du Swift iOS, du XML Android ou du Compose.

À quoi ressemble l'export Style Dictionary

Chaque token respecte le schéma officiel Style Dictionary v3 : une value et un type standard. La typographie est composée en best-effort : les titres classés par taille décroissante deviennent heading-1, heading-2… et le plus petit bloc de texte de la page devient body.

tokens.json Style Dictionary v3PRO
{
  "color": {
    "color-01": { "value": "#6366f1", "type": "color" },
    "color-02": { "value": "#ffffff", "type": "color" }
  },
  "spacing": {
    "spacing-01": { "value": "4px", "type": "dimension" },
    "spacing-02": { "value": "8px", "type": "dimension" }
  },
  "borderRadius": {
    "radius-01": { "value": "6px", "type": "dimension" }
  },
  "fontFamily": {
    "family-1": { "value": "Inter", "type": "fontFamily" }
  },
  "fontWeight": {
    "weight-1": { "value": "600", "type": "fontWeight" }
  },
  "boxShadow": {
    "shadow-1": { "value": "0 1px 3px rgba(0,0,0,0.1)", "type": "boxShadow" }
  },
  "typography": {
    "heading-1": {
      "value": { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": "600" },
      "type": "typography"
    },
    "body": {
      "value": { "fontFamily": "Inter", "fontSize": "14px", "fontWeight": "600" },
      "type": "typography"
    }
  }
}

Les valeurs ci-dessus viennent d'une vraie extraction. Design Snap remplit le schéma avec les tokens du site que vous analysez.

Pourquoi le format standard change tout

Un JSON simplifié suffit pour jeter un œil à une palette. Un vrai pipeline de design tokens a besoin d'un schéma que les outils comprennent déjà — c'est ce qu'apporte l'export Style Dictionary standard.

  • S'intègre directement dans une config Style Dictionary existante — aucune restructuration des clés ou valeurs
  • Six types standards couverts : color, dimension, fontFamily, fontWeight, boxShadow et typography composite
  • Tokens typographiques composés automatiquement : titres classés par taille décroissante, le plus petit bloc devient body
  • Un seul fichier JSON, de nombreuses plateformes : Style Dictionary le transforme en CSS, SCSS, iOS, Android, Compose et plus
  • Analyse 100 % locale — les pages que vous analysez ne sont jamais envoyées nulle part

Aller plus loin avec Style Dictionary

Style Dictionary est un système de build open-source pour les design tokens, créé à l'origine chez Amazon et aujourd'hui maintenu par la communauté. Si vous découvrez l'outil, voici les meilleures ressources pour commencer :

Export Style Dictionary — FAQ

Le plan gratuit exporte un JSON simplifié avec des types maison propres à Design Snap (fontSizes, fontFamilies…), pratique pour une première inspection. L'export Style Dictionary PRO respecte le schéma officiel Style Dictionary v3 — chaque token est une paire { value, type } utilisant les types standards (color, dimension, fontFamily, fontWeight, boxShadow, typography) — et s'intègre directement dans une config de build Style Dictionary, sans retravail.

Les couleurs classées par usage réel, les espacements et rayons de bordure en tokens dimension, les familles et poids de police, les ombres, et une composition typographique best-effort : les titres sont classés par taille décroissante (heading-1, heading-2…) et le plus petit bloc de texte de la page devient body.

L'export Style Dictionary v3 standard est une fonctionnalité PRO (3,99 €/mois, 19,99 €/an ou 49 € à vie), aux côtés des exports shadcn/ui et Tailwind v4, de l'extraction du vrai dark mode, de la Design DNA card et des snapshots illimités. Le plan gratuit inclut déjà un export Style Dictionary JSON simplifié. Voir les tarifs.

Oui. La sortie respecte le schéma de tokens { value, type } attendu par Style Dictionary : il suffit de placer le fichier dans un tableau source de votre config et de lancer un build pour générer des variables CSS, du SCSS, du Swift iOS, du XML Android, du Compose ou toute autre plateforme prise en charge par Style Dictionary.

Générateur de thème Tailwind

Obtenez un tailwind.config.js ou un bloc @theme Tailwind v4 prêt à coller depuis n'importe quel site.

Générateur de thème shadcn/ui

Mappez la palette d'un site sur les rôles de couleur sémantiques shadcn/ui.

Extraire les variables CSS

Listez chaque propriété CSS personnalisée déclarée sur :root de n'importe quel site.

vs DevTools & CSS Peeper

Comment Design Snap se compare à Chrome DevTools et CSS Peeper.