Creando prototipos funcionales usando Marvel y Sketch

En esta ocasión, dejando atrás nuestra rutina de desarrollo y JavaScript, veremos como usar Marvel, una app de prototipado y como integrarla con Sketch, una herramienta de diseño con el fin de crear prototipos increíbles.

Para ello voy a usar mi diseño del sitio web el cual voy a subir a marvel desde cero. Lamentablemente es un sitio web personal por lo que no enlazaré pantallas solo añadiré notas.

Crear cuenta de Marvel

Para crear una cuenta de Marvel entraremos en su sitio web y haremos click en Sign Up, rellenamos un formulario como este:

Crear proyecto de Marvel

Una vez que tengamos la cuenta y hayamos iniciado sesión iremos a nuestro dashboard donde crearemos un nuevo proyecto haciendo click sobre el botón verde Create Project, le damos un nombre, una contraseña(si lo deseamos) y en qué está basado nuestro proyecto.

Instalar plugin de Marvel en Sketch

Tras crear nuestro proyecto, y gracias a haberlo creado en Sketch, tenemos la posibilidad de realizar una integración con Sketch y Marvel y sincronizar artboards/pantallas sin exportar e importar nada. Para ello vamos a Sketch Toolbox (que deberías de tener si eres usuario de Sketch) y buscaremos marvel, instalaremos el plugin llamado Marvel Sketch.

Iniciar Sesión en Marvel vía Sketch

Una vez que tengamos instalado el plugin de Marvel en Sketch iniciaremos sesión. Para ello vamos a Plugins > Marvel > "Login or Logout to Marvel..." tras eso se nos abrirá un modal en el que podremos iniciar sesión:

Sincronizar Artboards a Marvel

Como en este caso, quiero exportar todos los artboards tal y como están lo haremos en Plugins > Marvel > "Send or Update All Artboards to Project...", se nos abrirá otro modal en el que seleccionaremos el proyecto y el tamaño de las pantallas/artboards a exportar:

Armar prototipo en Marvel

Finalmente, una vez que tengamos sincronizados nuestros artboards procederemos a añadirles links, anotaciones o a enlazarlos con otras pantallas para crear prototipos. Al ser una SPA(Single Page Aplication) yo no tendré que enlazar nada, aunque haré una anotación en el CTA(Call To Action). Recuerda que para empezar a construir el prototipo debes hacer Edit sobre uno de los artboards.


Me gustaría que me mandaran sus prototipos de Marvel para poder ver en qué trabajan. Seguro que son mucho mejores que el mío :P

Recuerda que puedes contactarme vía Twitter y desde hace una semana vía FaceBook.