Corregir un componente en Figma: origen y actualizaciones

Para corregir un componente en Figma, identifica primero si has seleccionado el componente principal, una instancia vinculada o un frame separado. Compara el objeto afectado con una instancia nueva del origen previsto. Después corrige el origen, restablece solo el cambio no deseado, revisa la actualización de biblioteca o sustituye el objeto separado según lo que demuestre la comparación.

Esta guía sigue una alerta ficticia cuyo control de cierre no coincide con el diseño esperado. Las muestras, el registro de reparación y las comprobaciones son recomendaciones. Sirven para aislar la identidad del origen y la entrega de actualizaciones, sin asumir que toda diferencia visual sea un defecto de Figma.

Identifica el objeto y su origen

Selecciona el objeto exterior que parece incorrecto y describe un fallo observable: «El control para cerrar esta alerta conserva el borde anterior». Evita empezar por «el componente está roto». Esa frase puede referirse a un cambio local inesperado, un origen diferente, una publicación pendiente o un frame que ya no mantiene ninguna conexión con el componente.

Anota el tipo de objeto seleccionado, el nombre del componente y su archivo de origen. Utiliza la navegación al componente principal en lugar de buscar únicamente por la etiqueta visible. Dos controles llamados Alert pueden pertenecer a bibliotecas distintas. Esta primera comprobación debe demostrar qué origen estás inspeccionando antes de modificar un recurso compartido.

Figma explica cómo localizar y editar un componente principal. Las instancias locales y las situadas en otros archivos siguen rutas de actualización diferentes. Deja constancia de esa distinción. Si el principal está en el mismo archivo, investiga allí la relación; si vive en otro, incorpora ese archivo de biblioteca a la reproducción.

Inspecciona un control anidado por separado. Una alerta puede contener una instancia del botón de cierre que, a su vez, contiene un icono. Seleccionar la alerta no demuestra cuál de esos orígenes controla el dibujo del icono. Identifica la capa concreta y la propiedad que debería cambiar; después navega desde esa selección.

Para el ejercicio propuesto, coloca juntos tres elementos: la instancia afectada, una instancia recién insertada desde el origen previsto y una captura del resultado inicial. Identifícalos claramente. Trabaja en una zona de prueba duplicada para que las observaciones sigan siendo comprensibles cuando otra persona abra el archivo más adelante.

Compara una instancia nueva antes de restablecer

Una instancia nueva sirve como muestra de control. Insértala desde el origen que acabas de verificar, aplica las mismas propiedades públicas previstas y compara el detalle que falla. Si la muestra nueva funciona y la anterior presenta diferencias, investiga primero los cambios de la instancia antigua antes de rediseñar el componente principal.

Figma permite restablecer una propiedad modificada concreta o los cambios de la selección. Elige ese alcance de forma deliberada. Si el borde es incorrecto pero la alerta contiene texto de producto cuidadosamente redactado, prueba primero a restablecer el borde en una copia. Un restablecimiento general puede eliminar personalizaciones válidas junto con la diferencia no deseada.

Escribe las expectativas antes de restablecer nada: el borde debe coincidir con la muestra nueva, el mensaje personalizado debe permanecer y el control de cierre debe conservar su visibilidad prevista. Compara el resultado con las tres condiciones. Igualar el color borrando el contenido real del usuario no superaría esta prueba de reparación.

Mantén el componente principal sin cambios durante la comparación. De lo contrario, el experimento tendrá dos variables y no sabrás si funcionó el restablecimiento o la modificación del origen. Si la muestra recién insertada también es incorrecta, vuelve al principal y revisa su diseño real en lugar de borrar repetidamente los cambios de la instancia consumidora.

Si el problema afecta a variantes elegidas, propiedades expuestas o contenido conservado al cambiar de variante, continúa con la guía para resolver conflictos de variantes y overrides. Aquí nos centramos en la identidad del objeto y la entrega de actualizaciones. Una variante equivocada merece una hipótesis propia, no una reparación automática idéntica para todas las instancias.

Sigue la ruta de actualización de la biblioteca

