Convertidor de Design Tokens
Convierte design tokens entre JSON, variables CSS y formato SCSS.
Acerca de esta herramienta
Los tokens de diseño son los bloques fundamentales de los sistemas de diseño modernos: valores estandarizados para colores, espaciado, tipografía, sombras y otras propiedades visuales que los equipos reutilizan en productos. Al centralizar estas decisiones en un único formato, los equipos mantienen la coherencia visual, reducen errores y aceleran los flujos de trabajo tanto de diseño como de desarrollo. Ya sea trabajando en un único producto o gestionando múltiples plataformas, los tokens de diseño eliminan la necesidad de rastrear manualmente colores o medidas en diferentes partes de una base de código.
Este conversor facilita el cambio entre los formatos de tokens de diseño más comunes: JSON (que almacena tokens como una estructura simple de clave-valor), variables CSS (que se representan nativamente en navegadores mediante selectores :root) y variables SCSS (que requieren un paso de compilación pero se integran sin problemas con preprocesadores Sass). Simplemente pega tus tokens en cualquier formato y selecciona tu formato destino; la herramienta detecta automáticamente tu entrada y genera un resultado limpio listo para copiar y pegar en tu proyecto.
Los equipos que utilizan tokens de diseño típicamente comienzan con JSON como su formato fuente, luego generan salidas específicas para cada plataforma: CSS para aplicaciones web que necesitan soporte nativo del navegador, SCSS para proyectos construidos con Sass, y JSON para herramientas que consumen tokens de forma programática. Esta herramienta soporta conversión bidireccional, así que puedes extraer tokens del CSS o SCSS existente y convertirlos nuevamente a JSON cuando necesites auditar o refactorizar tu sistema de diseño.
Preguntas Frecuentes
Implementación de Código
# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
lines = [f" --{k}: {v};" for k, v in tokens.items()]
return ":root {\n" + "\n".join(lines) + "\n}"
# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
return "\n".join(f"${k}: {v};" for k, v in tokens.items())
tokens = {
"color-primary": "#6366f1",
"spacing-4": "16px",
"border-radius": "8px"
}
print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.