Los componentes en Framer son una de las herramientas más poderosas para crear diseños consistentes y funcionales. Cuando trabajas con Framer, verás que todo lo que aparece en color violeta son componentes. Estos son elementos reutilizables que te permiten mantener la coherencia en todo tu proyecto y agregar interactividad de manera sencilla. En esta guía, te explicaremos todo lo que necesitas saber sobre cómo trabajar con componentes en Framer, desde su creación hasta cómo manejar sus variantes y animaciones.
¿Qué es un componente en Framer?
Un componente es un grupo de elementos que puedes crear y reutilizar dentro de tu proyecto. Al crear un componente, cualquier cambio que realices en él se reflejará automáticamente en todas las instancias de ese componente. Esto facilita la gestión de cambios a lo largo de todo el proyecto.
En framer los componentes son todos los elementos que aparecen de color violeta
Ventajas de usar componentes en Framer
• Consistencia: Los componentes aseguran que todos los elementos de tu sitio tengan el mismo diseño, colores y tipografía.
• Eficiencia: Puedes hacer cambios globales en todos los componentes de tu proyecto de forma rápida.
• Interactividad: Los componentes con variantes permiten agregar animaciones e interacciones sin necesidad de codificar.
Trabajar con componentes te permite crear proyectos más rápidos, escalables y fáciles de mantener, ya que todos los cambios se actualizan automáticamente.
Cómo crear un componente en Framer
Crear un componente en Framer es muy sencillo. Solo tienes que seguir estos pasos:
Selecciona los elementos que deseas convertir en componente. Esto puede ser cualquier cosa, desde botones hasta secciones completas de tu sitio.
Haz clic derecho sobre la selección y elige “Create Component”. También puedes usar el atajo de teclado Option + Cmd + K (en Mac) o Ctrl + K (en Windows).
Usa variantes y variables para sacarle el máximo provecho a tus componentes
Variantes de componentes: Desktop, Mobile y más
Los componentes en Framer pueden tener variantes para adaptarse a diferentes estados y tamaños de pantalla. Esto es útil, por ejemplo, cuando tienes un componente como una barra de navegación (navbar) que cambia según el dispositivo. Puedes crear variantes para cada estado, como:
• Navbar desktop
• Navbar mobile
• Navbar mobile open
Cómo crear variantes de un componente
Selecciona el componente que deseas modificar.
Haz click en el signo "+" a la derecha del componete para crear variantes
Cambia las propiedades de este nuevo componente (por ejemplo, cambia su tamaño o su disposición).
Las variantes te permiten mantener la consistencia en todo tu proyecto y tener un solo componente para diferentes versiones de un mismo elemento.
Conectar variantes para animaciones e interacciones
Una de las características más poderosas de los componentes en Framer es la capacidad de conectarlos entre sí para animaciones e interacciones. Esto permite crear transiciones suaves entre las variantes de un componente.
Ejemplo de interacción entre variantes:
Supongamos que tienes un botón con dos variantes:
• Normal
• Hover
Cuando un usuario pasa el mouse sobre el botón, la variante de hover debería activarse. Para hacerlo, sigue estos pasos:
Selecciona el botón y abre el panel de interacciones.
Crea una nueva interacción de hover y conéctala a la variante hover.
De esta manera, cuando el usuario pase el mouse, el botón cambiará automáticamente a su variante de hover.
Variantes presionadas (Pressed):
También puedes crear una variante de presionado (pressed) para los botones u otros elementos interactivos. La variante presionada es útil para agregar efectos visuales cuando el usuario hace clic en un componente.
Crea una variante “Pressed” del componente, similar a cómo creaste la variante de hover.
Asocia esta variante a una acción de clic o presionar.
Recuerda que el signo "+" hacia la derecha crea Variantes diferentes del mismo y el signo "+" crea opciones de Hover/Pressed
Accede a tu componente
Encuentra todos tus componentes en la ventana de "Assets" o recursos.
