Design Tokens

Clase 14 de 17 • Curso de Patrones y Componentes en Sistemas de Diseño

María Guadalupe Mendoza Luna

student•

¿Qué es Desing Tokens? Son una metodologia, para conseguir escalar y modificar tus productos de forma ágil ¿Que son? Son los átomos visuales de un sistema de diseño

Colores
Tipografías
Iconos
Estilos
y más

Octavio Cuellar Vargas

student•

Comparto el enlace del plugin

Fernanda López

student•

Gracias!

Pedro Isaac Aguilar

student•

Básicamente, los Design Tokens son cualquiera de los elementos indivisibles con los que se diseña un componente. Son los átomos visuales de un SD: colores, tipografía, íconos, estilos, etc. Con esta metodología de trabajo, se consigue escalar y modificar los productos de forma ágil en conjunto con el equipo de desarrollo Front-end.

Marta Monterde Alonso

teacher•

Este es un buen resumen de la definición de design tokens.:point_up::skin-tone-2:

Daniela Salgado Perez

student•

Gracias esto amplía mas la definicion!

Duvan Carvajal

student•

Esta clase está buenísima. Los tokens de diseño son realmente importantes para mantener la consistencia en el look and feel de nuestros productos digitales además de ser el mejor puente de comunicación de diseño con desarrollo.

Vladimir Benitez

student•

Toolabs Design System Manager sirve para pasar nuestros estilos de Figma a CSS :O

Angie Oviedo

student•

Entonces, cada vez que se realizan cambios de diseño se exporta un nuevo CSS ?

Marta Monterde Alonso

teacher•

Hola Angie! Te explico: con este plugin se puede automatizar en el caso en que se esté utilizando un repositorio alojado en GitHub. En ese caso, cuando se actualicen los tokens, actualizamos a través del plugin y se hace commit con los cambios directamente al repositorio.

Si se está utilizando otro repositorio, se tendrá que hacer de forma manual como tu dices: cuando haya un cambio, la persona encargada del desarrollo deberá subir el nuevo archivo que descarguemos a través del plugin.

De cualquier forma, la creación de tokens es algo que se debe hacer "a lo grande" la primera vez y que los cambios que se hagan en adelante no van a ser muy frecuentes (por ejemplo: no modificamos nuestra paleta de color todas las semanas, pero a lo mejor sí de aquí a un año si hay una revisión de la marca), por lo tanto, no debería de ser un proceso muy costoso, aunque sea manual.

Espero haber resuelto tu duda! :)

Diego Perdomo

student•

¿Qué son los Desing Tokens? Son una metodologia, para conseguir escalar y modificar tus productos de forma ágil. Átomos visuales de un sistema de diseño:

Colores
Tipografías
Iconos
Estilos
Espaciado
y más

Beneficios:

Nos ayudan a acelerar el trabajo -> pasa a desarrollo más rápido.
Seremos más consistentes.
Son fáciles de mantener. .

Resumen del video que recomienda la profesora...

Felipe Bernardo González Barranco

student•

Gracias!

Diego Perdomo

student•

Había mencionado algo así la profesora... Un sistema de diseño puede entenderse como un lenguaje común que nos brinda una balanza entre el control estricto y el caos que produce la libertad. Encontré esta frase en un Sistema de Diseño que les dejo por aquí, les recomiendo mucho que lo consulten ya que tiene información muy valiosa para entrar más a detalle en algunos conceptos.

Marta Monterde Alonso

teacher•

Gracias por el aporte, Diego. :D

Diego Perdomo

student•

Por nada :D

¡Saludos!

Oswaldo Sánchez Salazar

student•

Los tokens facilitan mucho las actualizaciones para el ecommerce

Fredy Frasser

student•

https://www.toolabs.com/plugins/figma/

Bryan C. Orellana

student•

¿Los Design tokens es igual a los Foundations?

Marta Monterde Alonso

teacher•

Hola Bryan! No, los design tokens podríamos decir que son propiedades básicas de los elementos que componen nuestros diseños (colores, tipografías, sombreados, espaciado, etc). Las foundations son lo que llamamos los "Principios de diseño", que no es algo tan tangible como las propiedades, tratan sobre los estándares de nuestro Sistema, lo que refleja la forma en la que hacemos que el propósito de nuestro producto quede plasmado en los diseños, son difíciles de medir y generalmente se refieren a cualidades de nuestro sistema. Espero haber resuelto tu duda, un saludo!

Teresa Mendez

student•

Hola Marta! Me quedo una duda con este tema, en el curso de Sistemas de Diseño el profesor explicó que los foundations son las partes más básicas que podemos configurar en nuestro sistema, como por ejemplo: -Tipografía -Colores -Layout y spaces (son las formas y espacios fundamentales que utilizamos para ordenar los elementos de nuestro sistema) -Iconografía -Styles (nuestra marca puede presentarse con estilos juguetones o realistas, lo importante es definir tan claro como sea posible que intentamos transmitir) -Tono (con qué personalidad o de qué forma debemos hablar con nuestra audiencia)

Ahora con tu explicación no me queda muy claro, osea que los foundations son los que definimos como principios de diseño, como por ejemplo en el proyecto de figma del curso: "Simplemente práctico", "Divertido", "Enfocado y unificado" "Mentalidad iterativa"?

Gracias y el curso me pareció excelente!

Angel Flores

student•

¿Saben si hay una herramienta/plugin similar para adobe XD?

Marta Monterde Alonso

teacher•

Hola Angel! Justo Adobe XD lleva integrado este proceso para generar los tokens, no es necesario instalar ningún plugin. Te dejo aquí la información: https://helpx.adobe.com/xd/help/create-design-tokens-in-XD.html Espero que te ayude ;)

Omar Cabrera Acero

student•

Hola, si es más cómodo el plugin de Toolabs también se encuentra disponible para Adobe Xd https://www.toolabs.com/xdplugin/?mv=product&mv2=accc Espero sea de ayuda Saludos

Elvira Lao

student•

Buenas, En el examen final una de las preguntas dice: "¿Cuál de los siguientes no es una ventaja de los Design Tokens?" Y yo vi dos respuestas que creí que eran falsas. Elegí una al azar "Los Design Tokens no tienen ventajas" y me lo han dado por malo.

Sé que la otra que había es la que tengo que marcar, porque también era incorrecta. Pero quería reportarlo porque creo que "Los Design Tokens no tienen ventajas" es una frase que puede dar lugar a equivocación.

Gracias

Marthy Campo

student•

Les dejo un artículo sobre como usar y exportar los Design Tokens en Adobe XD: https://helpx.adobe.com/es/xd/help/create-design-tokens-in-XD.html

Marta Monterde Alonso

teacher•

Muchas gracias, Marthy! es un artículo muy interesante para personas que estén trabajando con Adobe XD

Raulyn Ladera

student•

Me Seria bueno tener una clase donde se explique ¿cómo realizan el control de versiones del DS en Figma?

Fernando Campos

student•

Hola Te puedo compartir estos cursos sobre figma

Luisa Bedoya

student•

Waw! Demasiado interesante el pluggin, me encantó!

Héctor Padilla

student•

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 esencia, los design tokens hacen que el diseño sea más modular, flexible y fácil de gestionar en proyectos de cualquier escala.

Roberto Patrón

student•

Uff gran plugin para tender puentes con el equipo de desarrollo de una manera más simple 🤩