Guía para el prototipado en Figma

Antes de empezar

Quién puede utilizar esta función

Compatible con cualquier equipo o plan.

Cualquiera con acceso de puede editar puede crear prototipos.

Cualquiera que tenga acceso de puede ver puede reproducir prototipos en la vista de presentación.

Las funciones de creación de prototipos de Figma te permiten crear flujos interactivos que exploran cómo un usuario puede interactuar con tus diseños.

Los prototipos son una forma fantástica de hacer lo siguiente:

• Previsualizar interacciones y flujos de usuarios.
• Compartir y repetir tus ideas.
• Recibir comentarios de tus colaboradores.
• Probar las interacciones con los usuarios.
• Presentar tus diseños a las partes interesadas.

Ve nuestro video sobre la creación de prototipos más abajo. O accede a nuestra Lista de reproducción de prototipos y colaboraciones en Youtube.

Flujos y puntos de inicio

Con la creación de los prototipados en Figma, puedes crear varios flujos para tu prototipo en una página y obtener una vista previa del recorrido completo y la experiencia de un usuario a través de tus diseños.

Un flujo es la red de marcos y conexiones en una sola página. Un prototipo puede mapear todo el recorrido de un usuario a través de tu aplicación o sitio web, o puede enfocarse en un segmento específico de él a través de su propio flujo. Por ejemplo: tu prototipo cubre todas las interacciones posibles en un sitio de comercio electrónico. Dentro del prototipo, tienes flujos para crear una cuenta, agregar artículos a un carrito y realizar la compra.

Figma crea un punto de inicio de flujo cuando agrega su primera conexión entre dos marcos. Hay algunas otras formas de agregar un punto de partida de flujo a tu prototipo:

• Con el marco de inicio seleccionado, haz clic en en la sección Punto de inicio del flujo de la barra lateral derecha.
• Haz clic con el botón derecho en el marco y, luego, en Agregar punto de inicio.
• Duplica un fotograma con un punto de inicio existente.

Cuando llegue el momento de probar tus diseños, puedes compartir el prototipo completo o copiar el enlace a un punto de partida de flujo.

Obtén más información sobre puntos de partida y flujos →

Crear conexiones

1. Selecciona el hotspot para la conexión.
2. Haz clic en para crear la conexión.
3. Arrástralo al destino.
4. Si no hay conexiones existentes, Figma tomará el primer marco como punto de partida.

Crear interacciones y animaciones

1. Abre la pestaña Prototipo en la barra lateral derecha.
2. Agrega interacciones.
3. Establece los detalles de la interacción.
4. Aplica una animación.
5. Obtén una vista previa de tu animación.

Ajustar la configuración del prototipo

1. Selecciona un dispositivo y modelo.
2. Obtén una vista previa de tu prototipo.
3. Selecciona Color de fondo.
4. Establece el Marco inicial del prototipo.

Más información sobre prototipado

Comenzar

• Crea prototipos de interacciones y animaciones.
• Selecciona un punto de partida para tu prototipo.
• Personaliza tu prototipo de dispositivo.
• Acciones, disparadores y animaciones de prototipos.

Interacciones avanzadas

• Crea superposiciones en tus prototipos
• Crea animaciones avanzadas con Animación inteligente.
• Interacciones de desplazamiento de prototipo con comportamiento de desbordamiento.
• Agrega video a los prototipos.
• Agrega GIF animados a los prototipos.
• Utilizar variables en los prototipos
• Usa expresiones en prototipos.
• Múltiples acciones y condicionales.
• Modos variables en prototipos.

Comparte y colabora

• Ve las conexiones de prototipos.
• Establece las opciones de vista de presentación del prototipo.
• Comparte tu prototipo.
• Ve los prototipos en un dispositivo móvil.
• Haz comentarios sobre los prototipos.

Glosario

• Un hotspot es donde tiene lugar la interacción. Puede ser cualquier objeto dentro del marco original, como un enlace, un botón, una imagen o un ícono, etc.
• Las conexiones son las flechas azules o "noodles" que conectan el hotspot al destino. Aplicamos la configuración de interacción y animación a través de la conexión.
• Un flujo es la red de tramas conectadas que forman un camino a través de un prototipo. Cada flujo posee su propio punto de partida. Puedes tener varios flujos dentro de un prototipo.
• El punto de partida es el primer marco de un flujo. Establece varios puntos de partida para mostrar diferentes flujos del prototipo en la vista de presentación.
• El disparador determina qué tipo de interacción con el hotspot hará que el prototipo avance. Puede tratarse de una interacción táctil o con el mouse, como tocar, arrastrar, hacer clic, pasar el mouse por encima, etcétera.
• El destino indica dónde termina la transición. Debe ser un marco de nivel superior, uno que se agrega directamente al lienzo, y no un objeto dentro de un marco. Si pensamos en movernos de A a B, A es el hotspot y B es el destino.
• La acción define el tipo de progresión que se está produciendo en el prototipo. Por ejemplo, la acción podría ser navegar a otro marco o abrir una URL externa.
• Los ajustes de animación determinan cómo se mueve el prototipo de un fotograma a otro. Puede controlar el tipo de animación, así como la velocidad y la dirección.
• Una transición es el tipo de animación. Esto define cómo se mueve la acción al destino.
• La dirección controla la dirección desde donde proviene la transición. Elige entre izquierda, derecha, arriba o abajo.
• La duración controla el tiempo que se tarda en completar la animación. Cuanto más corta sea la duración, más rápida será la transición. Selecciona una duración entre 1 ms y 10000 ms (10 segundos).
• La aceleración afecta el aceleramiento de la animación, ya sea que comience lenta o rápidamente. Esto te permite crear animaciones que sean más naturales.
• Las superposiciones son marcos que aparecen encima de la pantalla o marco actual. Puedes emplear superposiciones para crear información sobre herramientas, menús interactivos, alertas o confirmaciones.
• El comportamiento de desbordamiento permite definir cómo responde el prototipo al desplazamiento. Esto te permite crear interacciones de usuario más avanzadas, como carruseles, galerías o mapas interactivos.
• Elige qué dispositivo se mostrará al presentar tu prototipo. Define tanto el dispositivo como el modelo.
• El color de fondo te permite definir el color en el fondo de tu prototipo.
• Si tienes un prototipo con marcos verticales y horizontales, puedes seleccionar una orientación. La orientación se establece para todo el prototipo. No es posible cambiar entre la vista vertical y horizontal dentro de un prototipo.
• Una vista previa te mostrará cómo se verá o funcionará algo en el prototipo. Mostramos vistas previas tanto de animaciones como de configuraciones de prototipos de dispositivos.