Guía para la creación de prototipos en Figma

Antes de empezar

Quién puede utilizar esta función

Está disponible en cualquier equipo o plan.

Cualquier persona con acceso de tipo Puede editar puede crear prototipos.

Cualquier persona con acceso de tipo Puede visualizar 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:

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

Ve nuestro vídeo sobre la creación de prototipos a continuación. O consulta nuestra lista de reproducción de prototipos y colaboraciones en Youtube.

Flujos y puntos de inicio

Con la creación de prototipos en Figma, puedes crear varios flujos para tu prototipo en una página para 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 trazar todo el recorrido de un usuario a través de su aplicación o sitio web, o puede centrarse en un segmento específico a través de su propio flujo. Por ejemplo: tu prototipo abarca todas las interacciones posibles en un sitio de comercio electrónico. Dentro del prototipo, tienes flujos para crear una cuenta, añadir artículos a un carrito y realizar el pago.

Figma crea un punto de inicio de flujo cuando añades tu primera conexión entre dos marcos. Hay otras maneras de añadir un punto de inicio 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, a continuación, en Añadir punto de inicio.
• Duplica un marco 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 inicio del flujo.

Más información sobre puntos de partida y flujos →

Crear conexiones

1. Selecciona la zona activa 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 hará del primer marco un punto de inicio.

Crear interacciones y animaciones

1. Abre la pestaña Prototipo en la barra lateral derecha
2. Añade interacciones
3. Configura los detalles de la interacción
4. Aplica una animación
5. Previsualiza tu animación

Ajustar la configuración del prototipo

1. Selecciona un dispositivo y modelo
2. Previsualiza tu prototipo
3. Selecciona un color de Fondo
4. Establece el Marco inicial del prototipo

Más información sobre la creación de prototipos

Empieza

• Crea prototipos de interacciones y animaciones
• Selecciona un punto de inicio para tu prototipo
• Personaliza el dispositivo prototipo
• Crea prototipos de acciones, desencadenantes y animaciones

Interacciones avanzadas

• Crea superposiciones en tus prototipos
• Crea animaciones avanzadas con Animación inteligente
• Crea prototipos de interacciones de desplazamiento con comportamiento en caso de desbordamiento
• Añade vídeo a los prototipos
• Añade GIF animados a tus prototipos
• Utilizar variables en prototipos
• Utiliza expresiones en prototipos
• Acciones múltiples y condicionales
• Modos variables en prototipos

Compartir y colaborar

• Ver conexiones de prototipos
• Configurar las opciones de vista de presentación del prototipo
• Compartir tu prototipo
• Ver prototipos en un dispositivo móvil
• Hacer comentarios sobre los prototipos

Glosario

• Una zona activa es donde tiene lugar la interacción. Una zona activa puede ser cualquier objeto dentro del marco original, como un enlace, un botón, una imagen o un icono, etc.
• Las conexiones son las flechas azules o «fideos» que conectan la zona activa con el destino. Aplicamos la configuración de interacción y animación a través de la conexión.
• Un flujo es la red de marcos conectados que forman un camino a través de un prototipo. Cada flujo tiene su propio punto de inicio. Puedes tener varios flujos dentro de un prototipo.
• El punto de inicio es el primer marco de un flujo. Establezca varios puntos de inicio para mostrar diferentes flujos del prototipo en la vista de presentación.
• El desencadenante determina qué tipo de interacción con la zona activa hará que el prototipo avance. Puede tratarse de una interacción táctil o con el ratón, como tocar, arrastrar, hacer clic, pasar el ratón por encima, etc.
• El destino es donde termina la transición. Debe ser un marco de nivel superior (un marco que se añade directamente al lienzo) y no un objeto dentro de un marco. Si pensamos en movernos de A a B, A es la zona activa 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 marco a otro. Puedes 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 atenuación afecta la aceleración de la animación,define si empieza de forma lenta o rápida. Esto te permite crear animaciones que parezcan más naturales.
• Las superposiciones son marcos que aparecen sobre la pantalla o el marco actual. Puedes utilizar 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á qué aspecto tendrá o cómo funcionará algo en el prototipo. Mostramos vistas previas tanto de animaciones como de configuraciones de prototipos de dispositivos.