Que el archivo de origen sea correcto no demuestra que otro archivo haya recibido la revisión prevista. Sigue una ruta pequeña: cambio en origen, publicación, revisión en el consumidor e instancia afectada. Anota la diferencia visible esperada en cada paso. Así distinguirás una actualización sin publicar de una personalización local que permanece después de actualizar.

Publicar una biblioteca pone sus cambios a disposición de otros archivos; el archivo receptor puede revisarlos y aceptarlos. Comprueba el componente concreto en la lista de cambios. No deduzcas que la alerta se publicó porque una biblioteca con el mismo nombre tuvo actividad reciente o porque otro componente sí cambió correctamente.

Utiliza una nota de publicación propuesta como «Alert: ajustar el borde del cierre; conservar las elecciones de mensaje e icono». Facilita más el diagnóstico que «Limpieza de interfaz», porque identifica el recurso y el efecto esperado. Si no puedes editar o inspeccionar el origen, pregunta a su responsable qué publicación contiene la corrección.

En el archivo consumidor, compara otra vez el objeto afectado y la muestra nueva después de revisar la actualización correspondiente. Registra qué cambió, qué permaneció local y si el resultado coincide con lo previsto. Revisa por separado el contenido oculto cuando importe: la comparación de actualizaciones de Figma no permite ver los cambios de capas ocultas.

Si el origen es correcto y has confirmado la entrega, deja de tratar el problema como un retraso de publicación. Revisa la capa seleccionada, la identidad del origen y los cambios locales. Si solo falla el ancho o el salto de línea, consulta el recorrido de tamaños con Auto Layout. Publicar repetidamente no explica una regla de distribución que todavía no has inspeccionado.

Recupera componentes eliminados o separados

Un origen eliminado y una instancia separada requieren recuperaciones distintas. Primero comprueba si el objeto sigue siendo una instancia. Conserva una copia del contenido actual e identifica qué origen debería controlarlo. Así evitarás que una reconstrucción visual rápida oculte precisamente la relación ausente que intentabas reparar en el archivo.

Figma permite restaurar un componente principal eliminado desde una instancia existente. Utiliza la ruta documentada cuando se haya borrado el origen original. Comprueba el archivo original y qué se eliminó antes de crear otro componente de nombre parecido. Un duplicado visual no demuestra que los consumidores anteriores hayan recuperado su relación.

Separar una instancia la convierte en un frame normal y elimina el vínculo con el origen. Si fue la última acción accidental, deshazla. En otro caso, una recuperación práctica consiste en insertar una instancia nueva y transferir conscientemente el contenido y las elecciones admitidas. Compara la sustitución con el frame conservado antes de retirar la versión antigua de la pantalla de trabajo.

Convierte esa transferencia en una lista explícita: texto del mensaje, icono, visibilidad del cierre, tamaño y posición. Anota también cualquier contenido particular que el componente previsto no pueda representar. Ese último punto exige una decisión de su responsable; no justifica añadir capas ajenas de forma silenciosa y declarar que la relación ya está restaurada.

Si hubo un traslado deliberado entre bibliotecas, sigue el procedimiento de Figma para mover componentes publicados. No apliques la receta de un origen eliminado a una migración completada. Averigua qué biblioteca debe suministrar ahora el objeto y comprueba que el consumidor apunte allí. La recuperación debe establecer la propiedad prevista, no limitarse a hacer reaparecer el origen anterior.

Inspecciona un ejemplo real de alertas

El ejemplo real de alertas y toasts de EmviUI que aparece debajo ayuda a preparar una comparación controlada. Muestra filas de mensajes, iconos iniciales, controles de cierre al final y varios tratamientos cromáticos. Esas partes visibles ofrecen objetivos concretos de inspección, sin fingir que la imagen revele las conexiones internas de Figma o el estado de publicación.

El catálogo de componentes de EmviUI ofrece bloques de interfaz para Figma, incluidas alertas y controles. En este ejercicio, elige un tratamiento de alerta como punto de partida visual y personaliza el mensaje en tu diseño de trabajo. Después registra qué aspectos son contenido del producto y cuáles deberían seguir gobernados por el componente reutilizable.

