Contenido del curso
María Guadalupe Mendoza Luna
Octavio Cuellar Vargas
Fernanda López
Pedro Isaac Aguilar
Marta Monterde Alonso
Profesor
Daniela Salgado Perez
Duvan Carvajal
Vladimir Benitez
Angie Oviedo
Marta Monterde Alonso
Profesor
Diego Perdomo
Felipe Bernardo González Barranco
Diego Perdomo
Marta Monterde Alonso
ProfesorDiego Perdomo
Oswaldo Sánchez Salazar
Fredy Frasser
Bryan C. Orellana
Marta Monterde Alonso
Profesor
Teresa Mendez
Angel Flores
Marta Monterde Alonso
Profesor
Omar Cabrera Acero
Elvira Lao
Marthy Campo
Marta Monterde Alonso
Profesor
Raulyn Ladera
Fernando Campos
Luisa Bedoya
Héctor Alonso Padilla Ramírez
Roberto Patrón
¿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
Comparto el enlace del plugin
Gracias!
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.
Este es un buen resumen de la definición de design tokens.:point_up::skin-tone-2:
Gracias esto amplía mas la definicion!
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.
Toolabs Design System Manager sirve para pasar nuestros estilos de Figma a CSS :O
Entonces, cada vez que se realizan cambios de diseño se exporta un nuevo CSS ?
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! :)
¿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:
Beneficios:
Resumen del video que recomienda la profesora...
Gracias!
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.
Gracias por el aporte, Diego. :D
Por nada :D
¡Saludos!
Los tokens facilitan mucho las actualizaciones para el ecommerce
¿Los Design tokens es igual a los Foundations?
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!
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!
¿Saben si hay una herramienta/plugin similar para adobe XD?
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: Espero que te ayude ;)
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
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
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
Muchas gracias, Marthy! es un artículo muy interesante para personas que estén trabajando con Adobe XD
Me Seria bueno tener una clase donde se explique ¿cómo realizan el control de versiones del DS en Figma?
Hola Te puedo compartir estos cursos sobre figma
Waw! Demasiado interesante el pluggin, me encantó!
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.
Uff gran plugin para tender puentes con el equipo de desarrollo de una manera más simple 🤩
