Tutorial de Framer: Cómo crear impresionantes prototipos interactivos

Eche un vistazo a los prototipos de ejemplo a continuación. Estos fueron hechos en Framer. Después de este tutorial, podrá comenzar a crear sus propios impresionantes prototipos animados en muy poco tiempo.

Framer presentó su versión más reciente hace una semana y el mercado de creación de prototipos nunca volverá a ser el mismo. La herramienta de creación de prototipos Framer solía ser difícil de dominar pero útil como el software de creación de prototipos más preciso e ilimitado. Ahora, las cosas han cambiado. Framer ahora viene con funciones Design + Code + Collaborate, lo que significa que puede crear su prototipo directamente dentro de Framer, desarrollando un prototipo completamente funcional sin ningún software de terceros y sin ninguna habilidad de codificación.

Aquí, te enseñaré cómo usar el código Framer simple sin necesidad de conocimientos previos de codificación. Aprenderá a combinar las mejores características del modo de diseño y código en Framer para crear prototipos animados e interactivos. Así que pasemos a este tutorial y tomemos algunos fragmentos de código pequeños para mejorar sus prototipos.

Conceptos básicos del enmarcador

¡Empecemos! Simplemente vaya a framer.com y descargue una versión de prueba. Le están dando dos semanas de su demostración completamente funcional y créame, es tiempo suficiente para aprender mucho sobre este software de creación de prototipos.

Después de la instalación, es posible que desee revisar algunos de los ejemplos que proporcionan y jugar un poco con ellos. Cuando haya terminado, es hora de comenzar a crear prototipos.

(En este tutorial de Framer, me centraré en la creación de prototipos directamente en Framer.js. También debe saber que hay otras formas de comenzar a crear prototipos en Framer. Por ejemplo, puede trabajar directamente con archivos de Sketch. Cubriré ese flujo de trabajo en otro artículo.)

El nuevo Framer: modo de diseño

En este artículo, crearemos tres prototipos geniales en minutos con un uso mínimo de código: interacciones básicas, componente de desplazamiento y componente de página.

La versión más reciente de Framer tiene una gran característica nueva: el modo de diseño. Le permite trabajar casi de la misma manera que lo hace en Sketch o Figma. Puede crear capas vectoriales, importar imágenes o crear y aplicar estilo a capas de texto. Todo esto se vuelve muy útil cuando desea crear prototipos rápidamente sin aplicaciones de terceros.

Vamos a crear un diseño tipo aplicación

En la primera parte de este tutorial, prepararemos un área de juegos para nuestro prototipo de Framer. Crearemos un diseño tipo app, con tres tipos diferentes de capas: vectorial, de imagen y de texto.

Paso 1: crea un botón y un fondo simples.

Para comenzar su diseño, seleccione la primera pestaña, que es el modo de diseño, y agregue una mesa de trabajo, como en Sketch. En este tutorial, trabajaremos en un prototipo de iPhone 7, por lo que elegí este ajuste preestablecido como el tamaño de mi mesa de trabajo. También he agregado un relleno de fondo azul.

A continuación, seleccione la herramienta de rectángulo y cree una forma en forma de un simple botón redondo.

Paso 2: Agrega una tarjeta con una imagen.

El segundo método para agregar capas es la función de arrastrar y soltar . Puede seleccionar cualquier archivo de imagen de su computadora, soltarlo en Framer y diseñarlo usando la barra lateral derecha. Usé una ilustración simple y la diseñé como una tarjeta.

Paso 3: agregue un título de aplicación.

Framer también le permite agregar una capa de texto. Una vez más, el estilo es básicamente el mismo que en cualquier software gráfico. Puede elegir la fuente, el tamaño, la alineación, el espaciado entre letras y más.

Paso 4: Dile a Framer qué capas son interactivas.

Tenemos un paso más antes de comenzar con nuestro prototipo de Framer. Solo tenemos que decirle a Framer qué capas serán interactivas. Simplemente haga clic en el punto junto al nombre de la capa dentro del panel de capas. Es bueno nombrar cada capa correctamente para su uso posterior. Llamé a mi tarjeta de capas y al botón .

Paso 5 (Bonus): Defina sus colores globales.

Una buena práctica es definir algunas variables para todo el prototipo. Puede establecer la paleta de colores, la tipografía y las dimensiones básicas que usará desde el principio. Esto ayuda a ahorrar tiempo en el futuro.

Cuando esté configurando sus colores, simplemente nómbrelos en el editor de código y proporcione los valores HEX, RGB o RGBa después del signo "=" apropiado. Recuerde mantener todas las variables en la parte superior de su código.

 # variables ------------------------------- blue = "#005D99" green = "#3DBE8B" white = "#FFFFFF"

