Use Framer X para construir prototipos interactivos

Sep 17, 2025

Cómo

[dieciséis] (Crédito de la imagen: Framer)

Como diseñadores, siempre existe la pregunta de las herramientas de prototipos que debe usar para su proyecto. Hay un montón de software para las tareas como WireFraming (vea nuestra parte superior Herramientas de arrastre de alambre y excelente Constructores de sitios web ), prototipando y construyendo interacciones complejas; Sin embargo, muy pocas herramientas son capaces de manejar todas estas. Framer es una herramienta que tiene todas estas funciones y acelera en gran medida el proceso de creación de pequeñas animaciones e interacciones.

La última iteración, Framer X , ahora utiliza reaccionar y javascript en lugar de usar el coffeescript para desarrollar micro-interacciones y animaciones. Esto ayuda a entregar tiempos de carga más rápidos y un mejor rendimiento. Además, el uso de componentes de reacción significa que los usuarios tienen más alcance para agregar y extender, incluida la incorporación de reproductores de medios, datos en tiempo real y gráficos dentro de prototipos.

Las pruebas son una parte central del proceso de construcción del prototipo y, mientras que Framer X es excelente para crear prototipos interactivos, necesita ayuda para ver qué tan buenas son sus creaciones. Echa un vistazo a nuestro Pruebas de usuario Publique para algunas de las mejores herramientas para complementar el Framer y ayudar a construir prototipos del mundo real, y asegúrese de que está usando lo mejor Alojamiento web Servicio para usted.

Cómo crear una aplicación con Framer X

Para apreciar plenamente el poder de Framer X, vamos a crear un proyecto de la vida real: una aplicación simple de recetas de cocina con algunos contenidos y medios (activos que están respaldados en fiable almacenamiento en la nube ). Lo primero que se debe construir es la página de inicio. Mantendremos las cosas simples con los siguientes elementos:

Barra de búsqueda estándar para encontrar recetas
Actividad reciente para mostrar las últimas recetas vistas.
Tarjetas de recetas que muestran cosas como las recetas más populares.
Creación de una vista detallada de la receta con opciones de video y vídeo.

Para comenzar, debe crear un nuevo marco (un tablero de arte) haciendo clic en el icono + en la barra de navegación izquierda. Seleccione cualquier estilo de arte de una lista de plantillas estándar de iPhone / Android en la barra derecha. Ahora estás listo para ir.

01. Construir una barra de búsqueda

Comencemos por construir la barra de búsqueda. En lugar de crear un rectángulo y agregar un ícono de búsqueda como lo haríamos normalmente, podemos usar componentes reutilizables rápidos en Framer X, estos se denominan paquetes. Hay miles de paquetes que se pueden encontrar en la barra de navegación izquierda en la tienda. Haga clic en la tienda, busque el kit de Android y el equipo de ejemplo y luego instale.

Estos paquetes contienen elementos como tarjetas, botones, teclados, deslizadores, entradas y elementos de menú de navegación. Una vez que instale estos paquetes, puede usar los elementos del menú Componentes a la izquierda.

Encuentre los elementos que desea buscar en el filtro, en este caso una barra de búsqueda, que se encuentra en Ejemplos del kit. Simplemente arrastre y suelte sobre el marco. Ahora puede modificar propiedades, como texto de marcador de posición, tamaño de fuente y color utilizando la barra derecha.

02. Crea una pila de contenido

Para este bloque de actividad reciente, primero agregue el texto 'Actividad reciente', que es bastante sencilla. Ahora podemos usar una nueva característica de Framer X llamadas pilas. Esto se puede hacer haciendo clic en el icono + y seleccionando STACK S desde el menú. Después de seleccionar la pila, arrastre y suelte un área de 600 x 300 en el marco de trabajo para crear una pila. Esta pila se mostrará como azul.

Ahora vamos a volver a la sección de los componentes y bajo el kit de Android, busque el elemento de la tarjeta-5 y arrástrelo a la pila que acabamos de crear. Duplica estas tarjetas dos veces y asegúrate de que todas las tres cartas estén en la pila.

