CSS object-fit en Figma: cómo se trasladan el ajuste de imagen, background-size y la resolución

Respuesta corta: el ajuste se traslada bien, la resolución no

object-fit y background-size de CSS describen las mismas decisiones que los modos de relleno de imagen de Figma: escalar la imagen para cubrir la caja, escalarla para que quepa dentro de la caja o repetirla. Los nombres cambian, pero el comportamiento coincide en gran medida. La resolución es otra historia. Una regla CSS no dice cuántos píxeles tiene el archivo, así que una imagen nítida en la página puede llegar borrosa a Figma.

Esta referencia cubre los cinco valores de object-fit, las palabras clave de background-size, los cuatro modos de relleno de Figma y las reglas de resolución que deciden si una imagen importada se ve bien. Está escrita para diseñadores que abren una página importada y necesitan saber qué revisar en cada capa de imagen.

object-fit y los modos de relleno de Figma

Los cinco valores de object-fit

Según la referencia de object-fit en MDN, la propiedad define cómo se redimensiona el contenido de un elemento reemplazado, como <img> o <video>, para ajustarse a su contenedor. No tiene efecto en <iframe>, <embed> ni <fencedframe>. El valor inicial es fill.

• fill: el objeto se dimensiona para llenar la caja de contenido. Si la proporción es distinta, la imagen se estira.
• contain: el objeto se escala para conservar su proporción y caber dentro de la caja. Si no coinciden, aparecen bandas vacías (letterbox o pillarbox).
• cover: el objeto conserva su proporción y llena toda la caja. Si no coinciden, se recorta.
• none: el objeto no se redimensiona.
• scale-down: el objeto se dimensiona como si fuera none o contain, el que dé el tamaño menor.

La posición de la imagen dentro de la caja se controla aparte con object-position. Eso importa también en Figma. Una imagen cover se recorta, y object-position decide qué parte sobrevive.

Los cuatro modos de relleno de Figma

Figma no tiene un tipo de capa de imagen. Según la guía de Figma para ajustar las propiedades de una imagen, una imagen es un relleno de una forma, un frame o una capa de texto, y tiene cuatro modos:

• Fill: coloca y escala la imagen para que ocupe toda la capa. Si las formas difieren, Figma puede recortar la imagen.
• Fit: mantiene visible la imagen completa dentro de la capa. Según la forma de la capa, la imagen puede no llenarla por completo.
• Crop: permite ajustar los bordes de la imagen para controlar qué parte se ve.
• Tile: repite la imagen original por toda la capa, con un tamaño de mosaico definido como porcentaje de las dimensiones originales de la imagen.

Comparación directa

La última columna es una correspondencia por comportamiento, no una promesa sobre lo que escriba cualquier importador. Abre el panel de relleno de la capa importada y lee el modo que realmente está aplicado. El informe de importación de UnHTML enumera lo que recurrió a un plan alternativo durante la importación, y no es un clon exacto al píxel, así que trata el panel de relleno como la fuente de verdad.

background-size: cover, contain y auto

Cuando la página usa un fondo CSS en lugar de un <img>, las reglas vienen de background-size. El valor inicial es auto auto.

• cover escala la imagen, conservando su proporción, al tamaño más pequeño que llena el contenedor sin dejar espacio vacío. La imagen se recorta en vertical o en horizontal si las proporciones difieren.
• contain escala la imagen lo más grande posible sin recortarla ni estirarla. Si el contenedor es mayor que la imagen, esta se repite en mosaico salvo que background-repeat sea no-repeat.
• auto escala en esa dirección conservando las proporciones intrínsecas de la imagen.
• Una longitud estira la imagen a ese tamaño. Un porcentaje es relativo al área de posicionamiento del fondo, que por defecto es la caja de relleno (padding box) y es el viewport completo cuando background-attachment es fixed.

La cláusula del mosaico es la que da problemas. Un fondo contain en un banner ancho puede repetirse en el navegador, y el diseño que esperas a partir de la captura depende de background-repeat. En Figma, la repetición es el modo Tile, y su tamaño es un porcentaje de las dimensiones originales de la imagen. Si ves un patrón repetido tras la importación, busca background-repeat en el CSS de origen antes de suponer que la importación falló.

Resolución: tamaño intrínseco, densidad y el límite de 4096 px

Tamaño intrínseco

Un archivo ráster tiene un ancho y un alto fijos en píxeles. La guía de imágenes adaptables de MDN lo dice claro: una imagen ráster pequeña empieza a verse granulada cuando se muestra más grande que su tamaño original. Los mapas de bits siempre tienen dimensiones y proporciones intrínsecas, y por eso object-fit y background-size pueden razonar sobre ellos.

