4 herramientas para crear prototipos online gratis

¿Tienes una idea clara sobre cómo quieres que sea tu sitio web, pero tienes dificultades para materializarla? ¿Tienes dudas sobre si realmente va a funcionar? Crear un prototipo te puede ayudar a plasmar esa idea de forma tangible y a ponerla a prueba antes de invertir tiempo y dinero en desarrollarla.

Un prototipo es una representación interactiva, visual y funcional de un sitio web o aplicación. Te permite simular el diseño y la navegación que quieres que tenga tu sitio web, pedir opinión a otras personas, detectar e identificar necesidades de los usuarios, comunicar mejor tu propuesta de diseño, hacer pruebas o validar tu idea.

Cualquier persona puede crear prototipos online gratis y sin conocimientos de programación utilizando alguna de las herramientas incluidas en este artículo. En este artículo encontrarás sus beneficios e instrucciones paso a paso para crear un prototipo con cada una de ellas.

1. Figma

Figma es una herramienta para diseñar y crear prototipos online gratis muy versátil e intuitiva. Con Figma podrás crear prototipos interactivos de interfaces web y móviles con unos pocos clics y sin tener que escribir una sola línea de código. 

Figma te permite plasmar tus ideas de diseño de forma tangible, visual y funcional para probar y validar conceptos, interacciones y funcionalidades antes de invertir tiempo y recursos en desarrollarlos. Comparte tus diseños y colabora con otras personas en tiempo real para facilitar el proceso de diseño y asegurarte de que tu sitio web satisfaga las necesidades y las expectativas de tus usuarios.

Cuáles son los principales beneficios de Figma

• Crea el diseño y el prototipo de tu sitio web desde un mismo lugar.
• Colabora con otras personas en tiempo real.
• Puedes utilizar Figma desde el navegador web en cualquier sistema operativo o descargar la aplicación de escritorio para macOS y Windows.
• El historial de cambios te permite restaurar una versión anterior de tu prototipo.
• Crea interacciones complejas mediante variables, lógica condicional y expresiones matemáticas.
• Visualiza tus diseños en cualquier tamaño de pantalla con el visor de prototipos que adapta los tamaños de forma eficiente.
• Incluye GIF animados y vídeos para replicar la experiencia que tendrán tus usuarios cuando interactúen con medios interactivos en tu sitio web o aplicación.
• Ahorra tiempo utilizando interacciones prediseñadas o diseños creados por otras personas de la Figma Community.

Cuánto cuesta Figma

La mayoría de las funciones de prototipado que ofrece Figma están disponibles en el plan gratuito. Si necesitas funciones avanzadas de creación de prototipos, como la utilización de variables, lógica condicional, acciones múltiples u operadores, tienes tres planes de pago disponibles:

• Equipo Professional: 15 € por licencia completa/mes
• Organización: 45 € por licencia completa/mes
• Enterprise: 75 € por licencia completa/mes

Cómo crear un prototipo con Figma

1. Crea una cuenta de Figma gratis o inicia sesión.
2. Navega hasta la página principal de tu cuenta.
3. Crea o importa el diseño. 
   1. Para crear el diseño, haz clic en la opción de + Create new (Crear nuevo) y, a continuación, Design file (Archivo de diseño). 
   2. Para importar el diseño, haz clic en la opción de + Create new (Crear nuevo) y, luego, Import (Importar). Puedes seleccionar e importar archivos .sketch, .fig, .jam, .png y .jpg.
4. Cuando tengas el diseño listo, selecciona el modo Prototpye (Prototipo) en la parte superior del panel lateral derecho.
5. Selecciona el dispositivo para el que quieres crear el prototipo.
6. Crea conexiones entre los diferentes elementos de tu diseño. Para ello:
   1. Selecciona un elemento.
   2. Haz clic en el signo azul + que aparece en el lado derecho y arrástralo hasta el elemento con el que quieras conectarlo.
   3. En el panel derecho, configura la interacción seleccionando el disparador, el tipo de animación y la duración que quieres que tenga.
