Introducción a Framer: Primeros pasos

Escrito por Cris Busquets. Publicado en Diseño UI, Diseño UX

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? 🙂

Esto también te interesa 👇

Cómo diseñar en un entorno que no se para

Que es un empty state, mejores prácticas y ejemplos

Principios de UX: Efecto goal-gradient y regla peak-end