Corregir un frame en Figma: límites, recorte y exportación

Para corregir un frame en Figma, identifica primero el contenedor real y el síntoma: límites incorrectos, contenido que desaparece, cambios de tamaño inesperados o una exportación equivocada. Comprueba la jerarquía antes de modificar dimensiones, revisa el recorte antes de recrear objetos y previsualiza la selección exacta que vas a exportar. Un frame tiene geometría propia; su contenido visible no siempre describe esos límites.

Aplica el diagnóstico sobre un duplicado de la pantalla afectada. Utilizaremos una página de acceso con tarjeta de formulario, región de ilustración y contenedor general. Las comprobaciones son un método editorial de resolución de problemas, no un supuesto comando universal de reparación de Figma. Anota la anchura, la altura y el contenido visible esperado antes de cambiar nada: así podrás determinar si la corrección resuelve el problema original.

Identifica el frame que estás modificando

Selecciona el objeto en el panel de capas y lee su tipo y su nombre antes de arrastrar un borde. La superficie de una tarjeta, un grupo de campos y la página exterior pueden solaparse visualmente y ser objetos distintos. Una selección equivocada puede parecer un fallo del frame cuando estás editando otro límite.

La guía de frames y grupos de Figma explica que los límites del grupo siguen a sus hijos, mientras que el frame tiene dimensiones definidas explícitamente. Si al mover una etiqueta pequeña se amplía el borde seleccionado, comprueba si has elegido un grupo. Convertir o reconstruir un contenedor debe ser una decisión estructural deliberada, no la primera reacción ante una selección confusa.

En la copia de trabajo, renombra los contenedores importantes: Página de acceso, Tarjeta del formulario e Ilustración. Despliega cada uno y localiza la capa que se comporta mal. Los nombres deben describir su función, aunque la convención del archivo de producción sea diferente. Conserva una captura de la composición original para compararla con la versión modificada sin depender de la memoria durante las pruebas.

Redacta una nota breve del síntoma: «La tarjeta está bien, pero la exportación de la página deja demasiado espacio a la derecha». Eso dirige el diagnóstico hacia la geometría de la página y el objetivo exportado. «El mensaje de ayuda existe en Capas, pero desaparece debajo de la tarjeta» apunta a visibilidad y límites. Distinguir estas observaciones evita encadenar cambios sin relación que dificulten reproducir el fallo inicial.

Comprueba la jerarquía antes de cambiar límites

Un objeto puede estar colocado visualmente sobre un frame sin ser hijo suyo. Comprueba la sangría del panel de capas; no asumas que todo lo situado dentro de un rectángulo pertenece a ese contenedor. La relación importa al mover, redimensionar y exportar: el contenido esperado necesita estar en la estructura adecuada.

La guía de relaciones entre padres, hijos y hermanos describe el cambio de contenedor y señala que el tamaño influye en la asignación automática al mover objetos en el lienzo. Una ilustración grande puede no estar dentro de donde esperabas. En el duplicado, identifica su padre y colócala explícitamente bajo el contenedor previsto desde Capas; compara su posición antes y después del movimiento.

Haz una prueba con tres objetos antes de reorganizar una página grande. Selecciona sucesivamente el título del formulario, su tarjeta y la página exterior. Anota qué objeto debería contener el título y cuál debería contener la tarjeta. La misma lógica sirve para un gráfico dentro de un panel dentro de un dashboard. Estás comprobando pertenencia, no proximidad visual. No aplanes toda la pantalla únicamente para simplificar la apariencia del árbol.

Tras corregir la pertenencia, selecciona el padre y realiza un movimiento pequeño y reversible en la copia de trabajo. Observa si los hijos esperados se desplazan con él y deshaz la operación. Inspecciona los objetos que se hayan quedado atrás. Es una confirmación práctica, no un sustituto de leer la jerarquía. Mantén la prueba acotada para distinguir un problema de pertenencia de un desplazamiento accidental de otra capa.

Distingue el recorte del contenido perdido

Un hijo recortado no tiene por qué haberse eliminado. Revisa su posición y los límites de sus antecesores antes de crear otro. Por ejemplo, un mensaje de ayuda debajo de un formulario puede existir en el archivo y quedar fuera de la tarjeta o de la página que determina lo visible.

La documentación de frames define Clip content como el ajuste que oculta contenido hijo situado fuera de sus límites. En el duplicado, cambia temporalmente ese ajuste en el antecesor sospechoso y compara. Si aparece el objeto, has obtenido evidencia sobre el límite responsable. Decide entonces si debe crecer el frame, moverse el hijo o mantenerse el recorte porque es intencionado.

No dejes desactivado el recorte simplemente porque así aparece un botón perdido. En una tarjeta con una ilustración recortada de forma deliberada, ese comportamiento puede formar parte de la composición. En un mensaje obligatorio del formulario, ocultarlo suele ser un problema que hay que resolver. Escribe el resultado deseado: «El mensaje permanece dentro de la tarjeta al ampliar el texto» es comprobable; «Ahora se ve bien» resulta demasiado ambiguo.

Si cambiar un antecesor no explica el síntoma, recorre la jerarquía hasta el siguiente contenedor. Modifica un ajuste cada vez y restáuralo cuando la prueba no aporte información. Así podrás interpretar el resultado. Comprueba además que estás mirando el estado correcto del diseño y no una pantalla duplicada con nombre parecido. El objetivo es localizar el límite responsable, sin alterar varias propiedades hasta perder la causa del cambio.

Elige redimensionar sin escalar por accidente