7. Previsualiza el prototipo haciendo clic sobre el botón de reproducir situado en la parte superior del panel lateral derecho.

2. Marvel

Marvel es una herramienta con la que puedes crear prototipos online gratis convirtiendo imágenes de tus diseños en formatos JPG, PNG o GIF; creando tus diseños directamente en ella, o sincronizando los que hayas diseñado en Sketch. 

Marvel es muy fácil de usar y muy útil para colaborar con otras personas, ya que puedes utilizarla directamente desde un navegador web o desde la aplicación e integrarla con otras herramientas populares, como Microsoft Teams o Jira.

Cuáles son los principales beneficios de Marvel

• Crea prototipos para ordenador, iPad, Apple TV, Apple Watch y dispositivos Android.
• Descarga los prototipos para seguir trabajando en ellos aunque no tengas conexión a Internet.
• Comparte fácilmente los prototipos con otras personas enviándoles la URL o insertando el código en otro lugar.
• Utiliza la versión móvil de la plataforma descargando la aplicación para iOS o Android.
• Elige entre una gran variedad de transiciones y gráficos predeterminados.
• Cada vez que subas un elemento, el prototipo se sincroniza automáticamente.
• Utiliza la plataforma con Windows, Linux, Android e iOS.
• Añade comentarios a tu prototipo.

Cuánto cuesta Marvel

Marvel ofrece un plan gratuito para un usuario con el que podrás crear un proyecto, aparte de tres planes de pago distintos:

• Pro: 9 €/mes
• Team: 27 €/mes
• Enterprise: consultar

Cómo crear un prototipo con Marvel

1. Regístrate gratis o inicia sesión en Marvel.
2. Navega hasta la página principal de tu cuenta.
3. Haz clic en la opción de Create project (Crear proyecto).
4. Selecciona Protoype (Prototipo), escribe el nombre de tu proyecto y elige el dispositivo para el que quieres diseñarlo.
5. Selecciona Create project (Crear proyecto).
6. Haz clic en Add images (Añadir imágenes) y, después, selecciona Upload from computer (Subir desde el ordenador) o arrastra tus diseños directamente a la ventana del navegador para incorporarlos en tu proyecto.
7. Pasa el cursor por encima de cualquier imagen que hayas subido y haz clic en Prototype (Prototipo) para abrir el editor.
8. A continuación, haz clic y arrastra en el área del diseño que quieres vincular.
9. Selecciona la imagen con la que quieres vincular esa área, el tipo de transición y la acción que debe hacer el usuario para que se active.
10. Haz clic en Play (Reproducir) para probar el prototipo.

3. Proto.io

Proto.io es una herramienta muy completa para crear, compartir, presentar y probar prototipos interactivos para cualquier tamaño de pantalla, como móvil, tableta, web, TV o smartwatch. 

Esta plataforma solo se puede utilizar desde el navegador web, pero permite crear prototipos online gratis detallados, totalmente funcionales y muy parecidos al resultado final.

Cuáles son los principales beneficios de Proto.io

• Es muy intuitivo y fácil de usar, ya que solo tienes que arrastrar y soltar los diferentes elementos.
• Ofrece muchísimos componentes, plantillas y recursos digitales que te ahorrarán mucho tiempo.
• Configura multitud de eventos, interacciones, transiciones y animaciones.
• Comparte una o varias pantallas o expórtalas a PDF, PNG o HTML para verlas offline.
• Prueba tu prototipo con usuarios reales integrando la herramienta con plataformas de investigación de usuario populares.
• Importa elementos de otras herramientas, como Figma, Sketch o Adobe Photoshop.

Cuánto cuesta Proto.io

Puedes probar Proto.io gratis durante 15 días. Cuando termine la prueba, puedes convertir tu cuenta a un plan gratuito limitado que incluye un usuario, un proyecto activo, cinco prototipos, previsualización en la aplicación de Proto.io y 10 MB de almacenamiento. También existen estas opciones de pago:

