Cómo corregir la posición en Figma: anclajes y scroll

Para corregir la posición en Figma, identifica primero cuándo se mueve la capa: al redimensionar su contenedor, al reorganizar contenido o al desplazar un prototipo. Revisa su padre real en Layers y cambia la regla que gobierna ese caso. Las restricciones definen el anclaje al redimensionar; Auto Layout organiza el flujo; la posición de scroll decide qué permanece visible. Una anchura fija no equivale a una posición fija durante el desplazamiento.

Esta guía explica cómo corregir la posición en Figma mediante una página de ayuda con navegación, una etiqueta superpuesta y un botón flotante. Son ejercicios de diagnóstico recomendados, no capturas de la interfaz de Figma. Trabaja sobre una copia, modifica una opción cada vez y conserva la condición que reproduce el fallo.

Identificar qué hace moverse a la capa

Describe la relación prevista antes de tocar coordenadas. Por ejemplo: «El botón de ayuda mantiene 24 px de distancia respecto al borde inferior y derecho del visor». Eso exige algo diferente de «La etiqueta de estado sigue asociada a esta tarjeta». La palabra fijo puede esconder referencias distintas que conviene nombrar.

Duplica la pantalla problemática y escribe cómo reproducir el error. Parte de sus dimensiones originales, cambia solo la anchura, restaura el tamaño y cambia solo la altura. Después modifica un elemento de contenido y finalmente abre el prototipo para desplazarte. La primera acción que provoca el fallo señala qué revisar. Mantén el zoom constante durante las pruebas.

Registra capa seleccionada, padre directo, acción, borde de referencia esperado y resultado. «El botón desaparece al desplazar» ayuda más que «Figma coloca mal las cosas». Si todo el visor simplemente se ve más pequeño, consulta el diagnóstico del zoom de Figma antes de modificar el diseño.

El ejercicio separa navegación, etiqueta y ayuda para que cada reparación tenga una causa comprobable. Revisa primero la barra, después la etiqueta y por último el botón. Si cambias todo a la vez, una vista correcta no te explicará qué regla solucionó cada problema, y la siguiente pantalla podría repetir el mismo error.

Revisar el padre antes de cambiar distancias

Selecciona la capa en el panel Layers y recorre la jerarquía hacia arriba. Identifica el contenedor inmediato y el contenedor de pantalla previsto. Comprueba si son realmente el mismo objeto. Un botón puede parecer colocado dentro de una tarjeta y pertenecer a otro frame; la proximidad visual no demuestra su relación estructural.

Para la etiqueta, propone esta estructura de prueba: Pantalla → Tarjeta → Etiqueta. Para la ayuda: Pantalla → Botón de ayuda. Son decisiones del ejercicio. La etiqueta acompaña a un contenido concreto; la acción flotante pertenece a la experiencia de pantalla. Copiar la solución de una a otra sin revisar el contexto les asignaría la responsabilidad equivocada.

Compara el caso roto con otro equivalente que funcione. Anota tipo de padre y opciones de layout antes de mover capas. Usa nombres breves durante el diagnóstico, como Tarjeta/contenido y Tarjeta/estado. Evita reorganizar nombres o navegación ajenos al fallo: el cambio útil debe mostrar la pequeña modificación estructural que explica el resultado.

Si solo falla una instancia, compárala con otra antes de editar el componente principal. Para sustituciones de contenido y conflictos de propiedades, la guía de variantes y overrides desarrolla una investigación distinta. Reparar la posición no debería borrar silenciosamente una personalización que tenía un motivo válido.

Anclar al borde previsto del frame

Si el problema aparece al redimensionar, revisa las restricciones de la capa que pueda usarlas. La documentación de restricciones de Figma diferencia anclaje a bordes, centrado, ajuste entre bordes opuestos y escala proporcional. Elige según la relación escrita; que la pantalla cambie de tamaño no implica que Scale sea la opción adecuada.

