En el lenguaje del diseño digital, la palabra mockup se usa de forma tan fluida que tres diseñadores distintos podrían dar tres definiciones diferentes. Para algunos es un boceto en escala de grises, para otros una pantalla finalizada en Figma, y para otros la imagen promocional con un iPhone mostrando la app. Todas estas acepciones son correctas en diferentes contextos, y el problema surge cuando un cliente y un diseñador usan la misma palabra para referirse a cosas distintas.
Esta guía aclara de una vez por todas qué es un mockup en 2026, cómo se diferencia de un wireframe y un prototipo, en qué contextos se usa cada uno y con qué herramientas se crean. También encontrarás 20 ejemplos reales, entre mockups de producto digital y de presentación, para entender cuáles puedes usar en tu porfolio.
Qué aprenderás en esta guía:
- Las tres definiciones de "mockup" que existen en el sector
- Las diferencias técnicas entre wireframe, mockup, prototipo y product shot
- Cuándo usar cada uno en el proceso de diseño
- Las mejores herramientas para crearlos (gratis y de pago)
- 20 ejemplos reales con análisis de qué los hace eficaces
- Recursos de mockups gratuitos para descargar
Qué es un mockup
Un mockup es la representación de alta fidelidad (high fidelity) de cómo se verá una interfaz digital una vez terminada. Contiene los colores definitivos, la tipografía real, las imágenes finales y los estados de los componentes (hover, disabled), pero no es interactivo. Es una foto de "alta calidad" del diseño.
En el sentido técnico más común, el mockup se sitúa entre dos extremos:
- Wireframe (baja/media fidelidad) → estructura y layout, normalmente en escala de grises, sin decisiones visuales
- Mockup (alta fidelidad, estático) → la página tal como se verá, pixel perfect, pero fija
- Prototipo (alta fidelidad, interactivo) → el mockup + enlaces clicables que simulan el uso real
Un diseñador moderno pasa del wireframe → mockup → prototipo en el mismo proyecto, aumentando la fidelidad a medida que se consolidan las decisiones.
Los otros dos significados de "mockup"
Además del significado técnico anterior, "mockup" se utiliza en otros dos contextos distintos:
- Mockup 3D de presentación = una imagen en la que el diseño se muestra "dentro" de un dispositivo físico (iPhone, MacBook, iPad, valla publicitaria). Típico de casos de estudio de porfolio o de presentaciones comerciales. Ejemplo: la pantalla de la app dentro de la foto de una persona sosteniendo un móvil.
- Mockup de diseño de impresión = en el mundo gráfico, es el render de un producto físico: tarjeta de visita, packaging, camisetas. Es diferente del digital, pero se usa la misma palabra.
Para evitar confusiones, cuando te comuniques con un cliente o un colega, añade siempre un adjetivo aclaratorio: "mockup de UI" para el diseño pixel-perfect, "mockup 3D" o "product shot" para la imagen de presentación, "mockup de impresión" para los productos físicos.
Wireframe, Mockup, Prototipo: tabla comparativa
| Característica | Wireframe | Mockup | Prototipo |
|---|---|---|---|
| Fidelidad visual | Baja/media | Alta | Alta |
| Colores | Escala de grises | Colores de marca | Colores de marca |
| Tipografía | Placeholder | Definitiva | Definitiva |
| Imágenes | Rectángulos con X | Imágenes reales | Imágenes reales |
| Interactivo | No | No | Sí |
| Tiempo de creación | 30 min - 2 horas | 2-8 horas | 2 horas - 2 días |
| Objetivo | Validar estructura y flujo | Validar diseño visual | Testear la experiencia |
| Público | Equipo interno | Equipo + stakeholders | Usuarios reales (test de usabilidad) |
Para profundizar en la parte inicial del proceso, lee nuestra guía sobre el wireframe.
Cuándo usar un mockup en tu proceso
El mockup no es necesario en todos los proyectos. Hay tres momentos en los que es realmente útil:
- Presentación a stakeholders sin perfil técnico — un cliente que no es diseñador no entiende un wireframe. Un mockup pixel-perfect acelera la aprobación.
- Validación del diseño visual — una vez decidida la estructura, el mockup sirve para establecer los colores, la tipografía y la jerarquía visual antes de crear prototipos interactivos.
- Handoff para desarrolladores — los devs necesitan ver el estado final de cada página con los valores exactos (espaciado, colores, sombras). El mockup en Figma con el panel "Inspect" es el estándar.
Cuándo no es necesario:
- En fase de investigación e ideación — en esas etapas, el wireframe es más rápido y tiene menor coste cognitivo.
- Cuando trabajas con un sistema de diseño maduro — puedes saltar del wireframe directamente al prototipo clicable.
- Para tests de usabilidad sobre flujos — se necesitan prototipos interactivos, no mockups estáticos.
Herramientas para crear mockups
El 90% de los mockups digitales en 2026 se crean con una de estas herramientas:
1. Figma (el 90% del mercado)
Figma se ha convertido en el estándar absoluto para el diseño digital. Permite crear mockups pixel-perfect a partir de wireframes, reutilizar componentes de un sistema de diseño, colaborar en tiempo real y exportar assets para los desarrolladores. Es gratis para uso básico y de pago para equipos (~15€/usuario/mes).
Por qué es el estándar: componentes con variantes, auto-layout que se redimensiona automáticamente, Variables para los design tokens, plugins de accesibilidad, integración con Jira/Linear/Notion.
2. Adobe XD / Sketch
Sketch (solo para Mac) fue el rey hasta 2020. Todavía lo usan algunos diseñadores senior por inercia. Adobe XD está prácticamente descatalogado por Adobe (2023), pero algunos equipos aún lo utilizan.
En 2026, recomendamos a quienes empiezan que vayan directamente a Figma y se salten estos dos.
3. Penpot (open source)
Penpot es una alternativa open source a Figma, gratuita incluso para equipos. Es interesante para quienes quieren evitar el vendor lock-in, pero la comunidad es mucho más pequeña. Para proyectos profesionales con clientes, Figma sigue siendo más conveniente.
4. Photoshop (legacy)
Antes de 2015, Photoshop era el estándar para mockups. Hoy en día se usa solo para mockups que requieren efectos fotográficos complejos o retoques visuales avanzados. Para diseño de UI puro, está obsoleto.
5. Herramientas para mockups 3D de presentación
Para los mockups de presentación (tu diseño dentro de un móvil físico), las mejores herramientas son:
- Shots — herramienta web gratuita con marcos de dispositivos modernos, exportación en 1 clic.
- Mockuuups Studio — enorme biblioteca de escenas realistas.
- Angle 5 — colección premium de mockups vectoriales para Figma.
- Placeit — amplia biblioteca de vídeos y mockups con renderizado fotorrealista.
20 ejemplos reales de mockups (por tipo)
Analizados para que veas qué los hace eficaces, no solo para que los copies.
Mockups UI pixel-perfect (en Figma)
- Stripe Dashboard — mockup de todos los estados (vacío, cargando, error, con datos). Jerarquía visual perfecta.
- Linear App — mockup con microinteracciones anotadas. Cada pantalla especifica qué cambia al hacer clic.
- Notion Mobile — mockup de una funcionalidad en los 3 temas (claro, oscuro, sistema). Muestra un pensamiento multicontexto.
- Figma Community — Weather App — excelente ejemplo para juniors: limpio, bien estructurado, con componentes reutilizables.
- Nubank Card Design — mockup tanto de la interfaz como de la tarjeta física. Muestra un sistema de diseño transmedia.
Mockups de presentación (iPhone/MacBook)
- Dropbox — caso de estudio de producto — la pantalla de la app de Dropbox en un MacBook Pro fotografiado en estilo lifestyle.
- Spotify — campaña anual — iPhone con la app de Spotify en la mano de una persona, con un concierto de fondo desenfocado.
- Airbnb — funcionalidad de onboarding — MacBook + iPhone + iPad en la misma imagen, mostrando la experiencia multidispositivo.
- Calm — funcionalidad de la app — iPhone en la mesita de noche, con luz suave, mostrando la pantalla de meditación.
- Duolingo — gamificación — pantalla de Duolingo en un iPhone, con efecto de zoom en la función de "racha".
Mockups para porfolio / caso de estudio
- Medium "Cómo rediseñé Netflix" — serie de mockups a página completa con notas de diseño debajo de cada uno.
- Dribbble — rediseño de flujo de checkout — 6 mockups secuenciales que muestran el antes y el después.
- Behance — caso de estudio de app bancaria — mockup con anotaciones de las decisiones de diseño.
- Read.cv — porfolio de Maya Gao — mockups estáticos intercalados con textos de explicación contextual.
- UX Collective — rediseño de app de supermercado — 10 pantallas secuenciales con storytelling del proceso.
Mockups con "factor wow" para presentaciones
- Apple Keynote — lanzamiento de Vision Pro — mockup 3D fotorrealista de la interfaz en RA, sobre el fondo de un salón.
- Tesla — mockup de la app — iPhone en el salpicadero de un Tesla con la app visible.
- Cabify — rediseño de marca 2018 — video mockup con transiciones fluidas entre estados de la app.
- Pinterest — lanzamiento de Lens — iPhone apuntando a un objeto real con la interfaz de Lens superpuesta.
- Headspace — función de respiración — mockup con un gradiente animado para mostrar la respiración.
Mockups gratis: dónde descargarlos
Si quieres empezar ya con mockups listos sin crearlos desde cero, estos son los recursos gratuitos más completos de 2026:
- Figma Community — busca "mockup" + el dispositivo que necesites. Cientos de plantillas gratuitas, descargables con 1 clic.
- Freepik — Mockups — más de 1 millón de mockups gratuitos (requiere atribución) en formato PSD.
- Mockup World — contenido curado, de alta calidad, cada mockup en PSD con smart objects.
- LS Graphics — mockups premium de calidad tipo Apple, con varias opciones gratuitas.
- Smart Mockups — basado en web, crea mockups en 30 segundos desde el navegador.
Errores comunes al crear mockups
Los que vemos más a menudo en los porfolios de los diseñadores junior:
- Mockups muy bonitos pero estructuralmente incoherentes — visualmente agradables, pero con una jerarquía incorrecta. La primera prueba es quitar el color: si el diseño funciona en escala de grises, funciona. Si no, el color está ocultando problemas de estructura.
- Tipografía inconsistente — 4 fuentes diferentes en una sola pantalla, tamaños aleatorios. Un mockup serio tiene como máximo 2 familias tipográficas y una escala definida.
- Lorem ipsum infinito — rellenar todos los campos con "Lorem ipsum dolor sit amet" le da al diseño un aspecto falso. Usa contenido realista o ejemplos plausibles del dominio.
- Imágenes de stock gigantescas — una foto de 1600×900 en cada tarjeta. Usa imágenes realistas para el contexto, pero que no dominen.
- Solo el estado ideal — mostrar únicamente el "happy path" sin estados vacíos, de carga o de error. Un mockup senior siempre muestra todos los estados del componente.
Preguntas frecuentes
¿Cuál es la diferencia entre mockup y prototipo?
El mockup es estático: es una imagen del diseño final pero no reacciona a los clics. El prototipo es el mockup conectado de tal manera que cuando haces clic en un botón, pasas a otra pantalla, simulando el uso real del producto. Ambos viven en el mismo archivo de Figma: construyes el mockup y luego, en el modo Prototipo, añades las conexiones clicables.
¿Es mejor Figma o Photoshop para los mockups?
Figma, sin ninguna duda, para mockups de interfaces digitales. Figma es vectorial, colaborativo, basado en componentes y rápido de modificar. Photoshop solo tiene sentido para mockups de presentación con efectos fotográficos (reflejos, sombras complejas, smart objects) que Figma no maneja. En 2026, cualquier diseñador UX/UI trabaja el 95% del tiempo en Figma y abre Photoshop solo para retoques ocasionales.
¿Un cliente sin perfil técnico entiende la diferencia entre wireframe y mockup?
Rara vez. Un cliente ve un wireframe y a menudo piensa "qué feo, ¿ya está terminado?" porque le falta la formación visual para interpretar la abstracción. Por esta razón, muchos diseñadores se saltan la fase de wireframe al presentar a clientes y pasan directamente al mockup. En los equipos internos, sin embargo, los wireframes son indispensables para decidir la estructura sin distraerse con lo visual.
¿Sigue siendo necesario crear mockups con la IA en 2026?
La IA (Midjourney, Stable Diffusion, Figma AI) puede generar mockups de presentación rápidos, pero no reemplaza el mockup de UI profesional. Un diseñador usa la IA para: generar imágenes de placeholder realistas, crear variaciones de color rápidas o acelerar el storytelling visual del porfolio. Pero los componentes de interfaz serios, accesibles y coherentes con el sistema de diseño todavía deben construirse a mano.
¿Cómo se presenta un mockup a un cliente?
Tres reglas: (1) preséntalos siempre en contexto — no las pantallas sueltas, sino mostradas dentro de dispositivos o con un breve texto que explique de qué se trata; (2) numera las pantallas — "1/12 — Home", "2/12 — Lista de productos" — esto ayuda al cliente a orientarse; (3) adjunta una leyenda de los componentes reutilizados. Un cliente que entiende la lógica de tu sistema de diseño estará más dispuesto a pagar por el mantenimiento futuro.
Próximos pasos
Saber crear mockups de calidad profesional es un requisito básico para cualquier diseñador UX/UI en 2026. Pero el verdadero salto en tu carrera llega cuando aprendes a construirlos dentro de un sistema de diseño coherente, con componentes reutilizables y estados completos, no como píxeles pintados uno por uno.
El curso completo de UX Design de CorsoUX te enseña a pasar de wireframe → mockup → prototipo con Figma de manera sistemática: más de 40 horas de ejercicios prácticos, la construcción de un sistema de diseño personal y casos de estudio reales. Al finalizar, tendrás 3-4 mockups de alta calidad en tu porfolio, cada uno con una explicación del proceso de diseño.
Para empezar ya:
- Guía de wireframes — el paso previo al mockup
- Tutorial de Figma en español — la herramienta para crearlos
- Sistemas de Diseño: cómo construir uno — el siguiente nivel para convertirte en senior
- Diseño UI: principios y tendencias 2026 — cómo hacer que tus mockups sean visualmente eficaces
