Creación de tokens personalizados

En ciertos casos, como la creación de un componente nuevo dentro de una aplicación, será necesario que un diseñador cree un token personalizado.

Al crear tokens personalizados, puede crear un conjunto nuevo de tokens o agregar un token personalizado a un conjunto existente.

Creación de un conjunto nuevo de tokens

Para crear un conjunto nuevo, le recomendamos que duplique un conjunto existente dentro de un tema y, a continuación, agregue la palabra “personalizado” a su nombre. Aquí podrá ver cómo se hace esto:

Adición de un token a un conjunto existente

Los siguientes pasos y el video muestran cómo agregar un token personalizado a un conjunto de componentes existente.

1. Ir al conjunto de tokens: En el plugin Tokens Studio, vaya al Nivel componente y diríjase hasta la sección donde desea agregar el token (por ejemplo, color o sizing).
2. Agregar un token nuevo: Haga clic en el ícono más (+) junto al nombre de la sección para abrir el cuadro de diálogo “Nuevo token”.
3. Asignar un nombre al token: Un nombre de token consta de varios modificadores.
   • Modificador del sistema: Utilice un modificador de sistema único para su proyecto, no el predeterminado jds. Por ejemplo, si para Succeed Insurance.
   • Modificadores restantes: Ingrese el resto de la ruta del token, como button.color.background.
   • El nombre completo del token sería, por ejemplo, si.button.color.background.
4. Asignar un valor: En el campo Color, escriba el valor deseado. Puede ser un valor sin procesar, como un código hexadecimal o un alias que haga referencia a un token semántico existente, como {jds.color.background.brand}.
5. Agregar una descripción: En el campo Descripción, explique brevemente el propósito del token para ayudar a otros diseñadores. Por ejemplo: “Color de relleno de Succeed Insurance para el componente botón”.
6. Crear el token: Haga clic en Crear para guardar el nuevo token.
7. Aplicar el token: Seleccione la capa de componente en su archivo Figma; luego, haga clic en el token recién creado en el plugin para aplicarlo.