Cómo crear un sistema de diseño a partir de un sitio importado en Figma

Una importación te da capas, no un sistema de diseño. Para pasar de una cosa a la otra, auditas los valores que la página repite, reúnes los casi duplicados en una escala y das nombre a lo que queda como tokens primitivos y semánticos en Figma. Este tutorial da por hecho que ya tienes la página en Figma y que conoces las variables. A octubre de 2026, cuenta con hacer la mayor parte del trabajo a mano.

Los pasos sirven para rediseñar un sitio que no tiene archivo de diseño, para analizar la página de un competidor o para reconstruir una página heredada. El objetivo es un sistema pequeño que de verdad puedas mantener, no un inventario completo de todo lo que la página contiene. Calcula una o dos horas para una página de marketing típica, y más para una interfaz de producto con muchos estados. El requisito previo es sencillo: una página importada abierta en Figma, con las fuentes resueltas, y permiso de edición en el archivo donde vivirán las variables.

Audita la importación antes de poner nombres

Empieza por limpiar la importación. Elimina el ruido oculto y aplana las capas que existen solo por cómo se construyó la página. Poner nombres de tokens sobre el desorden solo le da un nombre ordenado a la basura.

Después reúne lo que se repite. Necesitas cinco listas:

1. Colores de relleno y de texto
2. Tamaños de fuente, con peso e interlineado
3. Valores de espaciado (padding y gap)
4. Radios de esquina
5. Sombras

Cuenta cuántas veces aparece cada valor. Un valor usado una vez es una rareza, no un token. Un valor usado doce veces es un candidato.

Un límite que conviene decir claro: la página de producto de UnHTML no dice que las propiedades personalizadas de CSS ni los tokens de diseño de la página de origen pasen a Figma. Trata la importación como valores sin procesar y crea tú las variables. La captura web de Figma es distinta, y la tratamos casi al final.

Reúne los casi duplicados en una escala

Las páginas reales son desordenadas. Encontrarás cuatro grises que se diferencian por unos pocos puntos de luminosidad, y valores de padding como 14px, 15px y 16px conviviendo. Elige un valor por grupo y ajusta los demás a él.

Lleva una tabla de trabajo para que las decisiones queden a la vista:

No persigas cada valor atípico. Si un valor aparece una o dos veces y no encaja en la escala, déjalo como excepción local. Mantén la primera pasada más pequeña de lo que sugiere la auditoría. Es más fácil de defender y más fácil de ampliar.

Primero los tokens primitivos, después los semánticos

La guía de Figma sobre tokens separa los tokens en capas, y esa separación es la columna vertebral del sistema.

Los primitivos definen lo que existe

Los tokens primitivos enumeran cada valor del sistema, como cada color de marca o cada paso de espaciado. Figma los describe como "for reference only" (solo de referencia), así que no los aplicas directamente en los diseños. Ponles nombre según el valor, por ejemplo gray/500 o space/16.

Los semánticos dicen cómo usarlo

Los tokens semánticos expresan la intención. En el ejemplo de Figma, surface/brand-contrast apunta al primitivo pink/400. Como los tokens semánticos son alias de los primitivos, cambiar el valor base actualiza todo lo que depende de él. Usa palabras completas en lugar de abreviaturas y mantén los prefijos coherentes, para que los nombres sigan siendo válidos a medida que crece el sistema.

Tokens de componente, solo cuando haga falta

Un token de componente indica dónde se aplica un valor, con la forma button-primary-background-default. Añádelos cuando un componente necesite apartarse de la capa semántica compartida. Sáltalos en la primera pasada.

Variables para valores, estilos para compuestos

Las variables y los estilos de Figma hacen trabajos distintos. La mayoría de los equipos usa ambos. Las variables admiten alias, varios modos para temas, ámbitos y code syntax. Los estilos guardan valores compuestos, como varios rellenos o varias sombras en una misma capa.