Paso 6 (Bonus): Agregar posición relativa.

Con el nuevo Framer, es muy fácil mantener la capacidad de respuesta de su prototipo. Puede establecer posiciones relativas desde el modo de diseño , como se muestra a continuación:

Aquí hay una breve lista de propiedades que son útiles para alinear y calcular la posición de la capa directamente en el código. Puede hacer los cálculos necesarios para calcular las posiciones de las capas. Esto se vuelve necesario cuando agrega interacciones más adelante y desea mantener su prototipo receptivo.

 # This is how you can align layer position: x: Align.center(0) # align layer horizontaly x: Align.center(200) # align layer horizontaly with 200 offset x: Align.right(0) x: Align.left(0) y: Align.center(0) # align layer verticaly y: Align.top(0) y: Align.bottom(0) # You can use also some variables width: Screen.width # current device width height: Screen.height # current device height # As a reference you can also user layer names x: layerA.x # layerA horizontal position y: layerA.y # layerA vertical position width: layerA.width # layerA width height: layerA.height # layerA height # You can combine all of this into the simple math to calculate position or dimensions width: Screen.width / 2 - layerA.width

Ahora que está listo, comencemos nuestro proyecto

Hemos creado diferentes tipos de capas de Framer. Ahora nuestro campo de interacción está listo para funcionar.

¡Finalmente! La parte aburrida ha llegado a su fin. Ahora es el momento para un poco de diseño de interacción.

Descarga el prototipo completo aquí.

1. Crear una interacción de retroalimentación de botón

Para diseñar cualquier interacción, necesitamos un desencadenante para que suceda. Puede ser casi cualquier cosa: un toque en la pantalla, el final de una animación, el final de la carga de una imagen o el acelerómetro de su teléfono.

Paso 1: Crear el evento para la interacción.

Lo mantendremos simple. Vamos a crear un comentario de botón cuando lo toques, usando el siguiente comando:

 layerA.onTap (event, layer) ->

Framer acaba de escribir esta línea de código para usted. Significa que cuando tocas la capa de botones, algo sucederá.

Paso 2: Agregar animación al evento.

Comencemos una animación después de este disparador. Para hacer esto, haga clic en el punto junto a la capa del botón en el panel de capas, luego seleccione Agregar animación . Cuando agrega una animación, Framer salta al modo de edición de animación. Puede escalar, mover, rotar o cambiar cualquier parámetro de la capa:

Framer agregó algunas líneas más de código. (No se preocupe, aún puede editar su animación con el panel de animación).

 button.onTap (event, layer) -> button.animate borderRadius: 27 borderWidth: 10 borderColor: "rgba(115,250,121,1)" options: time: 0.30 curve: Bezier.ease

¡Felicidades! Acabas de crear tu primera interacción. Funciona solo una vez en este momento, pero lo arreglaremos. La razón por la que puede activar esta animación solo una vez es que no hay nada establecido para que suceda después de que finalice la animación. Tenemos que restablecer todos los parámetros después de que termine la primera animación a como estaban antes.

Paso 3: Restablecimiento de la animación.

Agregue otro evento, casi como lo hicimos antes. La diferencia es que estamos buscando un evento cuando termina la animación:

Esta vez, el código agregado por Framer se verá así:

 button.onAnimationEnd (event, layer) ->

Entonces, cuando finaliza la animación en la capa del botón , podemos agregar la siguiente animación que restablecerá los parámetros de la capa del botón :

 button.onAnimationEnd (event, layer) -> button.animate borderWidth: 100 borderColor: "rgba(255,255,255,1)" borderRadius: 100 options: time: 0.3 curve: Bezier.ease

¡Eso es todo! Ahora tenemos comentarios de trabajo después de tocar nuestro botón.

2. Creación de diferentes estados para interacciones de capas de tarjetas

Bien, ahora sabes cómo diseñar una animación y activarla. Más a menudo, debe diseñar diferentes estados de una capa. Puede diseñar varios estados de la misma capa cambiando solo algunos parámetros, como la posición, el tamaño o la opacidad.

Paso 1: agregar y crear estados para una capa de tarjeta.

La forma de agregar un estado a la tarjeta es casi la misma que agregar una animación. Debe hacer clic en el punto junto a la capa de la tarjeta y luego hacer clic en Agregar estado . Ahora ha saltado al modo de edición de estado. Diséñalo como quieras:

Preste atención a la sangría del código. Debe comenzar desde la primera fila.

He diseñado dos estados diferentes para la capa de mi tarjeta :

 card.states.a = width: 248 height: 287 x: 63 y: 190 borderWidth: 10 borderColor: "rgba(115,250,121,1)" card.states.b = x: 139 y: 529 width: 98 height: 98 borderRadius: 49 borderWidth: 1 borderColor: "rgba(255,255,255,1)"

Paso 2: Agregar eventos.

Sólo hay un paso más para que funcione. Tenemos que crear un evento para cambiar estos estados.

 button.onTap -> card.stateCycle()

Esto lo que hace es cambiar todos los estados de la capa uno por uno, cada vez que realizas una acción. Entonces, en nuestro caso, cada vez que tocamos la capa de botones , cambiamos al estado de la tarjeta . Si desea crear más estados y activarlos correctamente, el siguiente fragmento funcionará mucho mejor para usted:

 button.onTap -> card.stateSwitch("b")

Este fragmento es útil cuando desea activar un estado particular de la capa.

El último ajuste que hice a mi prototipo es un cambio de velocidad de animación y curva entre estados:

 card.animationOptions = curve: Spring time: 0.8 

Hay muchas más cosas que puede hacer con los eventos , pero en este punto, podrá crear casi cualquier interacción básica. Es una de las documentaciones mejor escritas que he visto.

Acelerar su trabajo en Framer: Componentes

Ha llegado el momento de agregar componentes para acelerar su trabajo. Para aprovechar al máximo este tutorial a partir de ahora, descargue este prototipo.

1. El primer componente: desplazamiento

He modificado un poco nuestro prototipo. Ahora tenemos una lista dentro, pero su altura está por encima de la resolución de la pantalla. Tenemos que crear scrolling para poder ver toda la lista en el prototipo.

Paso 1: Creación de capas y configuración de componentes.

Comencemos creando una capa con una altura mayor que nuestra pantalla. Marque esta capa como interactiva y asígnele el nombre list . Luego salta al modo de código. Esta vez no usaremos la práctica barra lateral izquierda. Configuremos toda nuestra pantalla para que sea desplazable:

 scroll = new ScrollComponent width: Screen.width height: Screen.height

Este código crea un área invisible con el ancho y alto del dispositivo actual.

Paso 2: Dile a Framer qué capas quieres desplazar.

Aún no ha pasado nada. Tenemos que decirle a Framer qué capas deben ser desplazables. Para hacer esto, agregamos nuestra capa de lista al componente de desplazamiento:

 list.parent = scroll.content

Paso 3: bloqueo del desplazamiento vertical.

Ahora podemos desplazarnos, pero está sucediendo en todas las direcciones. Tenemos que bloquear el scroll en un eje vertical:

 scroll.scrollHorizontal = false 

¡Guau! Creó un pergamino dentro de su aplicación con solo cinco líneas de código simple.

2. El componente de la página: deslizar pantalla a pantalla

Una interacción muy popular para cambiar de pantalla es deslizar. La idea aquí es muy similar al componente de desplazamiento. Puede descargar un prototipo funcional aquí.

Paso 1: Configuración del componente.

Primero, tenemos que crear una “caja” en el editor de código donde ocurrirá la magia:

 page = new PageComponent width: 315 height: Screen.height x: Align.center scrollVertical: false clip: false # the content outside the box won't be clipped

En este punto, debe estar familiarizado con todo el código aquí. Es solo una configuración simple del componente y su área. Ahora tenemos que crear algunas capas para deslizar.

Paso 2: Creando capas

Usaremos nuestro primer diseño de prototipo y lo modificaremos un poco. En lugar de una imagen de tarjeta, esta vez importé dos imágenes.

Al principio, tenemos que hacer la mesa de trabajo dos veces más ancha. En el panel de propiedades de la mesa de trabajo, encuentre el ancho y multiplíquelo por dos (o simplemente agregue *2 ). Coloca las cartas una al lado de la otra, actívalas con el punto azul y nómbralas correctamente: card1 y card2 .

Paso 3: agregar capas al componente de página.

Al final de nuestro código en el editor de código, tenemos que agregar:

 card1.parent = page.content card2.parent = page.content

Eso significa que estamos agregando estas capas al componente.

¡El componente de la página ya está listo para funcionar!

última palabra

¡Eso es todo amigos! Espero que haya encontrado útil este tutorial de Framer para comenzar su viaje con la herramienta de creación de prototipos más poderosa del mercado. Además, debería considerar unirse al grupo Framer en Facebook. Hay una gran comunidad alrededor, y son útiles cuando estás comenzando.

Si desea profundizar aún más en Framer, intente leer la documentación de Framer.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas