1) Planifica antes de abrir Figma
Define el objetivo del prototipo (flujo, look & feel, microinteracciones), las pantallas clave y el contenido mínimo. Ten a mano referencias y patrones UI.
Tip pro: acordad con el equipo qué se valida en esta ronda (navegación, copy, jerarquía visual) para evitar rehacer trabajo.
2) Crea el wireframe en baja fidelidad
- Crea un Frame con dimensiones del dispositivo (1440 desktop / 768 tablet / 375 móvil).
- Usa formas básicas y texto para estructura; sin color para centrarte en funcionalidad.
- Construye con Auto Layout para tener bloques fluidos y escalables.
- Anota comportamientos y estados (hover, error, vacío) con etiquetas.
Resultado: mapa claro de contenidos y prioridades, listo para revisión rápida.
3) Pasa a media y alta fidelidad
Tras validar el esqueleto, sube fidelidad:
- Tipografía y jerarquía: define estilos (H1, H2, body).
- Paleta y temas: crea variables de color (light/dark) y espaciado.
- Componentes: botones, tarjetas, inputs con variants y propiedades.
- Estados: default, hover, focus, disabled y error.
Tip pro: usa Variables para colores/espaciados y conecta con Design Tokens en tu repo. Un cambio global = diseño actualizado.
4) Añade interacciones para el prototipo
- Activa la pestaña Prototype y conecta los flujos con hotspots.
- Configura eventos: On click → Navigate to, Open overlay, Swap variant.
- Usa Smart Animate para transiciones suaves entre estados.
- Simula microinteracciones (menús, acordeones, modales) sin caer en fuegos artificiales.
5) Testea, comparte y itera
- Present Mode: prueba en escala 100% para detectar fricciones.
- Compartir: enlace con permisos de vista/comentario para stakeholders.
- Hand-off a devs: añade una página de especificaciones con medidas, estilos y assets marcados para exportar.
Checklist rápida
- Wireframe validado
- Estilos tipográficos y de color centralizados
- Componentes con variants y estados
- Interacciones principales definidas
- Feedback aplicado y prototipo estable
Preguntas frecuentes
¿Necesito experiencia en diseño para usar Figma?
No. Puedes empezar con plantillas y componentes; lo clave es entender el flujo que quieres validar.
¿Diferencia entre wireframe y prototipo?
El wireframe es estructura y contenido; el prototipo añade interactividad y simula el flujo real.
¿La versión gratuita sirve para prototipos?
Sí. Para proyectos pequeños y validaciones internas suele ser suficiente.