Mientras estén en la pila, estas tres cartas se pueden reorganizar fácilmente sin que tenga que preocuparse por el espaciado. Si desea aumentar el espaciado entre las tarjetas, puede aumentar el ancho de toda la pila. Es tan simple como eso. También puede personalizar estas tarjetas cambiando el nombre del título y el fondo de acuerdo con su gusto.

Ahora que hemos creado una pila, vamos a hacerlo desplazable. Sácalo fuera del marco / artboard. Haga clic en el icono + desde la navegación izquierda y haga clic en la opción de desplazamiento. Al igual que creamos un área con la pila, cree un área desplazable en el marco / artboard que es del mismo tamaño que la pila.

Ahora cambie la propiedad del desplazamiento en la barra derecha cambiando las flechas de dirección para que sea un desplazamiento horizontal. Después de que nuestro contenedor de desplazamiento se crea, necesitamos contenido para ello, que es servido por la pila que creamos anteriormente. Por lo tanto, simplemente conecte el contenedor de desplazamiento a la pila con el indicador de flecha en el contenedor de desplazamiento. Funciona arrastrando el puntero del mouse a la pila.

03. Crea una pila vertical.

Para las tarjetas de recetas, debe seguir un método similar al Paso 2, pero en lugar de crear un desplazamiento horizontal de tarjetas, creará una vertical similar que es esencialmente una lista de las recetas más populares con miniaturas. Para este ejercicio, cada tarjeta para una receta tiene cuatro elementos: una imagen en miniatura de imagen, calificación, nombre de la receta y tiempo necesario para prepararlo.

No se preocupe por los detalles de cada tarjeta. Pueden ser personalizados en función de su gusto de diseño. Siga el mismo método de usar una tarjeta de los componentes, duplicando y agregándolos a una pila con desplazamiento vertical.

04. Crea una nueva página.

Ahora vamos a crear una nueva página para entrar en los detalles de una receta en particular. Por ejemplo, tomemos el caso de la segunda tarjeta aquí: Pasta francesa. Para crear esta nueva página, cree un nuevo marco / artboard e introduzca los elementos que necesitamos para mostrar más detalles sobre la receta de pasta francesa. Esta nueva página se puede dividir en un video, un título, la calificación, el tiempo necesario para hacerlo y algunos botones de acción, como guardar en la lista y compartir en las redes sociales.

Para agregar video, vaya a la tienda e instale el paquete de YouTube, lo que le permite agregar fácilmente videos a su prototipo. Ahora vaya a su panel de componentes y arrastre y suelte el elemento de YouTube desde debajo del componente de YouTube hasta el marco.

Ajuste el ancho de la miniatura para que se ajuste al ancho del marco. En el panel Propiedades correctos, puede insertar la URL del video que desea reproducir en el prototipo. Si lo desea, también hay una manera de reproducir videos a través de la casilla de verificación en el panel Propiedades.

Debajo de este video, puede agregar el título, la calificación y varios iconos. Para agregar iconos por ejemplo, hice uso del componente de la tienda del generador de iconos. Es un proceso fácil: simplemente arrastre y suelte el icono de la base en el marco y luego cambie la propiedad llamada Icono en el panel del lado derecho a 'corazón' y 'Share'. Esto cambiará los iconos de base en los iconos Guardar y compartir, respectivamente. Sus colores también se pueden cambiar fácilmente utilizando el panel derecho.

Para facilitar las cosas para los visitantes, puede agregar una sección llamada ingredientes, que enumeran todos los ingredientes necesarios para nuestra receta, en este caso, pasta francesa.

05. introducir interacciones

Ahora hagamos que nuestro diseño sea más atractivo agregando interacciones para un botón. Idealmente, cuando hace clic en el icono Compartir, se le debe solicitar una pantalla para compartir la receta en varios canales de redes sociales. Vamos a construir eso usando un nuevo marco.

Asegúrese de que el ancho y la altura de este marco tengan el mismo ancho y altura que los otros dos marcos que creamos. La idea es que esta nueva pantalla de Compartir se deslice y reemplace la pantalla actual cuando se haga clic en el icono de Compartir.

Para ayudar a que la pantalla sea distinta, agreguemos un poco de color y llévelo con los iconos de las redes sociales, como Facebook, Instagram, WhatsApp y correo electrónico. Esta pantalla de Compartir también debe tener un ícono X agregado a él, que cuando se hace clic lo devolviera al estado original.

