Extraer estilos de color en Figma desde una página web importada

Por qué los colores importados llegan como rellenos simples

Para extraer estilos de color en Figma desde una página importada, los creas tú después de la importación: seleccionas una capa que lleve un color que quieras conservar, haces clic en Apply styles or variables en su sección Fill y eliges New style or variable. La importación te da los colores. No les pone nombre.

Conviene saberlo antes de empezar. La página de producto de UnHTML dice que las tiradas de texto conservan familia, grosor, tamaño y color, y que los degradados se trasladan. También dice que el texto repetido se convierte en text styles compartidos de Figma en Pro. No dice que los rellenos pasen a ser estilos de color ni variables, así que trata los estilos de color como un paso manual. El lado del texto lo cubrimos en componentes y text styles a partir de una importación.

Las propiedades personalizadas explican el resto. Una página puede guardar un marrón en una propiedad personalizada de :root y referenciarlo con var() en veinte sitios. El navegador resuelve var() a un valor final antes de pintar nada. La página de UnHTML no menciona las propiedades personalizadas, así que espera rellenos simples en tus capas en lugar de nombres de tokens, y comprueba una capa para confirmarlo en tu propia importación.

Este tutorial parte de que la página ya está en Figma y de que tienes acceso can edit al archivo. El centro de ayuda de Figma indica que cualquier persona con acceso can edit puede crear y editar estilos.

Elige los colores que merece la pena conservar

No crees un estilo para cada relleno. Una página típica repite unos pocos colores: un fondo de página, un color de superficie, el texto del cuerpo, el color de los títulos, un color de marca, un color de borde y algunos colores de estado. Elige esos primero y deja en paz los rellenos que aparecen una sola vez.

Una forma rápida de decidir: haz clic en varias capas del mismo tipo (todos los botones, todos los párrafos del cuerpo) y comprueba si comparten un color. Si lo comparten, merece un estilo. Si cada instancia es distinta, elige el valor que quieras convertir en estándar.

Crear un estilo de color a partir de una selección

Esta es la ruta que conviene usar cuando ya tienes una capa a mano.

1. Selecciona la capa cuyo color quieres conservar.
2. En la barra lateral derecha, haz clic en Apply styles or variables junto a la sección Fill.
3. Haz clic en New style or variable en el selector.
4. Escribe un nombre y una descripción. Las descripciones aparecen al pasar el cursor sobre el estilo en el selector.
5. Si quieres, organiza los estilos en carpetas.

La página de Figma sobre crear y editar estilos enumera lo que puede contener un estilo de color: relleno, trazo, imagen, degradado, patrón y shader fill. En el mismo cuadro puedes hacer clic en el signo menos junto a una propiedad para quitarla del estilo.

Usa un esquema de nombres que sigas entendiendo dentro de un mes. Un patrón habitual es el rol primero y el tono después, como surface/default, text/primary y brand/500. La página de ayuda confirma que se pueden organizar los estilos en carpetas, pero no describe la nomenclatura con barras, así que comprueba cómo agrupa tu archivo los estilos después de guardar el primero.

Desde el panel Local styles

También puedes empezar sin nada seleccionado. Haz clic en el signo más junto a Local styles en la barra lateral derecha, elige un tipo de estilo en el menú desplegable, escribe un nombre y una descripción, configura las propiedades y haz clic en Create style. Es más lento en una importación, porque tienes que escribir el valor del color, pero resulta útil cuando ya tienes los valores hexadecimales de la hoja de estilos del sitio.

El atajo del cuentagotas

En una página larga, el cuentagotas es más rápido que la ruta del menú. Actívalo con Control+C o I en Mac, o con I en Windows. Después:

1. Mantén pulsado Command+Shift en Mac o Control+Shift en Windows.
2. Pulsa Enter o haz clic en el color que quieres.
3. En el cuadro, elige Style o Variable, rellena los campos y pulsa Create.

