Crea un wireframe básico y un prototipo

En este proyecto, aprenderemos cómo crear un prototipo y un wireframe básicos de una aplicación móvil.

Supongamos que se te ocurrió una nueva idea para una aplicación millonaria... Esto o aquello. En la aplicación, a los usuarios se les presentarán dos opciones y solo deben elegir una. ¡Genio! Antes de terminar el logotipo y comenzar a elegir los productos de la compañía, querrás diseñar algunos prototipos y wireframes básicos para probar la idea de tu aplicación con los usuarios.

Los wireframes son maquetas de baja fidelidad de sitios web o aplicaciones. Puedes usar wireframes para crear rápidamente varias iteraciones de cómo podría verse tu producto final, sin dedicar demasiado tiempo a centrarte en cuestiones como el color, las imágenes u otros elementos de diseño.

Puedes llevar tus wireframes al siguiente nivel con los prototipos, que son diseños con elementos interactivos. Te ayudan a diseñar, probar y mostrar cómo los usuarios interactuarán con el producto y navegarán por él.

Juntos, los wireframes y los prototipos te ayudan a planear cómo los usuarios interactuarán con tu aplicación y navegarán por ella.

Al final de este proyecto, tendrás experiencia trabajando con marcos, formas, texto y creación de prototipos en Figma. Empecemos.

Diseña un wireframe con marcos, formas y texto.

Para crear nuestro wireframe, usaremos los siguientes objetos:

• Dos marcos para contener los diseños
• Siete rectángulos para representar las imágenes y los botones en la app.
• Cuatro capas de texto para identificar las etiquetas de los botones.

Crea un archivo

Para empezar, necesitamos un nuevo archivo de diseño.

1. Inicia sesión en tu cuenta de Figma desde figma.com.
2. En el explorador de archivos, haz clic en Borradores.
3. Haz clic en Nuevo archivo de diseño.

Agrega el primer marco

Cada marco representa una página diferente de nuestra aplicación. También queremos diseñar nuestra aplicación para dispositivos móviles, por lo que usaremos tamaños de marcos preestablecidos. Para este proyecto, centrémonos en los dos marcos siguientes:

• Un marco “Esto o aquello” que presenta dos opciones.
• Un marco “Esto” que muestra lo que sucede cuando el usuario selecciona “Esto”.

Comencemos con el marco “Esto o aquello”.

1. Haz clic en el ícono Marco de la barra de herramientas o presiona F.
2. En el panel de diseño en la barra lateral derecha, selecciona el tamaño preestablecido del iPhone 14 Pro.

Ahora que tenemos un marco, cambiemos su nombre. Establecer una estructura de nomenclatura clara facilita la búsqueda y administración de capas en los archivos.

1. Desde el panel de capas, haz doble clic en el nombre del marco que acabas de colocar en el lienzo.
2. Cambia el nombre del marco a "Esto o aquello" y presiona retorno (Mac) o intro (Windows).

Agrega formas

Dado que no necesitamos entrar en demasiados detalles con los colores, los estilos y el diseño, podemos usar formas básicas para representar el diseño de nuestra aplicación.

Agreguemos rectángulos al marco "Esto o aquello" para representar las dos opciones.

1. Selecciona la herramienta Rectángulo o presiona R y haz clic dentro del marco "Esto o aquello".
2. Usa los campos Ancho y Altura en la barra lateral derecha para ingresar valores en píxeles para la forma. Hemos establecido el ancho de nuestro rectángulo en 319 y la altura en 240.
3. Haz clic en el rectángulo y arrástralo para colocarlo en la parte superior del marco. Figma intentará alinear el objeto con otros a su alrededor ajustándolos automáticamente; en este caso, ajustaremos el rectángulo en el centro del marco.
4. Para personalizar el color de relleno, selecciona el rectángulo y, luego, abre el selector de color en la sección Relleno de la barra lateral derecha. Hemos usado el código hexadecimal #8ED3E2 como nuestro color de relleno.

Queremos que el segundo rectángulo tenga exactamente el mismo tamaño, así que vamos a duplicar el primer rectángulo.

