Construyendo un Componente de Navegación con Variables

La navegación es clave dentro de cualquier interfaz digital. Los Componentes Inteligentes nos permiten crear componentes de navegación interactivos personalizados que funcionan perfectamente con el resto de su prototipo. En esta guía, cubriremos los conceptos de anidación de componentes, la adición de eventos a elementos en un componente utilizando Variables de Evento, y cómo pasar estos a través de sus componentes. Uno de los principales beneficios de utilizar componentes anidados es que proporciona un control total sobre sus estados, como los estados de hover únicos de los elementos dentro de otro componente.

Comenzando a nivel atómico

Framer te permite crear componentes totalmente interactivos y animados, e incluso te permite anidar componentes dentro de otros componentes. Estamos construyendo un componente de barra de navegación para un sitio web que contendrá dos tipos diferentes de componentes anidados, con sus propias interacciones únicas. Nuestro proyecto contendrá una barra de navegación que incluye varios componentes anidados, a saber, cinco elementos de navegación y un componente de carrito de compras. El diseño de nuestros componentes anidados, el elemento de lista de navegación y el carrito de compras, impactará en cómo diseñamos nuestra barra de navegación. Por esta razón, un flujo de trabajo óptimo incluye comenzar con el componente anidado 'más profundo' y construir a partir de allí.

Anidación de componentes

Una vez que tengamos nuestros dos componentes listos, podemos comenzar a crear el componente en el que anidaremos estos. Dibuja tu barra de navegación, seleccionala en el lienzo y haz clic en la herramienta Componente en la Barra de herramientas. Para anidar un componente diferente en nuestro nuevo componente, simplemente arrastra cualquier otro componente al Lienzo del Componente y colócalo dentro de tu barra de navegación diseñada.

Activando interacciones desde la barra de navegación

Volviendo al lienzo principal, nos gustaría poder tocar 'Ropa' y navegar a una pantalla completamente nueva. Si conectaras el componente utilizando el Conector de Prototipado a una nueva pantalla, podríamos configurar una Interacción. Sin embargo, esto se activaría si tocamos en cualquier lugar dentro de nuestro componente. Esto no es lo que queremos hacer, ya que queremos activar esta transición solo desde un elemento específico. Aquí es donde entran las Variables de Evento, que son tipos especiales de Variables no adjuntas a propiedades (como opacidad o relleno) sino a eventos.