Figma: dinamismo e interacción avanzada

1Estructura de una interacción y primer prototipo

Toda interacción en Prototype se compone de cinco piezas: Hotspot (dónde), Trigger (qué la dispara), Action (qué pasa), Destination y Animation.

1. Cambia a la pestaña Prototype (esquina superior derecha).
2. Selecciona un elemento interactivo (p. ej. un botón de la Pantalla A): aparece un círculo azul en su borde.
3. Arrastra el conector hasta la Pantalla B.
4. Interaction details: Trigger On click, Action Navigate to, Destination Pantalla B, Animation Smart Animate (Ease in and out, 300 ms).
5. Pulsa Present (▶) para probar el flujo.

2Catálogo de Triggers, Actions y Animations

Un mismo elemento puede tener varios triggers en paralelo (multi-trigger): p. ej. While hovering → Change to Hover, y On click → Navigate to.

Animaciones disponibles: Instant, Dissolve, Smart Animate, Scroll Animate, Move In/Out, Push, Slide In/Out. Curvas de aceleración (easing): Linear, Ease In, Ease Out, Ease In and Out, variantes "Back" con rebote, Custom Cubic Bezier, y presets tipo resorte (Gentle, Quick, Bouncy, Slow, Custom Spring).

3Smart Animate: reglas de continuidad de capas

Para morphing de formas, ambas capas deben tener el mismo número exacto de puntos de anclaje. Propiedades interpolables: Width, Height, X, Y, rotación (0°-360°), opacidad (0%-100%), Fill/Stroke/gradientes, Corner Radius.

Problemas frecuentes

4Menú desplegable, modales y estados interactivos

Dropdown con variantes

1. Diseña la tarjeta/botón en estado cerrado con Auto Layout.
2. Duplica el marco para el estado abierto: despliega y añade las opciones, el marco debe envolver todo.
3. Capas internas con nombres idénticos en ambos estados.
4. Selecciona ambos marcos → Combine as Variants → nómbralas State=Closed y State=Open.
5. En Closed, ajusta la capa del menú a Opacity 0%.
6. Prototype: conecta Closed → Open (Trigger On click, Action Change to, Animation Smart Animate Ease out 250-300 ms) y de vuelta.

Modales — Método A (Open Overlay)

1. Diseña la pantalla base y, aparte, el cuadro del modal.
2. Prototype: conecta el botón activador al marco del modal.
3. Configura: Action Open Overlay · Centered/Manual · Close when clicking outside · Add background behind overlay (50%) · Animation Dissolve/Move in.

Modales — Método B (Smart Animate entre pantallas)

1. Duplica la pantalla: A (normal) y B (con el modal abierto).
2. En A, el modal con Opacity 0%, ligeramente reducido/desplazado.
3. En B, el modal al 100%, centrado, con un rectángulo de fondo semitransparente.
4. Conecta A → B (Trigger On click, Action Navigate to, Animation Smart Animate custom o Gentle, 300 ms).

Estados interactivos (Hover, Pressed, Focus, Disabled)

1. Diseña el estado Default con Auto Layout y conviértelo en componente.
2. Properties → + → Variant → añade Default, Hover, Pressed, Focus, Disabled.
3. Conecta Default → Hover (While hovering, Change to, Smart Animate 150 ms), Hover → Pressed y Default → Pressed (While pressing, Change to, Smart Animate 100 ms).
4. Para forzar Disabled en el diseño, cambia manualmente la variante en el panel derecho.
5. Si además debe navegar: añade Trigger On click → Action Navigate to (Figma gestiona hover/pressed automáticamente en Present).

5Slider animado y variantes combinadas

Slider: Track (rectángulo horizontal 280×8 px, radio 4 px, fill #E0E0E0), Fill (rectángulo superpuesto 40×8 px, radio 4 px, fill #6200EE), Thumb (círculo 24×24 px, fill #6200EE, con drop shadow). Agrupa los tres, Auto Layout, Component Set con variantes Value=0 (Thumb X=0, Fill 8 px) y Value=100 (Thumb X=256 px, Fill 280 px). Conecta Thumb Value=0 → Value=100 con Trigger On drag, Action Change to, Animation Smart Animate (Custom Spring/Ease out, 200 ms).

Variantes combinadas: un Component Set admite varias propiedades Variant a la vez. Ejemplo de botón "Guardar" con estado de negocio: crea Default (texto "Guardar"), Procesando ("Guardando...", opacidad reducida), Éxito (fill color/success, "Guardado ✓") y Error (fill color/error, "Reintentar"); combínalos como variantes con la propiedad State. Si además añades una propiedad Size (Medium/Large), Figma genera las 8 combinaciones automáticamente, sin crear un componente distinto por cada cruce.

✓Ideas clave que debes dominar

• Sé describir las cinco piezas de una interacción: Trigger, Action, Destination, Animation, Easing.
• Sé crear una transición básica entre dos pantallas.
• Conozco al menos 5 triggers y un caso de uso de cada uno.
• Conozco las acciones principales del catálogo (Navigate to, Change to, Open Overlay...).
• Sé qué animaciones existen y cuándo usar cada una.
• Entiendo la regla fundamental de Smart Animate (mismos nombres y jerarquía).
• Sé crear un menú desplegable con Combine as Variants.
• Sé crear un modal con Open Overlay y con Smart Animate entre pantallas.
• Sé crear un componente con estados Default, Hover, Pressed, Focus y Disabled.
• Sé construir un slider animado como Component Set con Trigger On drag.
• Sé combinar varias propiedades Variant en un mismo Component Set.
• Sé diagnosticar por qué un Smart Animate no interpola o se recorta un elemento.