Export et code
Vos tokens n’ont pas à rester dans Figma. Exportez-les depuis l’application web dans le format qu’utilise réellement votre code — sans plugin — ou laissez vos outils de build et d’IA récupérer les derniers tokens sous forme de code.
Exporter depuis le web
Dans la liste des projets, ouvrez le menu ⋯ d’une carte de projet et choisissez Exporter — ou, dans un projet, faites un clic droit sur une collection dans la barre latérale gauche (ou sur une ligne de la grille) et choisissez Exporter cette collection. Une boîte de dialogue s’ouvre avec :
- Portée — les collections à exporter : cochez Toutes les collections, ou choisissez-les une par une. Si vous l’ouvrez depuis une collection, celle-ci est déjà cochée.
- Format — l’un des six formats (ci-dessous).
- Résoudre les références en valeurs — remplace les alias comme
{Primitive/blue/500}par leur valeur finale. Les formats de code de plateforme résolvent toujours : pour eux, la case est cochée et verrouillée.
| Format | Sortie |
|---|---|
DTCG (.tokens.json) | Format du W3C Design Tokens Community Group |
| JSON | Variables brutes, une entrée par token |
| CSV | Un tableur — une ligne par variable, une colonne par mode |
| CSS | Propriétés personnalisées — mode par défaut dans :root, autres modes dans [data-theme="…"] |
| SwiftUI | Un type par collection, une instance statique par mode |
| Jetpack Compose | Kotlin — une classe par collection, une valeur par mode |
Du code de plateforme prêt à coller
Choisissez CSS, SwiftUI ou Jetpack Compose et vous obtenez du code à intégrer directement dans votre application. La conversion s’effectue sur le serveur et est déterministe — les mêmes tokens produisent toujours les mêmes octets : les diffs restent propres et la mise en cache fonctionne bien. Une collection avec des modes light et dark donne ceci :
/* CSS custom properties */
:root {
--colors-button-background: #18181b;
--colors-radius-md: 8px;
}
[data-theme="dark"] {
--colors-button-background: #fafafa;
}// SwiftUI — one instance per mode
struct ColorsTokens {
let buttonBackground: Color
let radiusMd: CGFloat
static let light = ColorsTokens(buttonBackground: Color(vjHex: 0x18181B), radiusMd: 8)
static let dark = ColorsTokens(buttonBackground: Color(vjHex: 0xFAFAFA), radiusMd: 8)
}// Jetpack Compose (Kotlin)
class ColorsTokens(val buttonBackground: Color, val radiusMd: Dp)
val ColorsTokensLight = ColorsTokens(buttonBackground = Color(0xFF18181B), radiusMd = 8.dp)
val ColorsTokensDark = ColorsTokens(buttonBackground = Color(0xFFFAFAFA), radiusMd = 8.dp)Les références sont toujours résolues en valeurs finales ; si l’une ne peut pas l’être, elle est laissée en commentaire, jamais remplacée par une valeur inventée.
Réimporter des tokens
Le menu ⋯ d’une carte de projet propose aussi Importer. Déposez un fichier JSON ou DTCG et vous obtenez un aperçu — nombre de collections, de variables et de modes, plus les avertissements — avant toute création. Confirmez : il est ajouté comme nouvelle collection (les couleurs sont interprétées avec souplesse : hexadécimal à 3 ou 6 chiffres, rgb() et hsl() fonctionnent). La modification est consignée dans l’historique comme une importation.
Les valeurs qu’il ne peut pas représenter — tokens composés comme la typographie ou l’ombre, dimensions dans une autre unité que px, couleurs illisibles ou valeurs qui ne correspondent pas à leur type — sont ignorées plutôt que devinées, et l’aperçu indique combien et lesquelles. Réimporter le même fichier ajoute une autre nouvelle collection.
Récupérer via l’API et MCP
Pour les pipelines CI et les outils de codage IA, n’exportez pas à la main — récupérez. Les mêmes formats de plateforme sont disponibles via l’API REST avec ?format=css|swift|compose, et le serveur @variablejar/mcp expose un outil get_tokens pour que les agents de votre IDE récupèrent les derniers tokens sous forme de code. Un seul token d’API de projet sert aux deux.