# Exportador de Tokens de Figma

Pega un JSON de variables de Figma / Tokens Studio y exporta a Tailwind, variables CSS shadcn, Style Dictionary o SCSS. Conserva tokens de color, espaciado y fuente con inferencia de tipos.

> Página canónica: https://elysiatools.com/es/tools/figma-tokens-export

- **Categoría:** Design

- **Palabras clave:** figma, design tokens, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, variables css, tema, sistema de diseño

## Descripción general

Pega un **JSON de variables de Figma / Tokens Studio** y expórtalo a uno de cuatro objetivos populares:

- **Tailwind** `theme.extend` — mapea automáticamente `color/*` → `colors`, `spacing/*` → `spacing`, etc.
- **Variables CSS shadcn/ui** — convención HSL separada por espacios (`--background: 0 0% 100%`).
- **Style Dictionary / W3C DTCG** — reemite la forma canónica `{ $value, $type }`.
- **Variables SCSS** — estilo `$color-brand-primary: #2563eb;`.

**Formas de entrada aceptadas** — Tokens Studio/W3C (`$value/$type`), legacy (`value/type`), valores anidados planos, y objetos rgba de la API REST de Figma.

**Inferencia de tipos** — cuando un token no tiene `$type` explícito, se infiere: `#hex`/`rgb()`/colores nombrados → color; valores con `px/rem/em/%` → dimension; números puros → number; resto → string. La opción **Color format** re-renderiza cada color como `hex`, `rgb()`, `hsl` o `hsl()`.

## Entradas

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

## Cuándo usarlo

- Cuando necesitas exportar variables de Figma o Tokens Studio directamente al archivo de configuración de Tailwind CSS.
- Al configurar un proyecto con shadcn/ui y requerir variables CSS en formato HSL separado por espacios.
- Cuando quieres unificar tus tokens de diseño en un formato estándar como Style Dictionary (W3C DTCG) o variables SCSS para hojas de estilo tradicionales.

## Cómo funciona

- Pega el JSON de tus variables de Figma o Tokens Studio en el campo de entrada, compatible con formatos $value/$type, legacy o valores anidados planos.
- Selecciona el formato de destino deseado: Tailwind, variables CSS de shadcn/ui, Style Dictionary o SCSS.
- Elige el formato de salida para los colores (Hex, RGB, HSL sin comas o HSL CSS) para adaptar los valores cromáticos a tu entorno de desarrollo.
- Copia el código generado automáticamente que mapea y estructura los tokens de diseño según la especificación seleccionada.

## Casos de uso

- Sincronización rápida de la paleta de colores de Figma con la configuración theme.extend de Tailwind CSS.
- Generación de variables CSS en formato HSL para la configuración de temas oscuros y claros en componentes de shadcn/ui.
- Conversión de tokens de diseño heredados a la especificación estándar W3C DTCG para su uso con Style Dictionary.

## Preguntas frecuentes

### ¿Qué formatos de entrada de JSON soporta esta herramienta?

Soporta formatos de Tokens Studio/W3C ($value y $type), formatos antiguos (value y type), valores anidados planos y objetos RGBA de la API REST de Figma.

### ¿Cómo funciona la inferencia de tipos automática?

Si un token no tiene tipo explícito, se detecta por su valor: colores hexadecimales o RGB se marcan como color, valores con unidades (px, rem, %) como dimensión, y números puros como número.

### ¿Qué es el formato HSL separado por espacios?

Es la convención utilizada por shadcn/ui para variables CSS, lo que permite aplicar opacidad directamente en Tailwind usando la sintaxis hsl(var(--variable) / opacidad).

### ¿Puedo exportar tokens de espaciado y fuentes a Tailwind?

Sí, la exportación a Tailwind mapea automáticamente las rutas de espaciado a spacing y las fuentes a fontFamily o fontSize dentro de theme.extend.

### ¿Es necesario registrarse o conectar la API de Figma para usar el exportador?

No, la herramienta funciona de forma local pegando directamente el archivo JSON exportado de tus variables o tokens.

## Herramientas relacionadas

- [Convertidor de Escala de Grises](https://elysiatools.com/es/tools/color-grayscale-converter): Convertir colores a escala de grises con múltiples métodos de conversión y control de intensidad
- [Generador de cascada de color tokens](https://elysiatools.com/es/tools/color-token-cascade-generator): Convierte un hex principal en escalas de color, tokens semanticos, variables CSS y JSON de Style Dictionary
- [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano.
- [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos
- [Planificador de presupuesto de latencia de API](https://elysiatools.com/es/tools/api-latency-budget-planner): Planifica y visualiza un presupuesto de latencia de API. Introduce un objetivo P99 (p. ej. ≤ 300ms) y la asignación por etapa (DNS, TCP, TLS, TTFB, Processing, Network) para ver un waterfall en vivo, la utilización del presupuesto y alertas de exceso. Opcionalmente pega un trace OpenTelemetry o Datadog para deducir una asignación medida.
- [Planificador de migracion CSV a base de datos](https://elysiatools.com/es/tools/csv-to-database-migration-planner): Infiere un schema relacional desde CSV y genera planes CREATE TABLE y ALTER para PostgreSQL, MySQL, SQLite o SQL Server
- [Estudio de consultas y transformaciones JSONata](https://elysiatools.com/es/tools/jsonata-query-transform-studio): Previsualiza consultas y transformaciones estilo JSONata, compara resultados y exporta en JSON, CSV, YAML o Markdown.
- [Generador y Analizador de JWK](https://elysiatools.com/es/tools/jwk-generator): Genera JSON Web Keys (JWK) para RSA, EC (P-256/P-384/P-521/secp256k1) y OKP (Ed25519/Ed448/X25519/X448), o analiza un JWK existente para inspeccionar parámetros, huella y metadatos

## Ejemplos

- [Muestras JWT](https://elysiatools.com/es/samples/jwt-samples): Ejemplos completos de JWT desde la estructura básica de tokens hasta implementaciones de seguridad avanzadas
- [Colecciones Postman - Pruebas API](https://elysiatools.com/es/samples/postman-collections): Ejemplos completos de colecciones Postman incluyendo pruebas de API, scripts de automatización, variables de entorno, servidores mock y patrones avanzados de prueba para REST APIs
- [Muestras JSON de Terraform Plan](https://elysiatools.com/es/samples/terraform-plan-json-samples): Archivos Terraform plan JSON para visualizacion de dependencias y revision de cambios, similares a terraform show -json
- [Muestras de Trazado Distribuido](https://elysiatools.com/es/samples/distributed-tracing-samples): Ejemplos completos de trazado distribuido usando Jaeger, OpenTelemetry y herramientas de observabilidad modernas