1. Selecciona el rectángulo y presiona Command + D (Mac) o Control + D (Windows) para duplicar.
2. El nuevo rectángulo se coloca directamente arriba del primero. Haz clic en el segundo rectángulo y arrástralo hasta el centro del marco.
3. Cambia el color de relleno del segundo rectángulo. Hemos usado el código hexadecimal #D48C8C como color de relleno.

¡Se ve muy bien! Tómate un momento para cambiar el nombre de las dos capas de rectángulo que has agregado. Escribe el nombre “Aquella imagen” para el rectángulo superior y “Aquella imagen” para el rectángulo inferior.

Ahora que ya sabes cómo agregar y modificar las formas, agrega dos rectángulos más para representar el "Este botón" y el "Aquel botón". Cada rectángulo tiene un ancho de 130 y una altura de 95. Cerciórate de cambiar el nombre de las capas. Cuando termines, tu marco debería verse así:

Agregar texto

Nuestro primer cuadro está casi terminado. Agreguemos algo de texto para identificar los botones "Esto" y "Aquello".

1. Selecciona la herramienta Texto de la barra de herramientas o presiona R.
2. Haz clic en el rectángulo inferior izquierdo y escribe “Esto”.
3. Con la capa de texto seleccionada, usa la configuración Texto para ajustar el tamaño a 24.
4. Haz clic en la capa de texto y arrástrala para moverla hacia el centro del rectángulo inferior. Figma intentará alinear la capa de texto con el centro del rectángulo proporcionando una guía roja como indicador visual.

En este momento, la capa de texto se encuentra justo encima de la capa rectangular. Queremos combinar esas dos capas en un grupo para que se puedan tratar como un solo objeto.

Para agrupar estas capas, selecciona ambos objetos. Para ello, haz clic y arrastra el cursor sobre ellos en el lienzo capturándolos en el cuadro de selección azul. A continuación, emplea el siguiente atajo de teclado para crear un grupo:

• macOS: Command + G
• Windows: Control + G

El panel de capas en la barra lateral izquierda ahora solo muestra una capa llamada “Grupo 1”. Cambia el nombre a “Este botón”.

Ahora que ya sabes cómo agregar capas de texto y crear grupos, crea un “Aquel botón”. Cuando termines, tu diseño debería verse así:

Crea el segundo marco

Ahora que nuestro marco “Esto o aquello” está completo, debemos pensar en cómo se verá el próximo.

Si el usuario hace clic en “Este botón”, entonces “Esta imagen” debería hacerse más grande y “Aquella imagen” debería desaparecer.

No necesitamos comenzar desde cero, sino que, simplemente, duplicamos nuestro primer marco haciendo clic en Command + D (Mac) o Control + D (Windows). Cambia el nombre del nuevo marco a “Esto”.

Elimina “Aquella imagen”. Para ello, selecciona los objetos y presiona Eliminar.

A continuación, amplía el tamaño de "Aquella imagen" para que ocupe la mayor parte del marco.

Agrega prototipos

Terminamos de crear un wireframe para dos páginas de nuestra nueva e increíble aplicación móvil.

Ahora, queremos proporcionar una guía más clara sobre cómo estas dos páginas funcionan juntas. ¿Cómo pasa un usuario del marco "Esto o aquello" al marco "Esto"? ¿Qué tipo de interacciones y animaciones podemos esperar al navegar entre las dos páginas?

Podemos responder a las preguntas anteriores sobre el prototipado.

Cuando los usuarios hagan clic en "Este botón" en el marco “Esto o aquello”, queremos que sean dirigidos al marco “Esto”.

Vamos a crear una conexión de prototipo para construir la interacción:

1. En la barra lateral derecha, haz clic en la pestaña Prototipo.
2. Pase el mouse por encima de la capa "Este botón" en el marco "Esto o aquello".
3. Haz clic en el signo más azul en el borde del botón, luego arrastra la conexión al marco "Esto". De esta forma, se abre el modal Detalles de la interacción.
4. En el menú desplegable, establece el disparador en Al tocar.
5. Establece la acción en Navegar a. En el menú desplegable, establece el destino en el marco "Esto".
6. En el menú desplegable Animaciones, selecciona Animación inteligente.

Después de crear una interacción, sal del modal Detalles de interacción. Presiona el botón Presentar en la barra de herramientas para probarlo.

¡Felicitaciones, ya está todo listo!