Cómo iniciar y desarrollar una carrera en diseño web
La navegación es clave en cualquier interfaz digital. Los componentes inteligentes nos permiten crear componentes de navegación interactivos personalizados que funcionan perfectamente con el resto de tu prototipo. En esta guía, abordaremos los conceptos de anidar componentes, añadir eventos a elementos de un componente utilizando variables de evento y pasarlos a través de tus componentes. Una de las principales ventajas de utilizar componentes anidados es que proporcionan un control total sobre sus estados, como los estados únicos al pasar el cursor por 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 creando 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 incluirá una barra de navegación con varios componentes anidados, concretamente cinco elementos de navegación y un componente de carrito de la compra. El diseño de nuestros componentes anidados, el elemento de la lista de navegación y el carrito de la compra, influirá en el diseño de nuestra barra de navegación. Por este motivo, un flujo de trabajo óptimo consiste en comenzar por el componente anidado «más profundo» y construir a partir de ahí.
Componentes anidados
Una vez que tengamos listos nuestros dos componentes, podemos empezar a crear el componente en el que los anidaremos. Dibuja tu barra de navegación, selecciónala en el lienzo y haz clic en la herramienta Componente de la barra de herramientas. Para anidar un componente diferente en nuestro nuevo componente, solo tienes que arrastrar cualquier otro componente al lienzo de componentes y colocarlo dentro de la barra de navegación que has diseñado.
Activación de interacciones desde la barra de navegación
De vuelta al lienzo principal, nos gustaría poder pulsar «Ropa» y navegar a una pantalla completamente nueva. Si conectáramos el componente mediante el conector de prototipos a una nueva pantalla, podríamos configurar una interacción. Sin embargo, esta se activaría si pulsáramos en cualquier lugar dentro de nuestro componente. Esto no es lo que queremos, ya que queremos activar esta transición solo desde un elemento específico. Aquí es donde entran en juego las variables de evento, que son tipos especiales de variables que no están vinculadas a propiedades (como la opacidad o el relleno), sino a eventos.
