Skip to content
Gallery
plural
Plural DS
Plural DS
Share
Explore
Theming

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)
⁠
image.png
⁠
⁠
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
1
–family-font-title-medium
font.family.01
‘Outfit’
2
–size-font-title-medium
size.font.03
16px
3
–size-line-height-title-medium
size.lineHeight.03
24px
4
–weight-font-title-medium
weight.font.02
400
5
–style-font-title-medium
style.font.01
normal
There are no rows in this table
⁠
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.

Espaciado
Tipografía
Title-medium
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.