• Freelancer: 24 $/mes
• Startup: 40 $/mes
• Agency: 80 $/mes
• Corporate: 160 $/mes

Cómo crear un prototipo con Proto.io

1. Regístrate o inicia sesión en Proto.io.
2. Navega hasta la página de inicio de tu cuenta.
3. Haz clic en la opción + New project (Proyecto nuevo).
4. Escribe el nombre del proyecto, elige un tipo de dispositivo y de tamaño de pantalla y haz clic en Create (Crear).
5. Haz clic en New Screen (Pantalla nueva) para añadir la primera pantalla de tu prototipo o selecciona el icono que aparece junto a esta opción para crearla a partir de una plantilla.
6. Selecciona los componentes que quieras en el panel lateral derecho Libraries (Bibliotecas) y arrástralos y suéltalos en el espacio de trabajo.
7. Personaliza las propiedades y las interacciones de cada componente desde el panel lateral derecho Inspector.

4. Miro

Miro es una plataforma en la que puedes diseñar y crear prototipos online gratis sin limitaciones de espacio ni tiempo. Con Miro puedes dar rienda suelta a tu creatividad plasmando tus ideas, bocetos y diseños para tu sitio web sin preocuparte por quedarte sin espacio. 

Las opciones para crear prototipos interactivos con Miro son más limitadas que las de otras herramientas. Sin embargo, Miro puede resultarte muy útil si buscas una herramienta que puedas utilizar en todas las fases del proyecto, ya que te permite organizar tus ideas y colaborar en tiempo real con otras personas de forma muy visual e intuitiva, gracias a funciones como las votaciones, los mapas mentales o las notas adhesivas.

Cuáles son los principales beneficios de Miro

• Puedes utilizar Miro en cualquier dispositivo desde el navegador o descargando la aplicación para móvil, tableta o escritorio para iOS, Android, Windows o Mac.
• Con Miro nunca te quedarás sin espacio.
• Aparte de la creación de prototipos, puedes aprovechar Miro para otras tareas, como planificación, gestión de proyectos o brainstorming.
• Colabora en tiempo real con otras personas para que todo el mundo pueda aportar ideas y dar su opinión sobre el prototipo.
• Importa diseños desde otras herramientas, como Sketch, Adobe XD o Figma.
• Integra Miro con otras herramientas de marketing, CRM o gestión de proyectos, como Google Workspace, Microsoft 365 o Salesforce.
• Genera rápidamente prototipos utilizando plantillas prediseñadas.

Cuánto cuesta Miro

Miro ofrece un plan gratuito que puedes utilizar tanto tiempo como quieras y con tantas personas como necesites. Con este plan, puedes crear tableros ilimitados, aunque el equipo solo podrá editar los tres últimos tableros que se hayan creado. También podrás utilizar la biblioteca de más de 2500 plantillas o conectar más de 100 aplicaciones. Si necesitas funciones más avanzadas, tienes varios planes de pago disponibles:

• Starter: 8 $/mes por miembro
• Business: 16 $/mes por miembro
• Enterprise: consultar

Cómo crear un prototipo con Miro

1. Crea una cuenta o inicia sesión en Miro.
2. Navega hasta la página de inicio de tu cuenta.
3. Haz clic en la opción + Create new (Crear nuevo) y selecciona Board (Tablero).
4. Diseña los diferentes elementos o impórtalos desde otra herramienta. Para importarlos, tienes varias opciones:
   1. Arrastra los archivos al tablero de Miro.
   2. Selecciona Upload (Subir) en el panel lateral izquierdo y elige la opción que más te convenga.
   3. Explora otras opciones con los complementos y las integraciones de Miro con otras herramientas.
5. Para simular las interacciones, conecta unos elementos con otros. Para ello:
   1. Haz clic en el elemento de destino, en los tres puntos y, después, en la opción de Copy link (Copiar enlace)
   2. Selecciona el elemento de origen.
   3. Selecciona el icono del vínculo en el menú superior.
   4. Pega el vínculo del elemento de destino.