Position CSS en Figma: Static, Relative, Absolute, Fixed y Sticky

CSS tiene exactamente cinco valores para la propiedad position: static, relative, absolute, fixed y sticky. Figma no tiene ninguno de ellos. Lo que tiene en su lugar es auto layout, la opción de hacer que una capa ignore el auto layout, y un conjunto de constraints de redimensionado. Cada uno cubre una parte distinta de lo que position hace en el navegador. Si alguna vez importaste una página y te preguntaste por qué una barra lateral sticky terminó como una simple capa static, esta es la razón.

Esta brecha aparece sobre todo en tres situaciones: rediseñar un sitio que nunca tuvo un archivo de diseño, desmontar la página de un competidor para ver cómo está construida, y reconstruir una página heredada cuyo código fuente original ya no existe. En los tres casos, las capas que obtienes solo son tan útiles como tu comprensión de qué comportamiento CSS tenía cada una. Figma no tiene forma de conservar esa información en el propio lienzo.

Esta referencia recorre los cinco valores, lo que cada uno hace realmente según MDN y la especificación CSS Positioned Layout, y qué mecanismo de Figma, si existe alguno, cumple el mismo papel. Termina con una tabla de referencia propiedad por propiedad, vigente a partir de 2026, mientras la especificación CSS Positioned Layout Module Level 3 siga siendo la definición de referencia para los cinco valores.

Static y Relative: Los Dos Que Reservan Espacio en el Layout

position: static es el valor por defecto. Ningún elemento necesita declararlo, y una vez declarado, top, right, bottom, left y z-index no tienen ningún efecto sobre él. El elemento se sitúa exactamente donde lo coloca el flujo normal del documento.

position: relative también permanece en el flujo normal, pero puede desplazarse con top, right, bottom y left. El desplazamiento es solo visual. El espacio que el elemento habría ocupado en su posición sin desplazar sigue reservado en el layout, así que ningún otro elemento de la página se reacomoda para llenar el hueco.

La equivalencia más cercana en Figma para ambos es el estado por defecto de una capa hija dentro de un frame con auto layout. Una capa a la que no se le ha dicho que ignore el auto layout sigue las reglas de layout de su padre, del mismo modo que un elemento con position static o relative sigue el flujo normal, y también conserva su espacio reservado igual. No existe un interruptor separado de "static" o "relative" en Figma, porque el auto layout ya asume ese comportamiento por defecto. Para el lado específico de flex de esa equivalencia, CSS Flexbox to Figma Auto Layout recorre justify-content, align-items y gap propiedad por propiedad.

Absolute Positioning: Containing Blocks en CSS vs Ignore Auto Layout en Figma

position: absolute saca a un elemento del flujo normal por completo. Se posiciona respecto al ancestro más cercano cuyo propio position no sea static, o respecto al initial containing block de la página si no existe tal ancestro. No se reserva nada para él en el layout, y a menos que se defina un width o un height, se dimensiona según su contenido.

La versión de Figma para esto es una capa configurada para ignorar el auto layout, expuesta en la API de plugins como layoutPositioning: ABSOLUTE. La capa permanece anidada dentro de su frame padre, pero recibe valores explícitos de x, y, width y height en lugar de seguir las reglas de layout del padre. Es el mismo intercambio que hace CSS: sigue dentro de una estructura contenedora, pero ya no gobernada por ella. El propio sistema de constraints de Figma (left, right, top, bottom, center, scale) solo está disponible una vez que una capa ha ignorado el auto layout, reflejando cómo un elemento CSS con position absolute sigue midiendo sus offsets respecto a un containing block incluso después de salir del flujo.

No todo frame importado se convierte de forma limpia a auto layout. Cuando la geometría capturada no puede reproducirse así, por ejemplo por hermanos superpuestos o un layout controlado por script en lugar de CSS, UnHTML recurre a absolute positioning para ese frame por sí solo. El resultado nunca es peor que una copia capa por capa de lo que la página renderizaba.

El absolute positioning en CSS es también el mecanismo detrás de la mayoría de badges, tooltips y overlays modales, ya que ninguno de esos elementos debería empujar el contenido circundante al aparecer. Lo mismo ocurre en Figma una vez que una capa ignora el auto layout: puede colocarse encima, o parcialmente fuera, de su frame padre sin alterar la posición de ninguna capa hermana. La diferencia es que un elemento CSS dimensionado solo según su contenido puede terminar con cualquier ancho dependiendo de lo que contenga, mientras que una capa de Figma siempre lleva un width y un height explícitos en el momento en que se coloca, con o sin auto layout. Ese es uno de los pequeños pero reales huecos que un import report existe para señalar: un elemento con width: auto en la página de origen se convierte en un único número fijo en Figma, vigente en el momento de la captura, no en una regla que sigue recalculándose.

