UnHTML frente a copiar elementos desde Chrome DevTools a Figma

No, Chrome DevTools no puede copiar un elemento directamente a Figma. Todas las opciones de copia que documenta producen texto: una declaración CSS, una regla o los mismos valores en sintaxis JavaScript. Para obtener capas editables necesitas la extensión de Chrome de Figma o una importación de archivo. Este artículo compara las tres vías para que elijas según la entrada, el plan y el trabajo.

Qué te da copiar desde DevTools

El panel Styles de Chrome DevTools tiene un menú contextual en cada propiedad CSS. Según la referencia CSS de DevTools, las opciones son:

• Copy declaration: la propiedad y su valor en sintaxis CSS.
• Copy property: solo el nombre de la propiedad.
• Copy value: solo el valor.
• Copy rule: la regla completa, con el selector incluido.
• Copy all declarations: todas las propiedades y valores de la regla.
• Copy declaration as JS y Copy all declarations as JS: el mismo contenido en sintaxis JavaScript, que la referencia describe como útil para bibliotecas CSS-in-JS.
• Copy all CSS changes: las ediciones que hiciste en la pestaña Styles, parte de un ajuste experimental llamado "Sync CSS changes in the Styles tab".

Estilos computados

La pestaña Computed muestra el CSS que realmente se aplica a un elemento, así que puedes ignorar las declaraciones sobrescritas. Marca Show All para incluir las propiedades heredadas. La referencia no describe una función de copia dentro de la pestaña Computed, por lo que esos valores se leen, no se exportan.

La brecha

Todas las opciones anteriores son texto. Nada en el menú documentado crea un frame, una capa de texto ni un contenedor de auto layout. Lo que copies hay que reconstruirlo en Figma a mano.

Reconstruir a mano el CSS copiado

La vía manual funciona así: copias la regla de un elemento, creas un frame en Figma y traduces cada declaración tú mismo. Una regla display: flex con gap: 16px y justify-content: space-between se convierte en un frame con auto layout, espaciado de 16px y distribución space between. El padding, el border radius, la familia tipográfica y el color necesitan cada uno su propia pasada.

Eso sirve para un botón, una tarjeta o una comprobación rápida de un valor. Deja de funcionar cuando la página tiene contenedores flex anidados, una cuadrícula o cincuenta elementos repetidos. Además, tienes que revisar las fuentes tú mismo, porque una familia que no está instalada en tu equipo no se mostrará como en la página.

Copiar desde DevTools sirve para leer un valor. No sirve para producir capas.

La extensión de Chrome de Figma

Figma publica una extensión de Chrome que va directamente de la página al lienzo. Según el artículo del Centro de ayuda de Figma, ofrece dos modos de captura:

1. Select element: pasa el cursor sobre una región, como una tarjeta o un botón, y haz clic para capturarla.
2. Capture page: la captura incluye las partes de la página que quedan fuera de la vista al hacer scroll.

Cada captura llega a la bandeja de la barra de herramientas y se copia al portapapeles. La pegas en un archivo de Figma Design o en un tablero de FigJam con Cmd+V en macOS o Ctrl+V en Windows y Linux. El resultado son capas editables: frames, texto, imágenes y formas.

La extensión lee el código que hay detrás de los elementos web y lo traduce. Figma indica que puede aplicar ciertas propiedades de auto layout, propiedades de fuente y variables "if available" (si están disponibles), y que intenta enlazar variables existentes de color, número y cadena, incluidas las de bibliotecas.

Dos comprobaciones antes de depender de ella. Primero, el plan: la extensión está disponible en todos los planes, pero Figma afirma que code to canvas se activa al iniciar sesión en un plan de pago. Segundo, la fidelidad: el artículo de ayuda no enumera limitaciones, y su redacción ("certain" propiedades, variables "if available") sugiere que la cobertura varía. Pruébala con tu propia página antes de basar un flujo de trabajo en ella.

Qué hace una importación de archivo

UnHTML es un plugin de Figma que trabaja con un archivo en lugar de una pestaña en vivo. Admite tres entradas: un archivo .html autocontenido, un .webarchive de Safari o un scene.json capturado con su CLI de código abierto. Eliges Desktop (1440px), Mobile (390px) o un ancho personalizado, y sueltas el archivo sobre el plugin.

Convierte flex y grid en auto layout. Cuando un frame no puede reproducir la geometría capturada, recurre al posicionamiento absoluto. Las fuentes que no tienes se sustituyen (Inter por defecto) y cada sustitución aparece en un informe de importación. El resultado son capas editables, no un clon exacto al píxel.

En cuanto a privacidad, el valor por defecto es cero peticiones de red. La obtención remota es opcional, y los scripts, los controladores de eventos en línea y las URL javascript: se eliminan del marcado antes de renderizar. Para sitios en vivo, recursos remotos o páginas creadas con JavaScript, la CLI o el bookmarklet capturan primero un scene.json.

El precio es único y, en palabras del proveedor, "launch pricing, and it may change" (precio de lanzamiento, puede cambiar). Comprobado el 2026-10-10:

Además, un presupuesto de nodos protege contra importaciones desbocadas, así que una página muy grande puede quedarse corta de una conversión completa.

Qué vía encaja con cada trabajo

Usa la copia desde DevTools cuando estés leyendo CSS. Usa la extensión cuando tengas un plan de pago de Figma y quieras un elemento o una página en vivo desde una pestaña abierta. Usa una importación de archivo cuando quieras una página completa desde un archivo guardado, cuando te baste el límite gratuito de 500 capas o cuando no quieras que nada salga de tu equipo. Para páginas tras un inicio de sesión, mira cómo funciona la captura de una página tras un inicio de sesión con un archivo guardado.

Cómo probar cualquier vía con tu propia página

Elige una página real y haz las mismas tres comprobaciones en cada vía, para que la comparación se base en tu contenido y no en una demo.

1. Cuenta las capas. Anota cuántas capas tiene el resultado y si los elementos repetidos (una fila de tarjetas, una lista de navegación) llegan como frames separados. El nivel gratuito de la importación de archivo se detiene en 500 capas por importación, así que una página larga es una buena prueba de esfuerzo.
2. Inspecciona el auto layout. Selecciona un contenedor flex del CSS de origen, por ejemplo uno con display: flex, gap: 24px y align-items: center. Comprueba que el frame de Figma tenga auto layout con un espacio de 24px y alineación centrada. Si muestra posicionamiento absoluto, es un recurso de reserva, no un fallo de tu página.
3. Revisa las fuentes. Abre las capas de texto y compara la familia con el font-family de la página. Una fuente ausente se sustituye, así que un título puede verse bien a simple vista y aun así llevar la familia equivocada.

Anota qué difiere. Una vía que coincida con tu página en estas tres comprobaciones suele bastar para el resto del trabajo, y una que falle en alguna te indica dónde esperar limpieza manual.

Conclusión

DevTools está pensado para leer y depurar CSS, y su menú de copia lo refleja: te entrega texto. Las capas salen de una herramienta de captura. La extensión de Figma es la alternativa más cercana si ya pagas un plan que incluye code to canvas; una importación de archivo es la alternativa cuando quieres la página como una entrada guardada y sin tráfico de red por defecto. Elijas la que elijas, pruébala con tu página real y lee el resultado. Todas las vías aquí tienen límites. Si quieres ver la vía de archivo en la práctica, empieza desde la página de inicio.