Trabajar con Componentes e Instancias

Los componentes pueden ayudar a reducir errores, asegurar consistencia y ahorrar tiempo – al liberar a tu equipo del tedioso trabajo de sincronizar y actualizar.

Una vez que conviertes un objeto o grupo en un Componente, actúa como maestro para todas las copias – o Instancias – que se realicen a partir de ese componente.

Eso significa que cualquier formato que apliques al Componente se refleja inmediatamente en cada Instancia del proyecto.

Sin embargo, las instancias permanecen independientes del componente en sus Coordenadas (incluidas Voltear y Rotar) y Visibilidad. Esto significa que puedes reubicar u ocultar componentes sin afectar la posición o visibilidad de sus instancias.

En este artículo, te mostraremos cómo convertir cualquier objeto o grupo en un componente, crear instancias de ese componente, y demostraremos cómo editar tus componentes añadiendo o eliminando elementos.

Crear componentes e instancias

Crear un Componente

Para crear un Componente:

1. Selecciona cualquier objeto o grupo en la página.
2. Desde el botón de Componente en la Barra de Herramientas Superior, o la sección Componente del Menú Contextual del clic derecho, elige Crear Componente.
3. Una vez creados y seleccionados, los Componentes son identificables por su etiqueta, insignia y marco 'Componente' en morado; en el panel de Esquema, se identifican con un resaltado morado.

Crear una Instancia

Para crear una Instancia:

1. Haz una copia del Componente usando Ctrl/Cmd + D, la opción Duplicar en el Menú Contextual, o simplemente mantén presionado Alt/Opción y arrastra.
2. Puedes pegar la Instancia en cualquier página dentro del proyecto
3. Ahora, cambia el tamaño, texto, color u otros atributos de formato del Componente
4. Una vez completados los cambios, haz clic fuera del marco de objeto del Componente – y observa cómo los cambios se propagan a todas las Instancias dentro del proyecto.

Editar y añadir objetos a un componente

Los Componentes e Instancias – incluso los creados a partir de objetos individuales – se comportan como grupos.

Para editar cualquier componente o instancia:

1. Selecciónalo para ver el Marco de Objeto morado.
2. Luego, haz doble clic para que aparezca el Borde de Edición de Componente más grueso en morado.
3. Ahora, puedes...

• Hacer clic para editar
• Añadir un nuevo elemento desde la barra lateral izquierda
• Copiar y pegar un objeto desde la página misma

Anular instancias

A veces, puede que quieras personalizar un aspecto de una instancia individual – pero aún dejarla conectada y receptiva a su componente para otros cambios y actualizaciones. Por ejemplo, puede que quieras cambiar el color de un CTA en una página específica, pero aún quieras que ese botón se sincronice con su maestro para cualquier cambio futuro en tamaño y texto.

Por eso un cambio realizado localmente en cualquier instancia individual anula la capacidad del componente de cambiar ese atributo de formato específico (texto, color, desenfoque, esquinas redondeadas) en el futuro.

Las anulaciones aplicadas localmente no tienen efecto en otras instancias, ni en el Componente original. Esto permite que tu equipo sea consistente en diseño, pero aún receptivo al contexto de diseño particular de cada instancia.

Restablecer y desadjuntar instancias

Restablecer una Instancia

Si has realizado modificaciones locales y anulaciones en una instancia individual, pero luego decides eliminar esas anulaciones y volver a aplicar el estilo y las propiedades completas del componente, selecciona Restablecer Instancia.

Desadjuntar una Instancia

Si quieres convertir una instancia de nuevo en un objeto o grupo normal, simplemente selecciona Desadjuntar Instancia.

Localizar y restaurar componentes

Para organizar tus Componentes, puedes dejarlos en el contexto de un diseño – o crear una página separada donde todos tus componentes puedan residir, y fijar esa página en la parte superior del Panel de Páginas.

Pero, de vez en cuando, puede que aún quieras saltar a tu componente desde otro lugar de tu proyecto – por ejemplo, mientras trabajas en una de sus instancias.

Y, en caso de que elimines accidentalmente un componente, puede que necesites restaurarlo desde una de sus instancias.

Localizar un Componente

Si estás trabajando con una instancia y necesitas verificar – o ajustar – el componente en sí, simplemente haz clic en la instancia y selecciona Ir al Componente desde el menú. Sin importar dónde esté la instancia, saltarás directamente a la ubicación de su Componente dentro del proyecto.

Restaurar un Componente

Si, por alguna razón, eliminas un Componente y dejas instancias huérfanas, simplemente selecciona cualquiera de sus instancias y elige la opción Restaurar Componente. ¡El componente reaparecerá mágicamente! Ten en cuenta que esto funciona incluso para instancias con anulaciones – aún obtendrás el componente original de vuelta.