Tokens de diseño

Los tokens de diseño son los átomos del diseño visual. Definen, entre otras cosas, color, tipografía, espacios, bordes, esquinas y sombras de un diseño, en forma de entidad con una nomenclatura específica. Estas entidades son absorbidas a través del API de Figma por el equipo de desarrollo y convertidas en estilos utilizables por todas las tecnologías, como CSS, SASS, IOs, Android, entre otras.

Color

Tipografía

Elevaciones

Espaciados

Puntos de recorte

Radio y Borde

Iconografía

Animación

Beneficios

Aumenta la coherencia entre el diseño y el desarrollo.

Acelera los cambios y permite actualizar el desarrollo a medida que evoluciona el diseño.

Permite crear temas multimarca o cambiar en caliente entre un tema claro y uno oscuro.

Ordena y normaliza todos los estilos del sistema de diseño.

Anatomía

El nombre del token siempre comenzará con el símbolo “$” seguido de la “categoría”. Posteriormente aparecerán los elementos necesarios en el orden mostrado en la “Estructura” y siempre separados por “-”:

Este sistema modular permite escalabilidad y claridad en la definición de los tokens, facilitando su uso consistente en toda la interfaz.

Envía un correo electrónico al equipo del Sistema de Diseño a desarrollo.dintel@correo.gob.es , utiliza nuestra aplicación Teams DINTEL.