Escala
La escala de nuestro theming se determina a partir de la combinación de valores de espaciado y tipografía.
El theming de espaciado se divide en tres grandes categorías:
- Container
- Content
- Component
Haciendo una analogía en relación a nuestras librerías de componentes UI, podríamos alinear las categorías según sus usos de la siguiente manera:
- Container: espaciado utilizado principalmente en Organismos.
- Content: espaciado utilizado principalmente en Moleculas.
- Component: espaciado utilizado principalmente en Átomos.
Eso significa que el tipo de componente acota la escala de espaciado que tenemos disponible, de modo que podemos empezar a identificar y definir patrones más fácilmente.
Dentro de cada categoría, a su vez, hay diferentes subcategorías:
- Inset: espaciado interno del componente (padding).
- Stack: espaciado vertical entre componentes apilados (margin-top, margin-bottom)
- Inline: espaciado horizontal entre componentes alineados (margin-left, margin-right)
En el caso del espaciado horizontal (stack), separamos los componentes, en la medida de lo posible, utilizando las variables de espaciado en el margin-top. De este modo nos aseguramos que el componente siguiente es el que determina su relación con el anterior y no al revés (por ejemplo, un título no va a empujar de la misma manera si lo que le sigue es un párrafo o un CTA).
La tipografía es un aspecto clave del theming. No sólo es importante elegir qué familia tipográfica va a utilizar nuestro producto, sino que también hay que hacer un ejercicio de definición de las propiedades que van a tener los diferentes elementos tipográficos a nivel de escala: tamaño, interlineado y peso (font-size, line-height y font-weight).
Haciendo combinaciones específicas de estas tres propiedades y asignándoselas a usos concretos en la interfaz obtenemos algo como esto:
Title-medium
Token | Alias (ref.) | Valor |
--family-font-title-medium | font.family.01 | 'Montserrat' |
--size-font-title-medium | size.font.03 | 16px |
--size-line-height-title-medium | size.lineHeight.03 | 24px |
--weight-font-title-medium | weight.font.02 | 400 |
--style-font-title-medium | style.font.01 | normal |
De esta manera, un estilo de texto concreto es una agrupación de tokens que se pueden utilizar directamente como clase de CSS o estilo de texto en Figma.
Última actualización 1yr ago