Glosario de sistemas de diseño
El vocabulario en el que se apoya el trabajo con sistemas de diseño, explicado con claridad. Estas entradas describen la disciplina, no el producto, así que sirven aunque nunca abras Flash DSM.
De diseño a código
El paso de diseño a código describe el proceso de convertir las decisiones tomadas en una herramienta como Figma en código front-end funcional. La versión duradera transfiere tokens de diseño en lugar de generar marcado a partir de un lienzo, porque los tokens siguen siendo válidos cuando la interfaz cambia y el marcado generado no.
Deriva de tokens
La deriva de tokens es la divergencia gradual entre las decisiones registradas en un sistema de diseño y los valores que un producto usa realmente. Ocurre cuando una superficie (un archivo de Figma, una hoja de estilos o código generado por IA) deja de referenciar la fuente compartida y acumula sus propios valores.
Escala de color
Una escala de color es un conjunto ordenado de tonos de un mismo matiz, numerado por convención de 50 a 900, construido para que los pasos sean perceptualmente uniformes y ciertas combinaciones cumplan ratios de contraste conocidos. Permite elegir colores por función y paso en vez de por valores hexadecimales arbitrarios.
Escala tipográfica
Una escala tipográfica es el conjunto ordenado de tamaños de fuente que permite un sistema de diseño, generado normalmente multiplicando un tamaño base por una razón constante. Limitar el texto a esos pasos es lo que mantiene coherente la tipografía de una interfaz construida por muchas personas.
MCP para tokens de diseño
Model Context Protocol es un estándar abierto para conectar asistentes de IA con herramientas y datos externos. Aplicado a los tokens de diseño, un servidor MCP expone los valores vigentes de un proyecto a un agente de programación para que los componentes generados usen el sistema real en lugar de valores inventados por el modelo.
Sistema de diseño
Un sistema de diseño es el conjunto compartido de decisiones de diseño, componentes y reglas que un equipo usa para construir un producto de forma coherente. Suele incluir tokens de diseño, una librería de componentes, guías de uso y documentación, mantenidos como una única fuente de verdad para diseño y código.
Token de diseño
Un token de diseño es un valor con nombre que guarda una única decisión de diseño, como un color, un paso de espaciado o un tamaño de fuente, para poder reutilizar esa decisión en las herramientas de diseño y en el código en lugar de escribirla a mano en cada sitio.
Token semántico
Un token semántico es un token de diseño nombrado por la función que cumple y no por el valor que contiene, como --color-text-danger en lugar de --color-red-600. Normalmente referencia a un token primitivo, lo que permite cambiar el valor subyacente sin renombrar nada de lo que lo usa.
Tokens de modo oscuro
Los tokens de modo oscuro son un segundo conjunto de valores asociado a los mismos nombres semánticos que el tema claro, de modo que cambiar de modo reapunta nombres como --color-surface a colores distintos sin que ningún componente necesite saber qué modo está activo.
Variables de Figma
Las variables de Figma son valores con nombre guardados dentro de un archivo de Figma para colores, números, cadenas y booleanos, con modos para casos como el tema claro y oscuro. Son la forma nativa de tokens de diseño en Figma, pero leerlas mediante la API REST de Figma requiere un plan Enterprise.