Prototipado interactivo

Un prototipo es una simulacion interactiva del producto. Permite probar flujos antes de desarrollar.

Beneficios

• Validar ideas rapidamente
• Comunicar vision a stakeholders
• Probar con usuarios reales
• Identificar problemas temprano
• Ahorrar costos de desarrollo

Figma: Conceptos basicos

FRAMES (Contenedores)
- Desktop: 1440 x 900
- Mobile: 375 x 812 (iPhone)
- Tablet: 768 x 1024

COMPONENTES
- Elementos reutilizables
- Cambias uno, cambian todos
- Ideal para botones, cards, headers

AUTO LAYOUT
- Espaciado automatico
- Responsive
- Similar a Flexbox

Creando interacciones

En Figma (modo Prototype):

1. Selecciona elemento (ej: boton)
2. Arrastra conexion a frame destino
3. Configura trigger:
   - On Click
   - On Hover
   - On Drag
   - While Pressing

4. Configura animacion:
   - Instant
   - Dissolve
   - Smart Animate
   - Move In/Out
   - Push
   - Slide In/Out

Flujos esenciales a prototipar

• Onboarding: Primera experiencia
• Tarea principal: El core del producto
• Checkout/Conversion: Flujo de compra
• Recuperacion de errores: Que pasa cuando algo falla

Prototipos para pruebas

Checklist antes de testear:

[ ] Todos los botones tienen destino
[ ] Estados hover/pressed definidos
[ ] Estados de carga incluidos
[ ] Mensajes de error preparados
[ ] Flujo completo navegable
[ ] Sin links rotos
[ ] Tamano correcto de dispositivo

Compartir prototipo

• Link de visualizacion: Solo ver
• Link de edicion: Colaborar
• Embed: Insertar en presentaciones
• Exportar: PNG, SVG, PDF