Mar 07, 2023 - 7 min read
Techonology
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:
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:
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.
Stack y Frame
Lo primordial que hay que entender cuando arrancamos a diseñar en el canvas es la diferencia entre Stack y Frame.
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.
.webp)
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.
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.
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.
Videos
Artículos | Blogs | Documentación
Comunidad de Discord