Asegúrese de que todos los iconos estén dispuestos dentro de una pila. Tan pronto como se incluye el ícono X, el siguiente paso es enlazar este cuadro para que aparezca cuando haga clic en el icono de Compartir.

Para hacer esto, seleccione el marco que contiene el icono de Compartir. En el panel del lado derecho, hay una propiedad llamada enlace. Una vez que haga clic en eso, la interfaz de la aplicación le proporcionará una flecha que puede arrastrar al nuevo marco de acciones que creamos. Esto creará un enlace en el fondo.

Ahora, cuando selecciona el icono Compartir, observará las nuevas propiedades en el panel de lado derecho en el enlace, que son objetivo, transición y dirección. Cada una de estas propiedades le permite cambiar los elementos, como el tipo de transiciones y la dirección en la que debe aparecer la pantalla, etc.

Puede probar si el prototipo está funcionando o no, al hacer clic en el icono de reproducción que se encuentra en la esquina superior derecha de la interfaz. De manera similar, debe vincular la pantalla Compartir en la pantalla de video para que cuando el usuario haga clic en el ícono X, vuelve a la pantalla anterior.

Esto se puede lograr utilizando una propiedad de enlace similar y agregando el objetivo como la pantalla de video. Si desea ir a agregar un poco de variación, puede hacer que la dirección que quede en lugar de arriba y luego use el comando PLAY para probar si la interacción está funcionando o no.

06. Añadir un botón Guardar

Ahora vamos a agregar una interacción de superposición al icono Guardar. Aquí, nuestro objetivo es que cada vez que un visitante hace clic en el icono en forma de corazón, debería aparecer una ventana emergente que le pregunta si desea guardar la receta en una lista hecha a medida.

Comencemos creando un nuevo marco llamado listas guardadas. Al igual que lo hizo con el anterior, asegúrese de que este marco tenga el mismo ancho, pero esta vez necesita reducir su altura porque aparecerá como una superposición al hacer clic. Para el estilo del marco de las listas guardadas, agregue un encabezado, una entrada de texto para ingresar el nombre de la lista y un botón que es un CTA para guardarlo.

Para vincular, seleccione el icono en forma de corazón en el marco de video y agregue un enlace al marco de las listas guardadas. Ahora, en lugar de la propiedad de transición es un empuje, conviértase en una superposición. Ajústelo al 80% y luego ponlo la prueba usando el botón Reproducir. Modifique hasta que esté satisfecho con la superposición. Vincule el icono X en el icono de listas guardadas Volver a la página de Video.

Así es como usar Framer X para crear fácilmente prototipos interactivos procesables. También hay herramientas avanzadas que puede usar, así como agregar reaccionar fragmentos de codificación a los elementos de los marcos. Además, la mejor parte de Framer X es que cualquiera puede dominarlo lo intentando en algunos prototipos.

Este artículo se publicó originalmente en el número 325 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emito 325 o suscribir a la red.

An image promoting GenerateJS on Thursday 2 April 2020 at Rich Mix, Shoreditch, London featuring Remy Sharp, Phil Hawksworth, Jeremy Keith and Nadieh Bremer.

Únase a nosotros en abril de 2020 con nuestra alineación de superestrellas JavaScript en GenerateJS: la conferencia lo ayuda a construir mejor JavaScript. Reserva ahora en generateconf.com

Leer más:

Cómo destacar y ser contratado como diseñador UX
Los 20 consejos de UX que necesitas saber.
22 mejores herramientas de diseño de UI

Use Framer X para construir prototipos interactivos

Cómo crear una aplicación con Framer X

01. Construir una barra de búsqueda

02. Crea una pila de contenido

03. Crea una pila vertical.

04. Crea una nueva página.

05. introducir interacciones

06. Añadir un botón Guardar

Cómo - Artículos más populares

Cómo crear interiores con Eevee de Blender

7 puntas principales para comenzar su propio negocio

Imagen de trabajo Mascarilla Magic con Houdini

Cómo dibujar rápidamente las manos

Cómo crear una aplicación de panel de control con reaccionar

Actualiza tus texturas en Diseñador de sustancias

Cómo crear mundos coloridos que cuentan una historia

Convierte tus diseños 2D en 3D con Project Felix

Categorías