Si trabajas con un design system en Figma y llevas tiempo sin tocarlo, es probable que tengas variables huérfanas en tus componentes y no lo sepas.
Este post nació de un directo que hice la semana pasada. Abrí el UX fomo Design System después de tenerlo parado desde 2024 y me encontré con el problema de frente: componentes con campos en gris en el panel del sidebar derecho, variables que apuntaban a colecciones que ya no existían.
Decidí resolverlo en vivo usando Claude Code con el servidor MCP de Figma, y el proceso me pareció suficientemente útil como para documentarlo aquí.
Te cuento exactamente qué pasó y cómo puedes aplicarlo en tu propio design system.
Qué son las variables huérfanas
Cuando limpias un design system, reorganizas colecciones o eliminas tokens que ya no usas, los componentes no se actualizan solos. Se quedan apuntando a variables que ya no existen.
Figma lo muestra como en gris, como no perdida… donde debería haber un valor de padding, gap o spacing.
La variable estaba ahí, pero la colección a la que apuntaba ya no existe, eso es una variable huérfana.
En el directo metí machete directamente:
Borré las colecciones de margins, paddings, gaps y gutters. El botón del design system se quedó con todos esos campos sin referencia… gris, huérfano.
Lo hice a propósito para probar si Claude Code podía resolverlo.
Cómo usar Claude Code y Figma MCP para reconectar variables
Tenía el servidor MCP de Figma arrancado y Claude Code en la terminal.
Seleccioné el componente en Figma Desktop.
Ojito con lo que digo aquí arriba, tiene que ser en la app de escritorio, no en el browser. Claude Code necesita ver qué tienes seleccionado para entender el contexto. Sin eso, no funciona.
Con el componente seleccionado en Desktop, fui a la terminal y usé la skill getVariablesDef.
El prompt fue este:
Revisa las variables que tengo en este archivo [link al archivo] y aplícalas en el componente button, reemplazando las que tiene aplicadas pero no apuntan a las ya creadas.Claude Code leyó las variables del archivo, identificó las primitivas disponibles y reconectó las propiedades del componente: padding, gap, spacing. Todo.
Sin tocar nada a mano.
El resultado en el canvas de Figma
Volví al componente. Los campos ya no estaban en gris. Estaban cogiendo los valores de las primitivas correctas.
Lo hizo bien en todos los tamaños.
Reconectar variables huérfanas en un design system de Figma a mano habría llevado un buen rato. Variante a variante, campo a campo. Con Claude Code y el servidor MCP de Figma fue cuestión de minutos.
Por qué esto es útil en cualquier design system
A ver… no te cuento esto para hablar de IA por hablar.
Un design system vivo acumula deuda técnica: tokens que se renombran, colecciones que se reorganizan, variables de Figma que dejan de existir.
Los componentes no nos avisan. se rompen en silencio y aparece el gris en el panel derecho…
El flujo funciona en cualquier componente, da igual si es un Button, un TextInput o un componente con 16 variantes.
Recuerda: seleccionas en Figma Desktop, usas getVariablesDef, y le das el contexto con el link al archivo y el nombre del componente.
Seguimos!
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
