Tanto si utilizas Sketch como Figma, ya habrás comprobado que las herramientas para hacer prototipos de ambos programas son bastante… justitas.
La mayoría de vez es necesario un plugin o usar herramientas de terceros, que en ocasiones no funcionan *exactamente* como quisieras.
Esto (probablemente) se va a terminar con Framer, la herramienta que necesitas para hacer prototipos de otro nivel.
Hay una cosa que debes tener en cuenta: no es tan sencillo como parece… así que sigue leyendo 😉
¿Qué es Framer?
Al igual que Figma es una herramienta basada en el navegador. Com Framer podrás trabajar de forma colaborativa con otros miembros del equipo, compartir fácilmente, dejar comentarios, reutilizar componentes…
También tiene algo que me llama mucho la atención: poder hacer un buen handoff de animaciones al equipo de desarrollo.
Con Framer podrás importar fácilmente desde Sketch, Figma o Framer X y empezar a prototipar al instante.
En cuanto al precio, tiene un modelo similar al de Figma: con el plan gratuito podrás tener 3 proyectos, 2 editores y viewers ilimitados. Si necesitas más, los siguientes planes son de $12/mes, $20/mes o customizados (más orientados a empresas).
La interfaz de Framer
Una vez te registres y accedas a Framer verás esto:
Como habrás comprobado, se trata de una interfaz calcada a la del resto de programas que estés utilizando para diseñar:
Derecha reservada a los Frames, dispositivos y a las distintas «capas»
Centro con el Canvas para hacer el prototipo
Izquierda con el inspector
Navegación en la parte superior de la pantalla, con todos los elementos fácilmente accesibles
¿Qué son los Frames? ¿Y Pages?
Antes de lanzarte a trastear con Framer, necesitas conocer y diferenciar bien estos conceptos:
Necesitas insertar Frame cuando quieras incluir un elemento que sea interactivo: da igual si es del tamaño de un iPhone, o si es para un botón o toggle dentro del propio Frame del móvil.
Por ejemplo, aquí debajo hay 6 Frames: uno para cada iPhone, y los fondos y círculos de cada toggle. En Framer no existen figuras geométricas como tal, son todo Frames.
En otro momento ya hablaremos de la confusión de nombres que existe en Framer…
Las Pages te permite crear zonas en cualquier Framer que sean swipe-ables. Es decir: necesitas crear una Page cuando quieras poner un Frame dentro de otro.
En este ejemplo, la Page es el elemento seleccionado, que está enlazado con los Frames que hay a la derecha. De este modo incluye «dentro» del iPhone esos tres Frames.
Características de Framer
Software en el navegador
Como Figma, Framer es una herramienta que también está «en el navegador». En mi opinión esto es una ventaja, porque no requiere que tengas ningún programa instalado en tu ordenador… lo que a la vez hace que Framer esté disponible para cualquier sistema operativo, sea Windows, Mac o Linux.
Evidentemente tiene sun hándicap: trabajar sin conexión no es posible. Aun así, dado que esto pasa en relativamente pocas ocasiones en un mundo tan conectado como el actual, no considero que pese más que la compatibilidad con cualquier SO.
Permite importar Figma, Sketch y Adobe XD
Y esto es algo que agradezco infinitamente. Por fin parece que las herramientas de diseño UI/UX empiezan, de una forma más evidente, a ser compatibles unas con otras.
Este aspecto es evidentemente, una ventaja competitiva para Framer, ya que no se ligan a su propio software: de este modo pueden tener usuarios de cualquier otro programa de diseño.
Eso sí, tiene un fallo: para poder importar antes debes bajarte e instalar un zip llamado Framer Tools.
Como habrás visto en el vídeo, los artboards que copias y pegas de Sketch mantienen total capacidad de edición.
Handoff de animaciones
Al inicio del artículo te comentaba que con Framer podrás hacer un buen handoff de animaciones al equipo de desarrollo.
Esto es así porque al típico panel de «exportar el CSS» que tienen Figma y Sketch, han añadido un bloque con las características de la animación en concreto.
Se pueden exportar en dos formatos: Framer Motion y Swift:
Tiene el «Runner» de Sketch
Otro aspecto que me ha llamado la atención es que el panel para insertar es parecido al plugin de Sketch «Runner».
Al hacer clic en el icono (o apretar la tecla i en el teclado) se abre un pequeño modal que te dará acceso a todo lo que quieras insertar, sea un Frame de un tamaño concreto, tipo de animación, componentes de UI básicos (botones, loaders…) animaciones preestablecidas…
Conclusiones
Como habrás visto, Framer tiene mucho potencial. Aún así tiene pinta de que tiene una curva de aprendizaje relativamente alta y que todavía necesitan trabajar en el programa para que funcione de forma óptima.
¿Qué te ha parecido? ¿Te gustaría ver algún vídeo con un tutorial? 🙂
Únete a 3.925 diseñador@s y recibe los mejores contenidos para crecer.
Resumen de privacidad
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies de terceros
Esta web utiliza Google Tag Manager para recopilar información anónima tal como el número de visitantes del sitio o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Excelente, me gusta mucho para definir prototipos más claros con las apps
Muy buena pinta