La página del cuentagotas de Figma dice que el nuevo elemento se aplica a la capa seleccionada. Pulsa Tab mientras muestreas para cambiar el valor mostrado entre Hex, RGB, HSL y HSB, lo que ayuda cuando quieres igualar un valor que viste en el CSS original.

Se aplican dos límites a fecha de 2026. Muestrear un color fuera del lienzo exige Figma Desktop 126.2.10 o posterior en macOS 14 o posterior, y no está disponible en la aplicación de escritorio para Windows ni en el navegador. Muestrear desde capas dentro del archivo funciona en cualquier lugar donde tengas acceso de edición.

Una vez que existen los estilos, aplicarlos al resto de la página es rápido. Pasa el cursor sobre un píxel que tenga un estilo, mantén pulsado Shift y haz clic en la capa que quieres reestilizar.

Estilo o variable para el color

El mismo cuadro te pide elegir entre Style y Variable, así que decide antes de crear cincuenta. La documentación de variables de Figma da las diferencias prácticas:

Las variables se aplican a rellenos sólidos, paradas de degradado, colores de trazo y estilos de color. Un estilo puede hacer referencia a una variable, de modo que puedes crear una variable para cada color principal y un estilo que apunte a ella. Así tienes ambas cosas: el estilo gestiona los degradados y varias propiedades, y la variable aporta el valor.

Si la página es un análisis puntual, bastan los estilos simples. Si piensas convertir la importación en un sistema de diseño de verdad, configura primero las variables y construye los estilos encima. Nuestro artículo sobre cómo construir un sistema de diseño a partir de un sitio importado cubre ese camino.

Degradados, alfa y colores que piden atención

La mayoría de los colores de una página son valores sRGB sencillos. La referencia de valores de color de MDN indica que hex, rgb(), hsl(), hwb() y los colores con nombre son sRGB. Esos se convierten sin problema en un relleno de Figma.

Tres casos merecen una segunda mirada:

• Colores de gama amplia. oklch(), lab(), lch() y color() pueden describir colores fuera de sRGB. MDN señala que color(display-p3 0 0 1) equivale al valor fuera de gama color(srgb 0 0 1.042), así que la conversión a sRGB puede recortar el valor. Si un color de marca se ve algo más plano en Figma, puede que la hoja de estilos original use uno de estos formatos.
• currentColor y colores del sistema. No tienen un valor fijo. currentColor se resuelve según la propiedad color del elemento, y los colores del sistema dependen de los ajustes del usuario o del sistema operativo. Lo que ves en la capa importada es lo que se resolvió en el momento de la captura.
• Degradados. Una variable no puede contener un degradado completo, solo el color de cada parada. Si el degradado es un recurso de marca, crea un estilo de color para él. Para ver cómo aterrizan los degradados CSS en el lienzo, consulta cómo se trasladan los degradados CSS a Figma.

Una pasada breve para cada importación

No hace falta ceremonia. Sigue este orden:

1. Elige de cinco a ocho colores que se repitan en la página.
2. Crea un estilo o una variable para cada uno con el cuentagotas, usando un nombre que empiece por el rol.
3. Agrúpalos en carpetas por rol.
4. Usa Shift y clic para reestilizar las capas sueltas que llevan un color casi igual.
5. Elimina los estilos que al final no hayas usado.

Como la importación no es un clon exacto al píxel, algunos rellenos diferirán del original en pequeñas cantidades. Corrige los que veas y sigue adelante.

Conclusión

Los estilos de color son un paso manual después de una importación, pero pequeño. Elige los colores que se repiten, crea estilos a partir de una selección o con el atajo del cuentagotas Command+Shift o Control+Shift, y decide pronto si las variables deben ir por debajo. Cuando la paleta tiene nombre, el resto de la página va rápido. Si todavía no has importado la página, UnHTML la lleva a Figma como capas editables.