Maximizar espacios: consejos para apartamentos pequeños

La navegación es clave en cualquier interfaz digital. Los componentes inteligentes nos permiten crear componentes de navegación interactivos personalizados que se integran a la perfección con el resto de tu prototipo. En esta guía, abordaremos los conceptos de anidación de componentes, la adición de eventos a los elementos de un componente mediante variables de evento y su transmisión a través de los componentes. Una de las principales ventajas de usar componentes anidados es que proporciona un control total sobre sus estados, como los estados únicos al pasar el cursor sobre los elementos dentro de otro componente.

Comenzando desde el nivel atómico

Framer permite crear componentes totalmente interactivos y animados, e incluso 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: cinco elementos de navegación y un componente de carrito de compra. El diseño de nuestros componentes anidados, el elemento de lista de navegación y el carrito de compra, influirá en el diseño de nuestra barra de navegación. Por esta razón, un flujo de trabajo óptimo incluye comenzar con el componente anidado más profundo y desarrollar a partir de ahí.

Anidación de componentes

Una vez que tengamos los dos componentes listos, podemos empezar a crear el componente en el que los anidaremos. Dibuje la barra de navegación, selecciónela en el lienzo y haga clic en la herramienta Componente de la barra de herramientas. Para anidar un componente diferente en nuestro nuevo componente, simplemente arrastre cualquier otro componente al lienzo del componente y colóquelo dentro de la barra de navegación diseñada.

Activación de interacciones desde la barra de navegación

De vuelta en el lienzo principal, queremos poder tocar "Ropa" y navegar a una pantalla completamente nueva. Si conectamos el componente mediante el Conector de Prototipos a una nueva pantalla, podríamos configurar una interacción. Sin embargo, esta se activaría al tocar cualquier parte del 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 en juego las variables de evento, que son tipos especiales de variables que no están asociadas a propiedades (como la opacidad o el relleno), sino a eventos.