Prueba con un frame normal de 480 px y un control de 48 px situado a 24 px de su borde derecho. Amplía el frame hasta 640 px. La relación prevista con el borde derecho conserva los 24 px de separación y los 48 px del control. Son medidas ilustrativas para comprobar el comportamiento, no una escala universal ni un tamaño obligatorio de dispositivo.

Repite el ejercicio con una banda que deba ocupar el contenedor conservando ambas separaciones laterales. Su requisito es distinto del control pequeño, así que revisa la relación con los dos bordes. Comprueba cada eje por separado: mantener una distancia derecha no dice nada sobre la distancia inferior. Escribe la decisión horizontal y la vertical.

No evalúes la reparación únicamente con la captura inicial. Dos opciones pueden coincidir a un tamaño y divergir después. Conserva las dimensiones iniciales y finales en la descripción y compara distancias tras el cambio. Si buscas adaptar contenido dentro de Auto Layout, la guía de Fill Container explica ese contrato de tamaño.

Reservar la posición libre para superposiciones

Una capa dentro del flujo normal de Auto Layout sigue la organización del contenedor. La guía de Auto Layout explica que Ignore auto layout, antes absolute position, excluye al hijo del flujo sin sacarlo del frame y permite usar restricciones. Actívalo para una superposición prevista, no solo porque arrastrar un elemento del flujo resulte incómodo.

En nuestra tarjeta, la etiqueta ocupa su zona superior derecha y el cuerpo sigue en el flujo ordinario. Prueba un texto corto, otro largo y la ocultación de un detalle opcional. La etiqueta debe seguir vinculada a la tarjeta mientras cambia el contenido. El ejercicio muestra la relación propuesta sin convertir todos los hijos en objetos colocados manualmente.

Reserva una zona clara para la etiqueta durante la revisión. Al estar fuera del flujo, puede chocar con textos largos porque ambos no negocian espacio mediante ese flujo. Pregunta si la superposición aporta valor, si el contenido sigue siendo legible y si el estado podría convertirse en una fila normal. Es una recomendación de diseño, no una limitación del programa.

Para los enlaces de navegación, prefiere una relación que puedas explicar mediante alineación y espaciado. Conserva una copia del contenido original para comparar. Si una pantalla estrecha requiere otra composición, muéstrala deliberadamente; una colección de coordenadas independientes no comunica bien cómo debería reorganizarse la barra.

Corregir la acción flotante en el prototipo

Prepara un frame de visualización delimitado con contenido que lo supere y configura el desbordamiento en Prototype. La documentación de scroll diferencia Scroll with parent, Fixed y Sticky. Fixed permanece durante el desplazamiento; Sticky empieza en el flujo y se fija después. Elige según la tarea real antes de activar una opción.

La ayuda del ejercicio debe estar disponible a lo largo de la página. Comprueba primero que existe desplazamiento y que el control pertenece al frame previsto. Después configura su posición de scroll. Para un hijo dentro de Auto Layout, Figma documenta el requisito de posición absoluta, representada en el flujo de diseño por Ignore auto layout.

Un control Fixed todavía puede quedar fuera del visor visible. El tutorial de desplazamiento de Figma muestra ese caso y recupera un botón con restricciones Bottom y Right. Aplica la relación inferior derecha que has escrito y prueba un visor más alto y otro más corto, en lugar de arrastrarlo hacia arriba hasta acertar una única vista.

Revisa el comienzo, un punto intermedio y el final del contenido. La ayuda debe verse en los tres y el último contenido útil debe seguir siendo alcanzable. Si solo desaparece dentro de un panel anidado, aísla el desplazamiento de ese panel en otro ejemplo antes de cambiar la página completa o todas sus capas.

Usar con criterio una navegación de EmviUI

El espécimen real de navegación móvil de EmviUI que aparece debajo muestra una zona de marca y un control de menú con dos disposiciones. Úsalo para decidir qué elementos pertenecen a la barra. La imagen no revela restricciones, una posición fija en el prototipo ni interacción de teclado; esas propiedades se comprueban en el archivo y la implementación.

