Exportación y código
Tus tokens no tienen por qué vivir solo en Figma. Expórtalos desde la aplicación web en el formato que usa realmente tu código (sin plugin), o deja que tus herramientas de compilación e IA obtengan los tokens más recientes como código.
Exportar desde la web
En la lista de proyectos, abre el menú ⋯ de una tarjeta de proyecto y elige Exportar; o bien, dentro de un proyecto, haz clic con el botón derecho en una colección de la barra lateral izquierda (o en una fila de la cuadrícula) y elige Exportar esta colección. Se abre un cuadro de diálogo con:
- Alcance: las colecciones que se exportan; marca Todas las colecciones o elige colecciones concretas. Si lo abres desde una colección, esa colección ya viene marcada.
- Formato: uno de los seis formatos (abajo).
- Resolver referencias a valores: convierte alias como
{Primitive/blue/500}en su valor final. Los formatos de código de plataforma siempre resuelven, así que para ellos la casilla está activada y bloqueada.
| Formato | Resultado |
|---|---|
DTCG (.tokens.json) | Formato del W3C Design Tokens Community Group |
| JSON | Variables en bruto, una entrada por token |
| CSV | Una hoja de cálculo: una fila por variable, una columna por modo |
| CSS | Propiedades personalizadas: el modo predeterminado en :root, los demás en [data-theme="…"] |
| SwiftUI | Un tipo por colección, una instancia estática por modo |
| Jetpack Compose | Kotlin: una clase por colección, un valor por modo |
Código de plataforma listo para pegar
Elige CSS, SwiftUI o Jetpack Compose y obtendrás código que puedes llevar directamente a tu aplicación. La conversión se hace en el servidor y es determinista: los mismos tokens producen siempre los mismos bytes, así que los diffs quedan limpios y se cachea bien. Una colección con modos light y dark queda así:
/* 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)Las referencias siempre se resuelven a valores finales; si alguna no se puede resolver, se deja como comentario, nunca como un valor inventado.
Volver a importar tokens
El menú ⋯ de una tarjeta de proyecto también tiene Importar. Suelta un archivo JSON o DTCG y verás una vista previa (número de colecciones, variables y modos, además de las advertencias) antes de crear nada. Al confirmar, se añade como una colección nueva (los colores se interpretan con flexibilidad: hexadecimal de 3 o 6 dígitos, rgb() y hsl() funcionan). El cambio queda en el historial como una importación.
Los valores que no puede representar —tokens compuestos como tipografía o sombra, dimensiones en unidades distintas de px, colores que no puede leer o valores que no coinciden con su tipo— se omiten en lugar de adivinarse, y la vista previa muestra cuántos y cuáles. Si importas el mismo archivo otra vez, se añade otra colección nueva.
Obtener con la API y MCP
Para pipelines de CI y herramientas de programación con IA, no exportes a mano: obtén los tokens. Los mismos formatos de plataforma están disponibles en la API REST con ?format=css|swift|compose, y el servidor @variablejar/mcp ofrece una herramienta get_tokens para que los agentes de tu IDE obtengan los tokens más recientes como código. Un solo token de API del proyecto sirve para ambos.