Espaciado
El theming de espaciado se divide en tres grandes categorías:
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).
Tipografía
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:
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.