Ejercicio: inventario de valores

Antes de crear tokens hay que saber qué valores usas de verdad. En este ejercicio harás inventario de un diseño propio y aplicarás lo visto en el módulo: tipos simples, compuestos y fuente de verdad. El resultado es la lista de partida para el módulo Primitivos.

En esta página

• Qué necesitas
• Paso 1 Elige el diseño
• Paso 2 Anota cada valor distinto
• Paso 3 Clasifica por tipo
• Paso 4 Busca casi duplicados
• Paso 5 Agrupa los compuestos
• Paso 6 Decide dónde viviría cada valor
• Comprueba tu inventario
• En Figma
• Lo que te llevas

Qué necesitas

• Un diseño propio en Figma, de tres a cinco pantallas. Mejor uno real que uno hecho para el ejercicio: así el inventario muestra cómo trabajas de verdad.
• Una tabla donde anotar: un documento, una hoja de cálculo o un marco de Figma con texto.
• Entre 45 y 90 minutos, según el tamaño del diseño.

Paso 1 Elige el diseño

Elige pantallas variadas: una con texto largo, otra con formularios o botones y otra con listas o tarjetas. Cuantos más tipos de elemento, más completo será el inventario.

Paso 2 Anota cada valor distinto

Recorre las pantallas y anota cada valor distinto, no cada uso. Para cada uno, apunta también cuántas veces aparece y dónde (por ejemplo, "fondo de botón" o "texto secundario").

Busca en estas propiedades:

• Colores de relleno, de texto y de borde.
• Tamaños de fuente, pesos, familias e interlineados.
• Espacios: padding, gap y márgenes entre elementos.
• Radios de esquina y grosores de borde.
• Sombras y opacidades.
• Anchos fijos, si los hay.

Paso 3 Clasifica por tipo

Asigna a cada valor su tipo DTCG, según Tipos simples. Puedes usar esta plantilla:

Paso 4 Busca casi duplicados

Ordena cada tipo de menor a mayor y busca valores muy parecidos: #33CC99 y #33CC98, o un padding de 15 px y otro de 16 px. Son el síntoma del problema de los valores sueltos que viste en Qué es un token.

Marca cada caso. No hace falta decidir todavía cuál se queda: lo harás al construir las escalas en el módulo Primitivos.

Paso 5 Agrupa los compuestos

Busca las combinaciones que se repiten juntas, sobre todo en el texto: por ejemplo, Inter 32 px, peso 600, interlineado 120 % en todos los títulos de sección. Cada combinación repetida es un candidato a estilo de texto (Tipos compuestos y estilos).

Nombra cada combinación por su rol (título, texto de lectura, etiqueta), no por su tamaño.

Paso 6 Decide dónde viviría cada valor

Añade una columna a la tabla: Figma o código. Usa el criterio de Una sola fuente de verdad: un valor va en código si Figma no puede guardarlo de forma que funcione igual en el diseño y en el CSS, o si no se usa al diseñar. El interlineado, por ejemplo, irá en código.

Comprueba tu inventario

Tu inventario está completo si puedes responder que sí a estas preguntas:

• ¿Cada valor tiene un tipo DTCG?
• ¿Sabes cuántas veces aparece cada valor y dónde?
• ¿Has marcado los casi duplicados?
• ¿Tienes una lista de combinaciones de texto nombradas por su rol?
• ¿Sabes qué valores irían en Figma y cuáles en código?

En Figma

Para encontrar los colores más deprisa, selecciona todas las capas de una pantalla. Cuando la selección mezcla rellenos distintos, el panel derecho muestra una sección Selection colors con los colores sólidos y los degradados de los rellenos y trazos seleccionados. No incluye rellenos de patrón, imagen o vídeo, rellenos ocultos ni máscaras (Figma: View and adjust colors in a mixed selection).

Para los tamaños, espacios y radios, inspecciona los elementos uno a uno en el panel derecho.

Lo que te llevas

• Tienes un inventario de los valores sueltos de tu diseño: cada valor, su tipo, cuántas veces aparece y dónde.
• Has marcado los casi duplicados y los valores compuestos.
• Ese inventario es la materia prima de tus primitivos.

Fuentes

• Design Tokens Format Module 2025.10: Types
• Figma: View and adjust colors in a mixed selection