INTRODUCCIÓN
Cuando se habla de componentes, la mayoría de la gente suele pensar en diseñar un elemento una vez y luego reutilizarlo en todo el sitio web.
Un botón, por ejemplo. Usted lo diseña una vez y luego lo coloca varias veces en su sitio web. ¿Y si quieres otro color? ¿O quiere enlazar con otra página? ¿O tal vez quieras cambiar la copia?
¿Hay que crear otro componente muy similar, o hay una forma mejor? Lo has adivinado: Framer ofrece una forma más inteligente de abordar el problema.
En este tutorial, te mostraré paso a paso cómo puedes utilizar variables para crear un componente reutilizable – en nuestro ejemplo, un botón.
Si eres nuevo en Framer, no te preocupes; este tutorial es totalmente apto para principiantes.
Empecemos.
1. DISEÑAR EL COMPONENTE
El primer paso es diseñar el botón y convertirlo en un componente. Para simplificar, ya he creado un simple botón con una animación hover.
Ahora mismo, el componente funciona como se espera. Puedes colocarlo donde quieras, y en cuanto hagas una edición, todas las instancias de ese componente lo reflejarán.
Pero, ¿y si quiero tener una versión que diga «Descarga gratuita» y otra que diga «Ponte en contacto» y redirigir a los usuarios a enlaces diferentes? Aquí es donde entran en juego las variables.
2. AÑADIR VARIABLES
Las variables son como ajustes que personalizan una instancia específica del componente, no todas las instancias. En nuestro caso, el diseño del botón seguirá siendo el mismo, pero queremos que las distintas instancias tengan textos y enlaces diferentes.
Cada vez que crees una variable para un componente, tendrás que seguir estos dos sencillos pasos:
- Creación de la variable.
- Asignación de la variable.
Repasemos rápidamente cada uno de ellos.
2.1 CREACIÓN DE LA VARIABLE
El primer paso es crear la variable. Para ello, haga clic en el botón «variables» de la barra superior y, a continuación, en el pequeño botón «+».
Verás un montón de opciones diferentes. Para nuestro ejemplo, necesitamos crear una variable para la copia del botón y una variable para el enlace al que queremos redirigir a los usuarios cuando hagan clic.
Así que vamos a crear un campo «texto plano» y otro «enlace».
2.2 ASIGNACIÓN DE LA VARIABLE
Ahora que tenemos nuestras variables, queremos decirle a Framer por qué las hemos creado.
Si te fijas en la barra lateral derecha, verás que la mayoría de los campos tienen un pequeño botón «+» al lado. Ese botón le permite asignar una variable a ese campo.
En nuestro ejemplo, primero seleccionaremos el texto y luego, en la barra lateral derecha, haremos clic en «contenido» > «establecer variable» > «texto». A continuación, repetiremos este proceso con todo el botón para asignar el enlace.
3. CREAR INSTANCIAS DEL COMPONENTE
Ahora nuestro componente reutilizable está listo para ser utilizado. Vamos a crear dos instancias. Si lo has hecho todo bien, los dos botones deberían ser exactamente iguales.
Si ahora seleccionas uno de los dos botones, verás que en la parte inferior de la barra lateral derecha hay una sección «componente» que te permite asignar un valor a las dos variables que has creado previamente.
Y ¡voilà! Ahora dispone de un componente reutilizable que puede personalizar con el texto o enlace que desee.
CONCLUSIÓN
Las variables de componente son una potente característica de Framer, ya que permiten realizar pequeñas personalizaciones en instancias individuales de un componente.
Si te perdiste en algún momento de la realización de este proyecto, aquí tienes un enlace de remezcla gratuito para copiar el proyecto terminado en tu espacio de trabajo de Framer.
ESCRITO POR
Luca Da Corte es un experto freelance en Framer y especialista en SEO. Cuando no está trabajando en proyectos apasionantes, dirige un blog en el que comparte ideas, recursos y experiencias sobre todo lo relacionado con los sitios web.
Deja una respuesta