Saltar al contenido principal

Diseño de archivos de token

Descripción general​

Estos archivos proporcionan los tokens de diseño de Jutro en formato JSON como alternativa a la definición de tema integrada en las plantillas de la aplicación de Jutro.

Este método es útil para los usuarios que no trabajan con una plantilla prediseñada, como quienes comienzan desde cero y no tienen un diseño predeterminado, o para los desarrolladores que requieren acceso programático directo a los valores de tokens.

Archivos de tema​

Los siguientes archivos contienen los tokens de diseño para el tema Consumidor, de Jutro.

Tema Consumidor​

  • Descargue los tokens del tema Consumidor aquí.

Cómo usar estos archivos​

Para diseñadores (en Figma)​

Para agregar la definición del tema a un nuevo archivo de Figma:

  1. Abra un nuevo archivo Figma en blanco en el que desee importar los tokens de diseño.
  2. Inicie el plugin Tokens Studio.

Sin tokens ya conectados, el plugin estará listo para importar un archivo. Para obtener una guía completa paso a paso sobre cómo finalizar el proceso de importación, consulte la página Preparación para definir tokens.

Warning: Este método es solo para archivos nuevos que no tengan un conjunto de tokens conectado. No se puede utilizar para actualizar el software o la versión de un conjunto existente de tokens en Figma.

Para desarrolladores​

Los desarrolladores utilizan estos archivos JSON como entrada para el proceso de generación de temas. La tarea principal implica ejecutar un script de línea de comandos para transformar estos tokens de diseño en variables CSS que aportan estilo a la aplicación.

Para obtener instrucciones completas paso a paso sobre este proceso de transformación, consulte la documentación Transformación a variables CSS.

Important: Cuando se utilice un archivo de tema para actualizar desde una versión anterior, se requiere una revisión manual. Tenga en cuenta que los valores de los tokens se pueden modificar y que es posible que se agreguen o eliminen tokens entre versiones. Debe comparar el nuevo archivo con el tema existente para identificar e incorporar estos cambios.