Design tokens: qué son y cuándo usarlos
Contenido del curso
Mauricio Jose Rivero Padilla
Gabriela Urbano
Rony Romero Duque
Adrian Ruano Cárdenas
Daniela Cobos
Mariana Gómez
John Cardenas
Edwin Jesús
Carlos García García
Fritz Guzmán Santiago
Paulo Esteban Orsini
Martin Coronel
Martin Coronel
Pablo De Los Santos
Rodrigo Gonzalez
Daniela Cobos
Jorge Andrey Pedreros Camargo
Valentina Bolaño
Héctor Alonso Padilla Ramírez
Miguel Angel Ruz Torres
Luis Ángel Morales Hernández
Luis Ángel Morales Hernández
Fritz Guzmán Santiago
Daniel Felipe Merchan Fuquen
Pedro Isaac Aguilar
La definición de un Design Token un poco mas al estilo Teff: Imagina que tienes una caja de herramientas gigante llena de cosas que usas para construir tus diseños: colores, tipografías, espaciados, estilos de borde, y todo eso. Bueno, cada una de esas cosas es un Design Token.
En lugar de tener que buscar en esa caja cada vez que necesitas usar algo, puedes ponerle un nombre a cada cosa (como "rojo intenso" o "espaciado grande") y usar ese nombre en todos tus diseños. Entonces, si decides que el "rojo intenso" es demasiado brillante y quieres hacerlo un poco más suave, sólo necesitas cambiar el valor del Design Token correspondiente y automáticamente se actualizará en todos tus diseños.
Es como tener un control remoto para todo el estilo de tu diseño, ¡sólo aprietas un botón y todo cambia mágicamente!
Design Tokens: son un conjunto de valores predefinidos y reutilizables que representan los componentes visuales de un diseño, como colores, tipografía, espaciado, tamaños de elementos, etc. En lugar de definir estos valores directamente en el código, se crean tokens que se utilizan como variables y se llaman desde el código. Esto permite una mayor coherencia en el diseño, ya que los valores se pueden actualizar de manera centralizada y se aplican automáticamente en todo el diseño.
❌ “Los tokens de diseño son solo variables” es como decir “responsive design son solo media queries”
++¿Por qué usar Design Tokens?++
++Aplicación de los Design Tokens:++
++Tipos de tokens:++
Una arquitectura de tokens robusta y extensible depende de cuántos niveles de abstracción se tengan.
++Desventajas de los tokens++
++Cómo saber si los tokens son adecuados para el equipo++
++Cuando no es necesario crear tokens++
++Tips para crear tokens++
++¿Cómo funcionan los tokens en la vida real?++
Jajajajjaja
Los Devs dicen:
Bueeeno, muy bonito pero yo hago lo que quiero...
Jajajajjaja
hasta que les hacen una auditoria y les toca hacewr todo de nuevo jajaja
Los design tokens son variables que representan valores de diseño, como colores, tipografías y espaciados. Funcionan como una fuente de verdad que permite mantener coherencia en todo el sistema de diseño. En lugar de referirse a un color específico, como "rosado", se les asigna un nombre como "primary", que puede tener diferentes representaciones en distintos contextos. Esto facilita la comunicación entre diseñadores y desarrolladores y asegura uniformidad en productos digitales.
¿Cuál es la diferencia entre Design token y un UI kit?
hola 👋,
un UI Kit es un conjunto de componentes/elementos prediseñados que pueden ser replicados a lo largo de una o varias interfaces con el fin de optimizar tiempo de diseño; estos elementos pueden ser modificados dependiendo del proyecto.
Por el contrario, los design tokens son elementos individuales (no un conjunto) necesarios para construir un design system. Pueden ser colores, espaciados, etc. Cada uno de estos elementos individuales debe tener un nombre, y fue un poco lo que explicó Teff en la clase.
Te dejo esta imagen, espero que te ayude.
¿Qué es lo que significa CTA?
Call To Action o Llamado a la acción. Se usa en los botones, por ejemplo, "Follow", "Login".
Aquí aprendí a hacer un desing tokens en figma, se los comparto. Saludos.
Ese canal es muy bueno, lo sigo hace algún tiempo. Explica muy claro y directo.
Design tokens, se usan para: colores , tamanos, tipografias, opacidades.
Por que usar design tokens?
No nombrar los colores, por el nombre del color. Ejemplo: Color verde, el token se llamaba Verde. Esto no es escalable, No se debe hacer.
Escalas de nomenclatura. Tenemos 4 escalas, de naiming de tokens, esto va a depender que tanto lo necesitemos, no significa que siempre debemos usar los 4 niveles.
Pink-500: Token global, valores primitivos independientes del contexto. (No esta limitado a solo usarse en un componente por ejemeplo)
Cta-Background-color: esto es un tokens de alias, se relaciona con un contexto. Son efectivos cuando un valor con una sola intencion aparecera en varios lugares. En este caso, este token solo lo usamos para el backgrund de CTAs.
Button-cta-background-color: Este es un token especifico, basicamente estamos diciendo que el color asignado a este token, se puede usar solamente como background de botones.
. . Vamos con las Desventajas. .
Desventaja #1 Se necesita un proceso solido y convenciones de nomenclaturas solidas para que las cosas no se salgan de contro y no sea una pesadilla de mantener.
Desventaja #2 Se requiere una gran inversion inicial. Un sistema de tokens deficiente puede ser mas perjudicial que beneficioso. . .
Cuando decidir hacer los tokens?
No tienen mucho sentido usar tokens si...
Tips si vas a crear tokens:
Como funcionan los tokens en la vida real? Los protagonistas son los disenadores y los desarrolladores. Necesitamos herramientas para poder comunicarnos. . .
Si les encanta hablar de estos temas, no duden en contactarme.
Martin Coronel - Product Desginer Linkedin
Hola, en algun lado del curso se explica sobre el plugin para manejar los tokens?
Tienen alguna sugerencia para hacer el inventario de las distintas aplicaciones de una empresa? Me refiero a como se puede hacer ese inventario, con que software, como mostrar las inconsistencias, etc. Gracias!
Depende el tipo de producto, pero podrías buscar usar un ERP o generar alguna base de datos por tu cuenta
Una landing page es una página web diseñada específicamente para convertir visitantes en clientes o leads, generalmente enfocada en una sola acción (como registrarse o comprar). Por otro lado, un design system es un conjunto de estándares, principios y componentes reutilizables que guían el diseño y desarrollo de productos digitales de manera coherente y eficiente.
Mientras la landing page se centra en el objetivo inmediato de conversión, el design system establece una base para la uniformidad y escalabilidad en múltiples proyectos.
Hola, les recomiendo esta lectura acerca de el naming de los design tokens:
Design Tokens
Se usan para: colores, tamaños, tipografías, opacidades… y se nombran para que sea más fácil reconocerlos. Dan coherencia, una única fuente de verdad, genera orden, permite colaboración, consistencia y permite hacer seguimiento. Un buen tip es nombrar no por el nombre por el color si no por su uso, ej: Primary, secondary.
Tipos de tokens:
Tokens globales: Valores primitivos pero que no tienen un contexto asociado.
PINK-500
⬆️
#FFE5F1
Tokens de alias: Se relacionan con un contexto son efectivos cuando un valor con una sola intención aparece en varios lugares.
CTA-BACKGROUND-COLOR
⬆️
PINK-500
⬆️
#FFE5F1
Tokens específicos de componentes: Son la representación de cada color asociado a un componente.
BUTTON-CTA-BACKGROUND-COLOR
⬆️
CTA-BACKGROUND-COLOR
⬆️
PINK-500
⬆️
#FFE5F1
Los design tokens son valores que representan los estilos de diseño de una interfaz de usuario de manera consistente y reutilizable. Funcionan como bloques fundamentales que encapsulan atributos visuales como colores, tipografía, espacios, tamaños, bordes, sombras y más. Los design tokens permiten que estos valores se mantengan coherentes en distintos componentes y plataformas, facilitando la gestión y escalabilidad del diseño en proyectos digitales.
Ejemplos de design tokens:
1. Colores:
• primary-color: #1a73e8
• secondary-color: #fbbc05
2. Tipografía:
• font-family: "Roboto", sans-serif
• font-size-base: 16px
3. Espaciado:
• spacing-small: 8px
• spacing-large: 32px
4. Bordes y sombras:
• border-radius-small: 4px
• box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1)
Ventajas de los design tokens:
• Consistencia: Garantizan que los mismos valores de diseño se apliquen en todos los productos o plataformas.
• Escalabilidad: Facilitan la adaptación del diseño a diferentes pantallas o dispositivos (web, móvil, etc.).
• Mantenimiento: Cambiar un design token actualiza automáticamente todos los componentes relacionados.
• Colaboración: Simplifican la comunicación entre diseñadores y desarrolladores al ofrecer un lenguaje común para describir las decisiones de diseño.
En el curso "Curso Práctico de Sistemas de Diseño con Figma" se tocarán temas como:
Estos temas te ayudarán a construir un sistema de diseño robusto y funcional.
La jerarquía en design tokens proporciona:
En lugar de codificar estos valores de diseño directamente (por ejemplo, usar #FF5733 para un color o 16px para un tamaño de fuente), los equipos de diseño y desarrollo pueden definir un design token como color-primary o font-size-small. Este enfoque permite centralizar y gestionar estos valores de manera que cualquier cambio en un token (por ejemplo, cambiar el valor de color-primary) se refleje en todos los lugares donde se usa sin necesidad de hacer cambios manuales en cada instancia.
Preferiria que enseñe haciendo un Design Token en figma y de ahi al final una epxlicación rapida y ya.
Tomenlo como un feedback. Saludos.
Este video explica de gran manera los tokens:
