Investigando una nueva tecnología aplicando el método científico

Sofi Lay - Frontend Developer

Hace tiempo que vengo usando una herramienta en mis desarrollos con React y Next JS para hacer animaciones no solo atractivas sino también performantes, Framer Motion.

Eso me llevo a indagar un poco más, adentrarme en la comunidad de Discord y toparme con que no solo es una librería de animaciones, también es una herramienta de prototipado y no-code que por detrás utiliza código basado en React JS.

Viniendo desde el lado de desarrollo web nunca profundicé demasiado en prototipado de diseño y solo había escuchado sobre lo que era no-code pero me interesaba entender qué brindaba Framer y si podíamos añadirlo a nuestro stack de tecnologías en Paisanos.

Para responder a estas dudas junto con nuestro líder técnico decidimos implementar el método científico resumido en las siguientes etapas:

Experimentación
Acercamiento
Deep drive
Resultados y conclusiones
Recopilación de recursos

Experimentación

Prueba Nº1: Acercamiento

Como primera impresión me pareció que la interfaz de prototipado es similar a Figma, lo cual lo hace muy amigable si alguna vez la utilizaste. No tuve problemas en empezar un nuevo proyecto guiándome solo por lo intuitivo de la herramienta. Cuenta con un on boarding interactivo para ir haciendo paso a paso si sos una persona paciente que no skipea todo.

Cosas a destacar:

Podes importar un diseño directamente de Figma o Sketch.
Invitar a tu equipo a colaborar en real time en tu prototipo.
Muchos recursos, updates frecuentes y una comunidad grande.

Prueba Nº2: Deep Dive

Para arrancar podes elegir entre crear un proyecto de cero o con un template pre armado e ir editando, acá te dejo unos free.

Una recopilación de los puntos fundamentales de Framer

Stack y Frame

Lo primordial que hay que entender cuando arrancamos a diseñar en el canvas es la diferencia entre Stack y Frame.

Un Frame sirve como container o puede ser un elemento en sí mismo como, por ejemplo, un botón o una imagen. Este va a comportarse como un elemento que vamos a poder posicionar en cualquier lugar de nuestro canvas, por default posee position “absolute”.
Un Stack es para crear layouts “in flow” por ende por default posee position “relative”, podemos tratarlo como flexbox y es recomendable usarlo desde un principio para construir el layout de nuestra página. También podemos cambiar su position a fixed o absolute dependiendo de lo que necesitemos.

Para entender mas sobre esto hay un video bastante claro que te dejo acá.

Breakpoints

Arriba del canvas vas a encontrar que dice breakpoint y nos da las opciones de añadir el canvas de tablet y de phone. Estos últimos dos van a heredar el diseño de desktop (si tenemos alguno) y cada cambio que hagamos en desktop va a impactar en tablet y phone. No a la inversa, si modificamos desde phone, no van a cambiar el diseño de desktop.

Framer utilizar por default nos da un canvas como Desktop first, pero eso no significa que no podamos modificarlo. Podemos cambiarlo a phone y comenzar a diseñar en Mobile first si te sentis mas comodo con ese approach.

‍

‍

Construyendo con stacks nuestro layout y breakpoints nos garantizamos una web full responsive ⚡️

‍

Gestionando contenido (CMS)

En la barra de herramienta que vemos arriba, vas a encontrar una pestaña llamada CMS. Esta te va a permitir manejar el contenido de tu web.

‍

‍

Agregando una nueva colección te va a dar la opción de añadir y editar, por default ya hay creados unos ejemplos para que puedas customizar.

‍

‍

Una vez que terminamos de añadir lo que queríamos, desde la barra de herramientas y con la opción de Insert vas a encontrar la opción CMS Content. Haciendo drag and drop ya podes editar cómo queres que se vea tu contenido.

Deploy

Cuando terminamos nuestra web y querremos deployar solo tenemos que clickear Publish y listo, nos va a generar un dominio random que podemos customizar. Si elegimos hacerlo gratis este nos va a añadir .framer.website (.photo, .media o .wiki) al final del dominio.

O podes elegir conectar con tu dominio de terceros.

Otros puntos claves

Componentes: una vez que creamos un elemento que podemos repetir a lo largo de la web, como un botón, podemos hacerlo un componente con su estado hover / press y reutilizarlo en el proyecto.

Animaciones: es fácil de hacer animaciones sencillas pero no complejas.

For developers: cada componente por detrás es código de React, la herramienta nos da la opción de poder editar.

Cómo escribir código dentro de Framer

Resultados y conclusiones

Pros

Curva de aprendizaje rápida y amigable.
Deployar una web es muy fácil.
La versión free abarca muchas cosas, podes hacer una web sin problema.

Cons

Por otras experiencias que leí de diseñadores no parece ser una herramienta muy copada para prototipo, pero a la vez está en constante update así que puede que estos comentarios hayan quedado viejos para cuando lo pruebes.

Para qué recomiendo Framer

Si estas buscando una herramienta para deployar una web sencilla, idealmente directamente de Figma y de una manera rápida, es una gran opción. Especialmente para diseñadores de interfaces sin conocimiento de código o si buscas validar una idea con poco tiempo y presupuesto.