Cursos Empresas Blog Live Conf Eventos Precios

0:005:45

Design Tokens

Curso de Patrones y Componentes en Sistemas de Diseño

Clase 14 de 16

Clase 14 / 16

Héctor Alonso Padilla Ramírez

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.

Comentarios (18)18 comentarios

María Guadalupe Mendoza Luna

Hace 5 años

Octavio Cuellar Vargas

Fernanda López

Hace 3 años

Pedro Isaac Aguilar

Marta Monterde Alonso

Profesor

Daniela Salgado Perez

Duvan Carvajal

Vladimir Benitez

Angie Oviedo

Diego Perdomo

Felipe Bernardo González Barranco

Oswaldo Sánchez Salazar

Fredy Frasser

Hace 4 años

Bryan C. Orellana

Teresa Mendez

Angel Flores

Omar Cabrera Acero

Elvira Lao

Marthy Campo

Raulyn Ladera

Fernando Campos

Luisa Bedoya

Roberto Patrón

Design Tokens

Progreso del curso

Introducción

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD