¿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
Introducción
Lo que aprenderás sobre patrones y componentes en sistemas de diseño
Patrones en los SSDD
Diseño atómico
Principios de diseño
Introducción a los patrones en los SSDD
Patrones funcionales
Patrones perceptivos
Definición de patrones en tu sistema
Documentación de los patrones
Quiz: Patrones en los SSDD
Componentes en los SSDD
¿Para qué utilizar los componentes?
Tipos de componentes
Requisitos mínimos
Quiz: Componentes en los SSDD
UI Kit y SSDD
Consejos para el UI Kit
Documentación del UI Kit
Design Tokens
Resumen y despedida
Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño
Quiz: UI Kit y SSDD
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Design Tokens
14/17Recursos
Aportes 14
Preguntas 4
Ordenar por:
Comparto el enlace del plugin
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 😮
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.
¿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…
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.
Los tokens facilitan mucho las actualizaciones para el ecommerce
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
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 🤩
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?