Crea una retícula y un prototipo básicos

En este proyecto, aprenderemos cómo crear una retícula básica y un prototipo de una aplicación móvil.

Imaginemos que se te ocurre 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. ¡Menudo genio! Antes de finalizar tu logotipo y empezar a recoger los beneficios de la empresa, querrás diseñar algunos esquemas y prototipos básicos para probar tu idea de aplicación con los usuarios.

Las retículas son maquetas de baja fidelidad de páginas web o aplicaciones. Puedes usar retículas para crear rápidamente múltiples iteraciones de qué aspecto podría tener tu producto final, sin dedicar demasiado tiempo a centrarte en cosas como el color, las imágenes u otros elementos de diseño.

Puedes llevar tus retículas al siguiente nivel mediante el uso de prototipos. Los prototipos son diseños con elementos interactivos. Te ayudan a diseñar, probar y mostrar cómo los usuarios interactuarán con tu producto y navegarán por él.

Juntos, las retículas y los prototipos te ayudan a planificar cómo los usuarios interactuarán y navegarán por tu aplicación.

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

Diseñar una retícula con marcos, formas y texto

Para crear nuestra retícula, usaremos los siguientes objetos:

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

Crear 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.

Añadir 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 utilizaremos tamaños de marco preestablecidos. Para este proyecto, centrémonos en los dos marcos siguientes:

• Un marco «Esto o aquello» que muestra 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 Icono Marco de la barra de herramientas, o pulsa F.
2. En el panel Diseño de la barra lateral derecha, selecciona el tamaño preestablecido del iPhone 14 Pro.

Ahora que tenemos un marco, vamos a cambiarle el 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 pulsa Return (Mac) o Enter (Windows).

Añadir 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.

Añadamos rectángulos al marco «Esto o aquello» para representar las dos opciones.

1. Selecciona la herramienta Rectángulo o pulsa R y haz clic dentro del marco «Esto o aquello».
2. Utiliza los campos Anchura y Altura de la barra lateral derecha para introducir los valores en píxeles de la forma. Hemos establecido la anchura de nuestro rectángulo en 319 y la altura en 240.
3. Haz clic y arrastra el rectángulo para colocarlo en la parte superior del marco. Figma intentará alinear el objeto con otros que lo rodean ajustándose automáticamente a ellos; en este caso, ajustaremos el rectángulo en el centro del marco.
4. Para personalizar el color de relleno, selecciona el rectángulo y abre el selector de color en la sección Relleno de la barra lateral derecha. Hemos utilizado 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 pulsa Command + D (Mac) o Control + D (Windows) para duplicar.
2. El nuevo rectángulo se coloca directamente encima del primer rectángulo. Haz clic y arrastra el segundo rectángulo hasta el centro del marco.
3. Cambia el color de relleno del segundo rectángulo. Hemos utilizado el código hexadecimal #D48C8C como color de relleno.

¡Tiene muy buen aspecto! Tómate un momento para cambiar el nombre de las dos capas de rectángulo que has añadido. Nombra el rectángulo superior «Esta imagen» y el rectángulo inferior «Esa imagen».

Ahora que ya sabes cómo añadir y modificar formas, añade dos rectángulos más para representar «Este botón» y «Ese botón». Cada rectángulo tiene una anchura de 130 y una altura de 95. Asegúrate de cambiar el nombre de las capas. Cuando termines, tu marco debería tener este aspecto:

Añadir texto

Nuestro primer marco está casi terminado. Añadamos texto para identificar los botones «Este» y «Ese».

1. Selecciona la herramienta Texto de la barra de herramientas, o pulsa T.
2. Haz clic en el rectángulo inferior izquierdo y escribe «Esto».
3. Con la capa de texto seleccionada, utiliza la configuración de Texto para ajustar el tamaño a 24.
4. Haz clic y arrastra la capa de texto 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 puedan tratarse como un solo objeto.

Para agrupar estas capas, selecciona ambos objetos haciendo clic y arrastrando el cursor sobre ellos en el lienzo, capturándolos en el cuadro de selección azul. A continuación, utiliza 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». Cámbiale el nombre a «Este botón».

Ahora que ya sabes cómo añadir capas de texto y crear grupos, crea «Ese botón». Cuando hayas terminado, tu diseño debería tener un aspecto similar al siguiente:

Crear el segundo marco

Ahora que nuestro marco «Esto o Aquello» está completo, tenemos que pensar en qué aspecto tendrá el próximo marco.

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

No es necesario que empecemos desde cero, dupliquemos nuestro primer marco haciendo clic en Command + D (Mac) o Control + D (Windows). Cambiemos el nombre del nuevo marco a «Este».

Elimina «Esa imagen» seleccionando los objetos y pulsando eliminar.

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

Añadir prototipos

Hemos terminado de crear un retícula para dos páginas de nuestra nueva y emocionante aplicación móvil.

Ahora, queremos ofrecer una guía más clara sobre cómo funcionan juntas estas dos páginas. ¿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 con la creación de prototipos.

Cuando los usuarios hagan clic en «Este botón» en el marco «Esto o aquello», queremos que se les dirija al marco «Esto».

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

1. Haz clic en la pestaña Prototipo en la barra lateral derecha.
2. Sitúa el cursor 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 «Este». Esto abre el modal Detalles de interacción .
4. En el menú desplegable, establece el disparador en Al tocar.
5. Establece la acción como Navegar a. Desde el menú desplegable, establece el destino en el marco «Este».
6. En el menú desplegable Animaciones, selecciona Animación inteligente.

Una vez que hayas creado una interacción, sal del modal Detalles de la interacción. Pulsa el botón Presentar en la barra de herramientas para probarla.

¡Enhorabuena, ya está todo listo!