srcset y densidad

Las páginas suelen servir archivos distintos a pantallas distintas. Con srcset y descriptores x, una imagen mostrada a 320 píxeles CSS de ancho puede cargar un archivo de 320 px en una pantalla estándar y uno de 640 px en una pantalla con dos píxeles de dispositivo por píxel CSS. En el ejemplo de MDN, el archivo de 640 px pesa 93 KB y el de 320 px pesa 39 KB. Con srcset y sizes, el navegador elige el archivo según el ancho del espacio disponible.

Por eso una imagen importada puede verse más blanda que la página real. Es posible que la página haya elegido para tu pantalla un archivo mayor que el que vio la captura. Cuando una imagen se ve granulada tras la importación, averigua qué archivo se capturó y cuánto mide de ancho, y compáralo con el tamaño de la capa.

El límite de 4096 px de Figma

Según el artículo de ayuda de Figma sobre cómo añadir imágenes, Figma limita las imágenes a 4096 x 4096 píxeles. Un recurso mayor se reduce proporcionalmente para que el lado más largo mida 4096 px o menos, y puede perderse algo de metadatos del archivo en el proceso. Los formatos admitidos son JPG, PNG, HEIC, WebP, GIF y TIFF (TIFF solo en Safari), a 2026.

De ahí se derivan dos cosas. Una foto de portada muy grande se reduce al entrar, así que la capa conserva como máximo 4096 px en su lado largo. Y como la imagen es un relleno, no puedes escalar la imagen en sí. Escalas la capa que rellena, y Figma mantiene el modo de relleno mientras lo haces.

Fondos que no son mapas de bits

No todos los fondos tienen píxeles. Según MDN, las imágenes vectoriales como SVG no tienen necesariamente dimensiones intrínsecas, y los degradados CSS no tienen ninguna, de modo que background-size: auto recurre al tamaño del área de posicionamiento. MDN también advierte de que el dimensionado de imágenes vectoriales sin dimensiones intrínsecas no está del todo implementado en todos los navegadores, así que prueba en más de uno. Estos casos dejan atrás los modos de relleno de imagen. Consulta cómo el SVG de una página se convierte en vectores nativos de Figma y los degradados CSS en Figma para ver los detalles.

Cómo revisar una imagen importada

1. Selecciona la capa de imagen y abre el panel de relleno. Lee el modo: Fill, Fit, Crop o Tile.
2. Compáralo con el CSS. cover debería leerse como Fill, contain como Fit, y un fondo repetido como Tile.
3. Si el recorte muestra la parte equivocada, compara object-position o background-position con la posición del recorte en Figma.
4. Compara el ancho en píxeles del archivo de origen con el ancho de la capa. Un archivo de 320 px en una capa de 640 px se verá blando.
5. Si la imagen tiene esquinas redondeadas o borde, revísalos por separado. Border radius, bordes y contornos explica qué sobrevive a una importación.

Conclusión

El comportamiento de ajuste se traslada porque CSS y Figma describen las mismas pocas opciones: cubrir, contener, repetir. La resolución es la incógnita: depende del archivo que sirvió la página y del tope de 4096 px de Figma. Revisa el modo de relleno y luego el ancho en píxeles, y el resto de una imagen importada suele encajar. Si importas páginas con frecuencia, UnHTML informa de lo que recurrió a un plan alternativo para que sepas qué capas inspeccionar primero.

Preguntas frecuentes

¿object-fit: cover se convierte en Fill en Figma?

Describen la misma idea. MDN dice que cover conserva la proporción, llena toda la caja y recorta el exceso. El modo Fill de Figma escala y coloca la imagen para que ocupe toda la capa y puede recortarla. Abre el panel de relleno tras la importación y confirma el modo en la capa.

¿Por qué una imagen importada se ve blanda?

Un ráster tiene un número fijo de píxeles y se ve granulado cuando se muestra más grande que su tamaño original. Una página puede servir un archivo pequeño a una pantalla 1x. Figma además reduce los recursos de más de 4096 x 4096 px. Revisa el archivo que sirvió la página, no el CSS.

¿Qué diferencia hay entre background-size contain y object-fit contain?

Ambos ajustan la imagen completa sin recortar. background-size: contain puede repetirse en mosaico si la caja es mayor que la imagen y background-repeat no es no-repeat. object-fit: contain deja bandas vacías en su lugar.

¿Puedo escalar una imagen en Figma sin cambiar la capa?

No. Figma aplica las imágenes como rellenos, así que escalas el objeto que la imagen rellena, y el modo de relleno se conserva.