¿Qué son los diseños tokens?
Diseño tokens son las decisiones atómicas que definen un sistema visual, como colores, espaciado, tipografía, rayos de borde y mucho más. Almacenados como JSON estructurado, funcionan como una única fuente de verdad entre herramientas de diseño, como Figma, y el código. Este conversor transforma el JSON de los tokens en variables CSS, variables SCSS, configuración de Tailwind CSS o exports JavaScript listos para su uso.
Cómo convertir el diseño tokens
- 1Cole el JSON de sus diseños tokens. Los tokens deben tener una propiedad value, en una estructura aninhada cuyos nosotros hoja contienen una llave llamada value con el valor del token.
- 2Seleccione el formato de salida: CSS, SCSS, Tailwind o JS.
- 3Para la salida CSS, personalice el prefijo de las variables; el patrón es --.
- 4Use Copiar para copiar la salida generada a su proyecto.
Casos de uso comunes
Handoff de diseño para código
Convierta exports de tokens de Figma directamente en variables CSS para usar en sus hojas de estilo.
Preferencias de tema Tailwind
Genera la configuración del tema de Tailwind CSS a partir de los tokens de su diseño system.
Tokens multiplataforma
Exporte tokens en diferentes formatos para la web, con CSS o SCSS, y para soluciones de estilización basadas en JavaScript.
Preguntas frecuentes
¿Qué formato JSON se espera?
La herramienta espera un objeto JSONaninhado cuyos hojas tengan una propiedad value. Este formato es compatible con Figma Tokens, Style Dictionary y la mayoría de los formatos de diseño tokens.
¿Hay soporte a referencias o aliases?
Actualmente, la herramienta trabaja con valores ya resueltos. Las referencias de tokens entre claves, como color.primary 500 involucrada por claves, no se resuelven automáticamente.
¿Puedo usar la herramienta con Tokens Studio for Figma?
Sí. Exportar sus tokens como JSON en Tokens Studio y recogerlos aquí. La estructura aninhada con propiedades value es totalmente compatible.
¿Los diseños tokens se envían a algún servidor?
No. La conversión de tokens ocurre localmente en el navegador.