Eso tiene una consecuencia práctica para una página importada. Los valores únicos, como colores, espaciados y radios, van a variables. Una sombra en capas sigue siendo un estilo, y un degradado también, porque las variables no pueden contener degradados. Si quieres ver cómo llegan esos dos desde la página, lee cómo box-shadow se convierte en un efecto de Figma y qué pasa con los degradados CSS.

Refleja los tokens como propiedades personalizadas de CSS

Si un desarrollador va a implementar el sistema, dale tokens que coincidan. La referencia de MDN es clara en las reglas que importan: las propiedades personalizadas tienen el ámbito de los elementos donde se declaran, participan en la cascada y se heredan. Los nombres distinguen mayúsculas de minúsculas, así que dos grafías del mismo nombre son dos propiedades distintas.

Un reflejo mínimo de la tabla anterior se ve así:

:root {
  --gray-500: #6b7280;
  --space-16: 16px;
  --radius-4: 4px;

  --text-secondary: var(--gray-500);
  --card-padding: var(--space-16);
}

El primer bloque es la capa primitiva. El segundo es la capa semántica, escrita como alias con var(). La estructura coincide una a una con las colecciones de Figma.

Poner buenos nombres rinde una segunda vez. Cuando capturas una página con la propia captura web de Figma, Figma vincula las variables CSS con las variables de Figma en un orden fijo: primero compara el nombre CSS con la code syntax de la variable, después con el nombre de la variable, y por último recurre a la variable que mejor encaja con el ámbito más limitado. Define la code syntax en tus variables, mantén los nombres CSS legibles y captura desde un servidor de desarrollo donde las herramientas de compilación no hayan alterado los nombres. Las variables de color con opacidad no se vinculan, así que revísalas a mano.

Comprueba el sistema contra la página

Un conjunto de tokens solo vale la pena si puede reconstruir la página de la que partiste. Elige dos o tres fotogramas representativos de la importación y vuelve a vincular sus rellenos, colores de texto, padding y radio de esquina a las nuevas variables, trabajando desde la capa semántica. Después compara el resultado con el original.

Espera pequeños desplazamientos. Ajustar 14px y 15px de padding a 16px mueve las cosas uno o dos píxeles, y es el precio que aceptaste al reunir la escala. Si un desplazamiento es lo bastante grande como para cambiar el diseño, el grupo estaba mal: divídelo en dos tokens o conserva el valor atípico como excepción local. Aquí también descubres los valores que la auditoría pasó por alto, como un color de hover que solo existe en un componente.

Documenta el sistema para que otros lo usen

Escribe para qué sirve cada colección. Basta una descripción breve en cada colección de variables: de qué capa se trata (primitiva o semántica), si los diseñadores pueden aplicarla directamente y quién se encarga de los cambios. Usa las opciones de ámbito de las variables de Figma para que una variable de espaciado no aparezca en el selector de color.

Si además mantienes el reflejo en CSS, trata las colecciones de Figma como la fuente de verdad y actualiza la hoja de estilos cuando cambien. Dos fuentes de verdad se desajustan enseguida. El modo oscuro y otros temas son el único caso en que conviene añadir pronto un segundo modo, porque, gracias a los alias, entre un modo y otro solo cambia la capa semántica.

Los componentes y los estilos van después

Una vez que existen los tokens, el siguiente paso es la reutilización. En Pro, UnHTML convierte el texto recurrente en estilos de texto compartidos y los elementos repetidos en componentes, como se explica en cómo convertir una importación Pro en componentes y estilos de texto. Haz primero los tokens. Así los componentes y los estilos de texto tendrán variables reales a las que vincularse, en lugar de valores hexadecimales sueltos.

Conclusión

Audita lo que la página repite, ajusta los casi duplicados a una escala y divide el resultado en tokens primitivos y semánticos. Pon los valores únicos en variables, deja los compuestos como estilos y refleja los nombres en CSS para que diseñadores y desarrolladores compartan un mismo vocabulario. Empieza poco a poco y añade un token solo cuando un valor se lo gane. La importación te ahorra reconstruir la página. El sistema sigue siendo cosa tuya.