Links

Escala

La escala de nuestro theming se determina a partir de la combinación de valores de espaciado y tipografía.

Espaciado

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).

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:
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 2yr ago