Por ejemplo, escribe «Exportación terminada» como mensaje local y conserva el icono y la acción final adecuados para tu alerta. Si una actualización posterior cambia un borde, la comparación debe revisar tanto ese borde como el mensaje conservado. No utilices tratamientos de alerta distintos como prueba de avería: la variación puede ser completamente intencionada.

La captura no demuestra si un elemento está separado, si se aceptó una actualización o si un control funciona con teclado en una aplicación. Inspecciona el objeto de diseño real para responder a las dos primeras preguntas. Revisa el producto implementado para comprobar su comportamiento. EmviUI aporta una referencia de diseño; no inspecciona tu archivo ni repara vínculos automáticamente.

Para decidir si una apariencia puntual debería convertirse en una capacidad reutilizable, consulta la guía sobre alcance de kits y sistemas de diseño. Mantén acotada esta reparación: recupera primero una relación conocida. Debate los cambios amplios del componente por separado para que una corrección urgente no se convierta en un rediseño de biblioteca sin documentar.

Corrige una causa y conserva las pruebas

Elige la acción mínima respaldada por tus observaciones. Un consumidor desactualizado necesita revisar la actualización; un cambio local no deseado requiere un restablecimiento acotado; un origen mal editado necesita corregirse allí. Un frame separado exige planificar la sustitución. Anota la acción y el resultado esperado antes de aplicarlos a la pantalla de trabajo.

Utiliza la tabla de diagnóstico propuesta como registro, no como motor de reglas automáticas. Una instancia nueva aporta evidencia dentro del archivo y de la revisión que has probado. No demuestra que todos los consumidores tengan el mismo problema. Si la observación es ambigua, prepara una reproducción más pequeña antes de tocar la biblioteca compartida.

Conserva el estado inicial hasta verificar la reparación. Coloca el mensaje original junto al sustituto y compara el contenido línea por línea. Revisa el control anidado de manera independiente. Una alerta puede recuperar la apariencia exterior correcta mientras su icono sigue llegando de un origen no previsto. La primera comparación satisfactoria no cierra todas las dependencias.

Escribe una nota breve con enlace al origen, propiedad afectada, acción y resultado. Figma admite descripciones de componentes y enlaces a documentación externa. Añade allí orientaciones de uso duraderas cuando corresponda y conserva las observaciones del incidente en el registro de reparación del equipo. Quien vuelva al componente debe entender qué personalizaciones siguen siendo intencionadas.

Si las mismas pruebas producen resultados inconsistentes, prepara un archivo mínimo y una secuencia corta para soporte o para la persona responsable de la biblioteca. Incluye la instancia afectada, la muestra nueva, las limitaciones de acceso y la última actualización revisada. Retira el material ajeno al problema: una reproducción precisa ofrece algo observable que investigar.

Verifica la siguiente actualización y la apariencia

Termina comprobando el mantenimiento futuro. En una zona de prueba controlada, acuerda con el responsable un pequeño cambio reversible en origen y observa su recorrido hasta un consumidor. Confirma que se actualiza la propiedad prevista y que el contenido local sigue siendo adecuado. Revierte después el cambio de prueba. Es un ejercicio propuesto, no una exigencia de modificar una biblioteca de producción.

Utiliza dos longitudes de mensaje y examina la pantalla que rodea al componente. Recuperar la relación puede dejar al descubierto un problema de espaciado que ya existía cuando llega el diseño correcto. Revisa juntos el mensaje largo, el control final y la vista estrecha. Registra los fallos de salto de línea por separado para distinguir los resultados.

Vuelve a probar cada objeto sustituido, en lugar de comprobar únicamente la primera alerta reparada. Verifica el nombre y archivo del origen previsto, el texto personalizado, los controles visibles y el resultado de actualizar. Explicita las excepciones. Un frame conservado intencionadamente como ilustración tiene necesidades diferentes de una alerta que debe seguir recibiendo cambios compartidos.

Un cierre útil diría: «La instancia usa el origen previsto, el borde coincide con el diseño publicado y permanece el mensaje personalizado de exportación». Añade cualquier trabajo pendiente de distribución o implementación. Esa frase se puede revisar y explica mucho más que «Figma arreglado». Guarda los enlaces al origen con el registro para que la siguiente actualización parta de pruebas conocidas.