Fixed Positioning: Anclaje al Viewport y Por Qué Figma No Puede Simular el Scroll

position: fixed se comporta como absolute, con una diferencia. Su containing block es el propio viewport, o un ancestro con una propiedad transform, perspective o filter distinta de none. Un elemento fixed no se mueve cuando la página hace scroll, y en medios paginados se repite de forma idéntica en cada página.

Figma no tiene equivalente, porque un frame de Figma no es un viewport con scroll. No hay nada respecto a lo cual anclarse, ya que nada hace scroll debajo de la capa en primer lugar. En la práctica, la forma más limpia de manejar una barra de navegación fixed o un footer persistente tras la importación es tratarlo como su propio frame de nivel superior, en lugar de esperar que se ubique dentro de la pila principal de auto layout de la página, y luego reconectar el comportamiento de scroll en el código.

Los dos elementos fixed más comunes en una página real son una barra de navegación superior y un banner de cookies o consentimiento. Ambos suelen importarse en una posición visualmente correcta aunque el comportamiento CSS subyacente haya desaparecido. Vale la pena señalarlo a quien vaya a encargarse de la reconstrucción final: la capa se ve bien en la posición de scroll en la que se capturó la página, pero nada en el archivo de Figma registra que estaba pensada para quedarse en ese lugar en cualquier otra posición de scroll.

Sticky Positioning: El Valor Sin Equivalente en Figma

position: sticky es el más complicado de los cinco. Se comporta como relative hasta que el usuario hace scroll más allá de un umbral definido, y entonces se fija en una posición dentro de su ancestro con scroll más cercano. Necesita al menos uno de top, right, bottom o left con un valor distinto de auto en un eje dado para activarse. Según la especificación CSS Positioned Layout, si solo se define top y bottom permanece en auto, el elemento solo podrá desplazarse hacia abajo, nunca hacia arriba. Como relative, reserva su espacio en el layout; a diferencia de absolute y fixed, que no lo hacen.

No existe simulación de scroll en un lienzo de Figma, así que un elemento con position sticky se importa siempre como una capa static. Eso no es un fallo de la conversión. Es una brecha estructural: los frames de Figma no hacen scroll como lo hace el viewport de un navegador, así que no hay nada a lo que una instrucción de "quédate aquí" pueda engancharse. El import report es el lugar donde revisar cualquier declaración position: sticky que necesite volver a conectarse una vez que el diseño regrese al código.

Los encabezados sticky en tablas de datos y la navegación sticky de secciones en páginas de documentación largas son los dos casos donde esto aparece con más frecuencia, ya que ambos dependen de que el elemento permanezca visible solo después de que el usuario haya hecho scroll una distancia específica, no desde el principio de la página. Alguien que revise solo el archivo de Figma importado no tiene forma de saber, con solo mirarlo, que el encabezado de la tabla estaba pensado para separarse de su fila y flotar en la parte superior del viewport. Comparar el import report con la página en vivo, o con el CSS original si todavía está disponible, es la única forma confiable de detectar cada declaración sticky antes de que la reconstrucción salga a producción.

De CSS Position a Figma: Tabla de Referencia por Propiedad

Los layouts basados en grid plantean una pregunta relacionada pero distinta. Propiedades de CSS Grid como grid-template-columns y grid-area no se relacionan con position en absoluto. CSS Grid to Figma: What Survives the Conversion to Layers cubre esa equivalencia en el mismo formato propiedad por propiedad.

Conclusión

Figma no tiene una propiedad position, pero cuatro de los cinco valores CSS siguen teniendo un equivalente funcional. El auto layout cubre static y relative, ignorar el auto layout cubre absolute, y un frame de nivel superior separado es la respuesta práctica para fixed. Sticky es la única brecha real, ya que nada en Figma reacciona a un evento de scroll. Cuando una conversión no puede hacerse de forma limpia, lo correcto es recurrir a absolute positioning en lugar de adivinar, y dejar constancia de ello en un import report para que nada se pierda en silencio.