El catálogo de componentes de EmviUI incluye piezas de navegación y botones. Puedes empezar el ejercicio con una barra y una instancia de ayuda de tu archivo elegido. Separa apariencia y colocación: incorpora la instancia a la jerarquía de prueba y documenta la relación que necesita en ese contexto de pantalla.

Como caso de aceptación, cambia el nombre de marca y compara una vista ancha con otra estrecha. Pregunta qué elemento conserva una distancia al borde y cuál comparte el espacio disponible. Añade una etiqueta traducida larga. Estas variaciones hacen visible la regla; la captura móvil por sí sola no prueba que tu adaptación soporte esos contenidos.

EmviUI ofrece un punto de partida práctico para mantener coherencia visual. No diagnostica automáticamente el frame que lo rodea, elige la política de scroll ni certifica una implementación accesible. Conserva el espécimen reparado junto a sus condiciones de aceptación para reutilizar la decisión de diseño además de la apariencia del componente.

Separar Design, Sites y el navegador

Confirma qué producto de Figma estás editando. La guía de posicionamiento de Figma Sites documenta Relative, Absolute, Fixed y Sticky para elementos de páginas web. Sus controles específicos no sirven como instrucciones para encontrar un menú ausente en Figma Design. Identifica el producto en la nota de reparación y usa su documentación correspondiente.

En el handoff, describe primero el comportamiento con palabras sencillas. La documentación de position en MDN explica las relaciones entre elementos CSS, bloques de referencia y desplazamiento. Quien implemente debe revisar DOM, bloque de referencia y contenedor de scroll reales. Compartir el nombre de un control de Figma no demuestra que el navegador produzca el mismo comportamiento.

Añade un contrato breve: qué elemento sirve de referencia, qué bordes mantienen distancia, cuándo debe moverse el control y qué puede pasar por detrás. Para la ayuda, incluye el visor corto y el final del contenido. Para la etiqueta, incluye la tarjeta larga. Estos casos resultan más útiles que una coordenada X/Y tomada del frame por defecto.

Comprueba obstrucciones en la implementación. La guía de W3C sobre foco no oculto explica el requisito mínimo de que el contenido creado no esconda completamente el control con foco. Una ayuda flotante o una barra sticky necesita pruebas de teclado en el navegador. El prototipo facilita la conversación, pero no demuestra conformidad de la página interactiva.

Conservar una prueba de posición repetible

Termina con un ejemplo que otro diseñador pueda reproducir. Conserva copia rota, copia reparada y una nota breve de decisión. Registra evento, contenedor de referencia y regla modificada. Si el fallo vuelve tras actualizar un componente, esa misma prueba ayudará a distinguir un cambio estructural, una regla de posición diferente o un supuesto de contenido que dejó de cumplirse.

1. Restaurar el tamaño original y reproducir el fallo.
2. Comprobar padre directo y bordes de referencia.
3. Cambiar una regla de layout o scroll en una copia.
4. Probar anchuras, alturas y contenido corto y largo.
5. Abrir el prototipo al comienzo, a mitad y al final.
6. Registrar resultado y condiciones para el handoff.

En este ejercicio, éxito significa que la etiqueta acompaña a la tarjeta, la navegación se entiende cuando cambia el contenido y la ayuda permanece visible sin bloquear la tarea. Si un caso falla, nómbralo. Evita marcar todo como «responsive resuelto» cuando únicamente se comprobó una dimensión o un estado.

Escala un posible defecto de la herramienta cuando tengas un ejemplo mínimo aislado. Guarda pasos, resultado esperado y resultado real sin contenido de biblioteca ajeno al problema. La reparación debería dejar una explicación clara: la capa pertenece a un contenedor concreto y responde a un evento concreto. Ese registro facilita crear la siguiente pantalla y localizar la próxima regresión.