Decide si necesitas un contenedor de otro tamaño o una versión proporcionalmente mayor de todo el diseño. Son operaciones diferentes. Ampliar una página de acceso para revisarla no debería aumentar automáticamente etiquetas, grosores y controles solo porque quieres más espacio junto al formulario.

La guía de la herramienta Scale explica que el escalado conserva proporciones y modifica propiedades como trazos y desenfoques. Úsalo de forma deliberada para cambiar proporcionalmente un recurso. Para investigar el layout, selecciona el frame previsto y revisa su anchura y altura. En una copia, observa qué ocurre con la etiqueta de un botón cuando cambia el contenedor exterior: debería seguir la regla deseada, no una herramienta seleccionada por error.

Si interviene Auto Layout, examina juntos los ajustes del padre y del hijo. La documentación de Auto Layout distingue dimensiones fijas, Hug contents y Fill container. Identifica qué capa determina la dimensión problemática antes de modificar toda la jerarquía. La guía específica de Fill Container para interfaces adaptables desarrolla ese flujo; aquí conviene consultarla después de confirmar el frame y la pertenencia de sus capas.

Evita convertir esta comprobación en un rediseño adaptable completo. Reproduce el síntoma en el tamaño original, aplica una corrección y prueba una segunda anchura. Si aparece otra debilidad de layout, regístrala por separado. Una reparación clara debe explicar por qué fallaba el resultado y qué ha cambiado. Agrandar todos los elementos hasta equilibrar una captura no establece una regla fiable para el contenedor ni ayuda a mantenerlo después.

Usa una pantalla de EmviUI para revisar límites

El espécimen de acceso de EmviUI que aparece a continuación sirve como ejercicio visual: la tarjeta, la región de ilustración y la página completa tienen extensiones diferentes. Identifica cada región antes de inspeccionar las capas correspondientes de tu archivo. La imagen demuestra composición, pero no revela jerarquía, recorte ni configuración de exportación.

El catálogo actual de EmviUI ofrece componentes de Figma como inputs, botones y tarjetas que aportan contenido realista a una página de diagnóstico. Utiliza componentes aprobados al comprobar etiquetas largas. El texto ilustrativo y la decoración de la captura no prueban la existencia de un servicio de acceso ni resultados del producto. Inspecciona el archivo real antes de afirmar cómo se comporta internamente su layout.

Como ejercicio concreto, conserva la tarjeta y dibuja en el duplicado el límite previsto de la página. Compara tres selecciones: tarjeta, región de ilustración y página exterior. Predice qué debería incluir cada exportación y revisa su previsualización. Esta comparación ayuda a detectar que has elegido un contenedor hijo en lugar del entregable completo. Consulta el recorrido de diseño web adaptable en Figma cuando quieras desarrollar una página a partir de la estructura corregida.

Sustituye el texto de apoyo del formulario por un mensaje realista más largo y repite la comprobación de límites. Resulta más informativo que utilizar únicamente las etiquetas cortas originales. Anota el contenido que cruza el borde y decide si la tarjeta debe crecer o si hace falta otro ajuste. No deduzcas un fallo concreto de la imagen del repositorio: es un espécimen de referencia, no una captura de un archivo de Figma averiado.

Previsualiza el objetivo exacto de exportación

Cuando el lienzo se ve bien pero el archivo no, examina el objeto seleccionado y su configuración de exportación. El frame de página, una tarjeta anidada y un slice pueden representar regiones de salida distintas. Elige el objeto que corresponde al entregable antes de alterar el diseño para compensar una selección equivocada.

La guía de exportación estática documenta la exportación de objetos seleccionados y el uso de slices para regiones definidas. También explica la previsualización. Selecciona un único objetivo, abre la vista previa y compara los bordes con el resultado esperado. Para una captura de handoff, acuerda si el entregable incluye la página completa, un panel o una región recortada específica; no des por hecho que todos esperan el mismo contenido.

Comprueba escala y formato por separado de la composición. La guía de formatos y ajustes de exportación explica multiplicadores y tamaños de salida con anchura o altura fija. Como ejemplo aritmético, un objetivo raster de 800 píxeles de anchura a 2x produce 1.600 píxeles de salida. Aumentar la resolución no corrige una región seleccionada incorrectamente. Guarda las dimensiones y el nombre del archivo de prueba para que otra persona pueda repetir la comprobación.

Abre el archivo exportado después de revisar la previsualización. Comprueba dimensiones en píxeles, contenido y fondo previsto en un visor de imágenes. Un archivo nítido también puede tener un recorte equivocado. Si el problema aparece únicamente en la aplicación de destino, compara su tamaño de visualización con las dimensiones del recurso antes de volver a editar el frame. Distingue la geometría del origen del comportamiento de presentación posterior.

Cierra la reparación con una prueba reproducible

Un registro útil contiene el frame afectado, el síntoma original, la propiedad o relación modificada y el resultado de verificación. Por ejemplo: «La ilustración era hermana de Página de acceso. Ahora pertenece a esa página y su vista previa incluye formulario e ilustración». La frase describe una causa concreta y un resultado que otro diseñador puede comprobar.

Si el problema solo ocurre al desplazar el prototipo, registra esa diferencia y continúa con el diagnóstico de posición y scroll. El recorrido de este artículo establece geometría, pertenencia, límites visibles y selección de exportación. Termina repitiendo la reproducción original y confirma que ahora produce el resultado esperado. Conserva la copia de trabajo hasta que la persona que revise la reparación pueda repetir la verificación por sí misma.