Los sistemas de diseño son hoy una realidad en el mundo del desarrollo web. Son una herramienta indispensable para gestionar de una manera estructurada y coherente la interfaz de usuario de cualquier sitio web. Garantizan la consistencia de los aspectos visuales y funcionales del diseño.
Un elemento primordial para todo esto son los Design Tokens, las propiedades visuales de ese sistema de diseño, definidas de manera abstracta. Estos tokens serán reutilizadas en cada uno de los componentes.
No solo son útiles dentro de un proyecto, también son fáciles de trasladar a uno nuevo. Unos pequeños cambios de color, tipografía, etc… y la web luce de una manera diferente. Ya es un nuevo diseño.
Algunos ejemplos comunes de estilos visuales que se pueden definir como design tokens:
- Colores: Se definen colores por su rol dentro del diseño (primary, secondary...) o por el elemento al que afecta (text, background...)
- Tipografía: familia, tamaño, grosor… cualquier característica tipográfica puede definirse como token.
- Dimensiones: De manera abstracta se pueden definir tamaños (small, medium, large...) que luego responderán a diferentes medidas en los componentes.
- Espaciado: Tamaños predefinidas para márgenes y padding.
- Sombreado y Bordes: Propuedades de la sombras, grosor y estilos para los bordes, radio de las esquinas. Todo aquello que define las cajas del diseño.
- Animaciones: Duración, retraso y tipo de animación, para luego aplicarla a diferentes elementos del diseño.
- Estados de Componentes: Estados como hover o active, aplicables a los distintos componentes.
Desde hace unos meses, Figma ha introducido los Design Tokens y pueden definirse y utilizarse dentro de los diseños de esta aplicación, pero de eso hablaremos en otros posts.
