Prototipado en Figma | Figma para principiantes #7

El siguiente artículo está dedicado al prototipado en Figma. Hoy, aprenderás cómo crear componentes interactivos, organizar tus diseños y compartir tus prototipos. Sigue leyendo para aprender más.

Prototipado en Figma – tabla de contenido:

  1. Pruebas de usabilidad
  2. Creación de prototipos
  3. Opciones de prototipo
  4. Flujo
  5. Compartir prototipos

Pruebas de usabilidad

Los prototipos de interfaz interactiva te permiten mapear el camino del viaje del usuario a través de tu aplicación. Puedes usarlos para investigar cómo los usuarios interactúan con tu interfaz. Esto se llama pruebas de usabilidad, y te ayuda a encontrar problemas que los usuarios pueden encontrar.

Las pruebas de usabilidad en las primeras etapas del desarrollo de una aplicación ayudan a minimizar las pérdidas que una empresa podría sufrir al lanzar una aplicación no probada al mercado. A veces, las ideas que parecen geniales para los diseñadores resultan ser poco intuitivas para los usuarios. 

Creación de prototipos

Puedes crear prototipos en la pestaña Prototipo en el panel de propiedades.

Opciones de prototipo

Cuando no seleccionas ninguna capa, verás la configuración del prototipo en la pestaña Prototipo.

  • Dispositivo – selecciona Dispositivo y Modelo
  • Vista previa – aquí puedes ver cómo las configuraciones que cambias afectarán la apariencia del prototipo que compartas más tarde.
  • Fondo – puedes seleccionar un color de fondo para personalizar el prototipo y que coincida con tu marca
  • Flujos – puedes elegir el marco inicial del prototipo

Consejo útil: Un punto de partida de flujo se creará automáticamente cuando agregues tu primera conexión entre dos marcos.

Flujo

Un flujo es la red de marcos y conexiones en una sola página. Puedes crear varios flujos separados, como un flujo para crear una cuenta, otro para ver productos o completar transacciones. 

Para crear una conexión, debes tener activa la pestaña de Prototipado, luego selecciona un marco u objeto en un marco y usa el nodo circular para arrastrar una conexión a otro marco.

Puedes ajustar la configuración de las conexiones agregadas en la sección de Interacciones del panel de propiedades, después de hacer clic en el objeto conectado. Puedes especificar el tipo de interacción.

Una vez que hagas clic en una interacción dada, tendrás acceso a configuraciones adicionales.

a) Detalles de interacción – especifica el tipo de interacción (Al tocar, Al arrastrar, Mientras se pasa el cursor, Mientras se presiona) y qué debería causar la interacción (Navegar a, Cambiar a). 

b) Animación – aquí puedes especificar cómo debería comportarse el elemento después de la interacción. 

Para eliminar la conexión, haz clic y arrastra en ambos extremos.

Compartir prototipos

Para compartir un prototipo, primero debes previsualizarlo con el botón Presentar. En la vista previa del prototipo, el botón Compartir prototipo en la Barra de herramientas estará disponible.

Cuando hagas clic en el botón Compartir prototipo, se abrirá una ventana donde puedes establecer el nivel de acceso (Puede ver, Puede editar) y especificar quién puede abrir el archivo (Cualquiera con el enlace, Solo personas invitadas a este archivo).

Tarea 7. Agrega conexiones entre tus pantallas. 

  • Vincula el botón “Iniciar sesión” al marco de Inicio.
  • Vincula la foto y el nombre del producto que están en el marco de Inicio al marco de Producto.
  • Usa el botón “Atrás” y crea una conexión para regresar a la pantalla de Inicio.

Después de agregar conexiones, puedes previsualizarlas con el botón Presentar y verificar cómo funciona tu prototipo. 

Acabas de aprender más sobre prototipado en Figma. Otros recursos: ¿Qué es la investigación de UX?

Si te gusta nuestro contenido, únete a nuestra comunidad de abejas ocupadas en Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

Klaudia Kowalczyk

Un diseñador gráfico y de UX que transmite en el diseño lo que no se puede expresar con palabras. Para él, cada color, línea o fuente utilizada tiene un significado. Apasionado por el diseño gráfico y web.

View all posts →

Klaudia Kowalczyk

Un diseñador gráfico y de UX que transmite en el diseño lo que no se puede expresar con palabras. Para él, cada color, línea o fuente utilizada tiene un significado. Apasionado por el diseño gráfico y web.

Share
Published by
Klaudia Kowalczyk

Recent Posts

2 modelos de trabajo eficientes: trabajo híbrido remoto y trabajo remoto, y cómo adaptarlos para tu beneficio

El trabajo híbrido remoto y el trabajo remoto son dos modelos distintivos de trabajo utilizados…

21 minutes ago

¿Qué es el job crafting y cuáles son sus ventajas?

Un buen empleador se da cuenta de que el logro del rendimiento y los resultados…

2 hours ago

Estilo de liderazgo de los millennials

Cada generación tiene ciertos rasgos y valores que conforman su carácter único. En parte, esto…

4 hours ago

¿Cómo averiguar si tu idea de startup ya existe? 5 pasos simples y fáciles

Es una pesadilla para muchos aspirantes a emprendedores escuchar que su idea de startup ya…

6 hours ago

3 razones por las que las empresas optan por una congelación de contrataciones

Cada emprendedor espera que su negocio crezca lo mejor posible, generando los retornos financieros esperados,…

8 hours ago

¿Cómo encontrar ángeles inversores y cómo empezar a cooperar con ellos?

Hay muchas formas de financiar startups en el mercado. Apoyar ideas innovadoras por parte de…

10 hours ago