Prototipos Hi-Fi: Origami vs. Framer

Los prototipos nos permiten crear experiencias auténticas, obtener valioso feedback durante los testeos con usuarios e iniciar el desarrollo cuando efectivamente hemos encontrado la mejor solución.

Como dicen: “Un prototipo vale más que mil palabras.”

En Lateral View siempre estamos atentos a las nuevas opciones en el mercado que puedan servir para facilitar y mejorar nuestro flujo de trabajo, y luego de pasar por varias herramientas de prototipado hemos encontrado las que son en nuestra opinión las dos líderes: Origami y Framer.

Ambas aplicaciones no surgieron como tales: Origami Studio era en realidad un plugin para Quartz Composer desarrollado por Facebook y Framer Studio empezó como la librería Framer.js.

Con el tiempo se transformaron en aplicaciones independientes enfocadas exclusivamente en prototipado, y además sumaron varias funcionalidades nuevas.


Lo primero que debemos hacer si queremos animar nuestro diseño es abrirlo en la herramienta de prototipado, para eso simplemente hacemos drag and drop desde la carpeta donde tengamos nuestro proyecto.

Además, cada una ofrece opciones particulares para importar nuestros archivos: si estamos en Origami podemos copiar en Sketch y pegar directamente en la app. Framer, en cambio, ofrece un plugin que permite mantener sincronizado el diseño con Sketch, por lo tanto los cambios que realicemos se actualizarán automáticamente.


Ambas herramientas se relacionan directamente con la programación, y considerando que la gran mayoría de sus usuarios provenimos del mundo del diseño con el tiempo fueron logrando que la interacción con el código sea lo más amigable posible.

Origami Studio

Por ejemplo, Origami maneja las relaciones entre elementos y sus propiedades conectando bloques de una forma más visual, permitiendo entender la aplicación rápidamente. Aunque debemos tener cuidado de no formar cientos de conexiones inentendibles que terminen dificultando nuestro trabajo. Una gran ventaja es que el equipo de Facebook desarrolló muchos componentes nativos que vienen integrados y podemos utilizar para agilizar nuestro trabajo.

Framer Studio

Por el otro lado, uno de los puntos fuertes de Framer es la característica Auto-Code, con la cual podemos definir una interacción o manipular las propiedades de una capa directamente desde un panel mientras vemos cómo se va generando el código automáticamente. De esta manera, podemos crear nuestros propios componentes para reutilizarlos en otros proyectos.


Si al momento de probar nuestra aplicación queremos utilizar información real Origami nos permite agregarla desde un archivo JSON. Además, en Framer podemos traer nombres de usuario, fotos de perfil, o lo que queramos haciendo una llamada a una API.

A la hora de compartir nuestro prototipo, ya sea a clientes o a desarrolladores, buscamos que puedan interactuar con él y sentirlo real aunque todavía no se haya escrito una línea de código.

Para esto, la mejor manera de visualizarlos es en las aplicaciones nativas que ambas herramientas tienen, tanto para iOS como para Android, ya que aprovechan las características nativas del dispositivo (como la cámara, el micrófono, el acelerómetro, entre otros) y también permiten ver en tiempo real los cambios que vamos haciendo.

Además, también tenemos distintas alternativas para compartir nuestro diseño según la herramienta:

  • Origami permite grabar la pantalla, donde podemos explicar partes puntuales o un recorrido por todo el proyecto de manera muy fácil.
  • En cambio Framer genera un prototipo HTML que se puede visualizar en el navegador. La gran ventaja de hacerlo de esta manera es que si hacemos cambios en el diseño, el cliente o desarrollador puede volver a verlo desde el mismo enlace, en cambio en Origami debemos enviarles un video nuevo. Otro punto a favor de Framer es que también permite capturar los datos que el usuario ingresa en el prototipo, y de esta manera testear con información real.

Resumiendo, a simple vista pueden parecer herramientas muy complejas, pero a medida que las vamos usando descubrimos que podemos comprenderlas rápidamente. Además, en los sitios oficiales podemos encontrar tanto documentación como ejemplos para descargar.

En líneas generales Origami resulta más fácil de entender y los componentes de iOS y Android que vienen ya construidos refuerzan eso, mientras que Framer, aunque primero puede lucir más complicado, nos termina dando mayor libertad y posibilidades ilimitadas.

Como siempre, lo mejor es tomar la decisión basándonos en nuestras necesidades particulares.


Si quieres saber más sobre tecnología e innovación, ¡visítanos en Lateral View o suscríbete a nuestra newsletter!