Ejercicio: tus primitivos

En este ejercicio conviertes el inventario del módulo 1 en tu colección de primitivos, aplicando lo visto en el módulo: escalas, espacio de color, scopes y visibilidad. Al final anotarás qué primitivo usa cada elemento de tu diseño. Esa lista es el punto de partida del módulo Relaciones.

En esta página

• Qué necesitas
• Paso 1 Espaciado radio y borde
• Paso 2 Tipografía
• Paso 3 Color
• Paso 4 Crea la colección en Figma
• Paso 5 Anota qué primitivo usa cada elemento
• Comprueba tus primitivos
• Lo que te llevas

Qué necesitas

• El inventario del ejercicio del módulo 1, con cada valor, su tipo, cuántas veces aparece y dónde.
• El color principal de tu marca.
• Un archivo de Figma con el perfil de color sRGB.
• Opcional: Python 3, si quieres generar las escalas de color con el script del repositorio.
• Entre 60 y 120 minutos.

Paso 1 Espaciado radio y borde

1. Elige la base del espaciado: 4 px, como DesignToken101, u 8 px si tu equipo ya trabaja así (Espaciado).
2. Lleva cada espaciado del inventario al paso más cercano. Los casi duplicados se funden; los valores entre dos pasos obligan a decidir (Encajar tu inventario en la escala).
3. Haz lo mismo con los radios y los grosores de borde. Si usas píldoras o círculos, añade un radio full (Radio y grosor de borde).

Nombra cada paso con su número proporcional: con base 4, space/400 = 16 px.

Paso 2 Tipografía

1. Anota las familias (normalmente una o dos).
2. Ordena los tamaños de menor a mayor y numéralos: font-size/01, 02… Fusiona los casi duplicados.
3. Anota los pesos que usas, con su número CSS: font-weight/400, 600…
4. Anota los interlineados como multiplicador (150 % = 1.5). Irán en código, no en Figma (Tipografía).

Paso 3 Color

1. Convierte tu color de marca a oklch y genera su escala de once pasos con el método de Escalas de color: en tools/scales.py, cambia ACCENT_HSL y ejecuta el script.
2. Genera los neutros con el tono de tu marca. Elige el tinte: 0,5 como DesignToken101, o 0 para un gris puro.
3. Si tu diseño tiene mensajes de información, éxito, aviso o error, genera sus escalas por tono (Escalas de estado). Si tu marca ya es de uno de esos tonos, reutiliza su escala, como hace DesignToken101 con emerald.
4. Nombra cada paleta por su tono, no por su rol.
5. Revisa el contraste de las tablas: qué paso admite texto blanco y cuál es el gris más claro que sirve para texto sobre blanco.

Paso 4 Crea la colección en Figma

Crea la colección Primitives con un modo y añade las variables de los pasos 1 a 3. Para cada escala, aplica el scope y la visibilidad de La colección completa, y añade el code syntax Web.

No crees variables para los interlineados ni para los espaciados negativos: anótalos aparte como tokens de código.

Paso 5 Anota qué primitivo usa cada elemento

Vuelve a la columna "Dónde aparece" de tu inventario. Para cada uso, anota el primitivo que le corresponde:

Fíjate en que varios usos distintos pueden apuntar al mismo primitivo, y que cada uso tiene un nombre que describe su función: "fondo del botón principal", "texto secundario". Esos usos serán tus tokens semánticos en el módulo Relaciones.

Comprueba tus primitivos

Tus primitivos están listos si puedes responder que sí a estas preguntas:

• ¿Cada valor del inventario tiene un paso en una escala, o has decidido conscientemente eliminarlo?
• ¿Los números de espaciado, radio y grosor son proporcionales a su valor?
• ¿Tu color de marca aparece exacto en su escala?
• ¿Ninguna paleta se llama por su rol?
• ¿La colección Primitives tiene un solo modo, scopes y visibilidad según cada escala, y code syntax en todas las variables?
• ¿Tienes una lista de usos con el primitivo que le corresponde a cada uno?

Lo que te llevas

• Tienes tus escalas primitivas creadas en Figma, con scope, visibilidad y code syntax.
• Tu color de marca está exacto en su escala.
• Tienes la lista de usos de tu diseño con el primitivo de cada uno: el punto de partida de los semánticos.

Fuentes

Las de las lecciones del módulo. En especial:

• Figma: Create and manage variables and collections
• Figma: Manage color profiles in design files
• Tailwind CSS: Colors