Las sobrescrituras son una característica poderosa en Framer que te permite modificar y controlar componentes en tiempo de ejecución. En esta publicación del blog, exploraremos cómo usar sobrescrituras para crear tarjetas de precios sincronizadas que actualizan el precio y el estado activado cada vez que alternas una de las tarjetas.

Configurando el Proyecto

Necesitamos una configuración básica del proyecto con un interruptor con dos estados: Apagar y Encender. Usaremos sobrescrituras para conectar estos interruptores y actualizar el precio y el estado activado. Seleccionamos los tres interruptores y agregamos un nuevo archivo con una nueva Sobrescritura.

Creando Sobrescrituras en Framer

Hay unos pocos pasos sencillos para configurar una sobrescritura. Primero, necesitamos un almacén para hacer un seguimiento de un valor específico. En nuestro caso, eso es un booleano llamado anual. Cuando alternamos una de las tarjetas de precios, el valor se actualiza y el precio y los interruptores van al estado correcto en función de este booleano.

A continuación, escribimos una sobrescritura withToggle que recibe un Componente del lienzo y devuelve un componente React con el componente del lienzo que se pasó y las propiedades actualizadas. En este caso, simplemente estamos devolviendo las propiedades que ya obtenemos de Framer. Si aplicamos esta sobrescritura, aún no hará nada.

Actualizando la Variante

Para hacer que la sobrescritura funcione, necesitamos establecer la variante en función del valor actual en nuestro almacén y actualizar el valor cada vez que hacemos clic en nuestros componentes. Escribimos una lógica para establecer la variante correcta y un controlador onClick que establece el almacén en lo que sea el opuesto de su valor actual.

También podemos actualizar cualquier otra propiedad que tengan los componentes, por ejemplo, su texto. Cada vez que hacemos clic en el componente, podemos actualizar el texto para reflejar los precios anuales o mensuales.

Construyendo Tarjetas de Precios Sincronizadas Geniales

Con estas dos técnicas, podemos construir tarjetas de precios sincronizadas que animan entre dos números. Podemos establecer el número en el lienzo como propiedades; cada vez que alternamos estos, hay una bonita transición entre los dos.

Si queremos, podemos hacer algunas búsquedas y mostrar precios localizados para nuestros productos mientras seguimos utilizando el poder de las animaciones dentro de los componentes.