Darle vida a un prototipo no requiere conocimientos avanzados de programación. Con unas pocas propiedades bien configuradas en el modo de prototipo de Figma, puedes conseguir cambios de tamaño, transiciones de esquinas, carruseles de imágenes, superposiciones y desplazamientos automáticos que harán que tu proyecto digital luzca profesional y sea mucho más interactivo.
¿Cómo funcionan la autoanimación y el cambio de tamaño en Figma?
Antes de aplicar cualquier efecto, es fundamental cambiar del modo diseño al modo prototipo [0:25]. Sin este paso previo, las opciones de animación no estarán disponibles.
El primer ejemplo muestra dos tarjetas de libros —Cien años de soledad y Orgullo y prejuicio— que comparten el mismo tamaño en la primera pantalla, pero en la segunda una aparece más pequeña y la otra más grande [0:40]. Al conectar ambas pantallas con una flecha y configurar la interacción como tap + autoanimación, Figma interpola automáticamente las diferencias de tamaño entre los dos estados, generando una transición suave.
- Tap: equivale a un clic o toque con el dedo.
- Autoanimación: Figma detecta las diferencias entre dos frames con capas del mismo nombre y genera la transición de forma automática.
Este mismo principio se aplica al cambio de redondeo de esquinas [1:30]. Dos pantallas con tarjetas idénticas pero con distinto radio de borde producen, al reproducirlas, un efecto sutil de transformación que puede servir para estados hover o microinteracciones.
¿Qué es la interacción drag y cómo crear un carrusel de imágenes?
Para la ficha de autor de García Márquez se construye un carrusel de imágenes utilizando la interacción drag (arrastrar) en lugar de tap [2:40]. El truco técnico consiste en:
- Colocar la segunda fotografía justo al lado de la primera, sin dejar espacio en blanco.
- Ampliar la caja de la imagen para que cubra el hueco entre ambas.
- Repetir la misma lógica en la pantalla de destino, pegando la imagen anterior hacia el lado contrario.
Al seleccionar drag en el panel de propiedades [3:20], el usuario puede arrastrar con el dedo y ver cómo la imagen se desliza junto con el texto, simulando un carrusel real. La animación debe configurarse tanto en origen como en destino para que funcione en ambas direcciones.
¿Cómo se configura una superposición o overlay en Figma?
La superposición permite mostrar una pantalla por encima de otra sin abandonar la vista actual [4:30]. Es ideal para paneles de perfil de usuario, menús emergentes o fichas de configuración.
Para implementarla:
- Se conecta el icono de origen (por ejemplo, un avatar de usuario) con la pantalla que se quiere superponer.
- En el panel de propiedades se elige tap como interacción y overlay como tipo de animación.
- Aparece un recuadro verde que indica dónde se posicionará la capa superpuesta; este recuadro se puede mover hasta la posición deseada [5:10].
Un principio clave de experiencia de usuario que se menciona aquí es no dejar al usuario sin cierre [4:50]. Toda superposición necesita un botón o gesto que permita cerrarla y regresar al estado anterior sin navegar a otra pantalla.
¿Para qué sirve la opción scroll to y por qué importa nombrar las capas?
Cuando un listado es muy largo —como un catálogo de autores literarios con Lorca, García Márquez, Jane Austen o Sara Allende— obligar al usuario a hacer scroll hacia arriba resulta incómodo [5:40]. La solución es un botón de inicio conectado con la interacción scroll to.
En el panel de propiedades se selecciona scroll to y se elige la capa de destino, en este caso "cabecera" [6:10]. Al hacer clic en el botón, el prototipo se desplaza automáticamente hasta esa capa.
Aquí cobra especial importancia nombrar correctamente cada capa y cada elemento del archivo [6:20]. Si las capas tienen nombres genéricos o aleatorios, encontrar el destino correcto entre decenas de opciones se vuelve confuso. Un sistema de nomenclatura claro ahorra tiempo y errores.
- Tap + scroll to: la combinación que activa el desplazamiento automático.
- Nomenclatura de capas: buena práctica imprescindible para proyectos escalables.
Con estas cuatro técnicas —autoanimación, drag, overlay y scroll to— tienes un abanico de posibilidades para hacer que tu prototipo sea mucho más interactivo y usable. Si ya se te ha ocurrido dónde aplicar alguna de ellas, comparte tu experiencia en el panel de comentarios.
