¿Qué es Herramienta de Wireframes?

Esboza diseños de página y maquetas de interfaz en segundos. Arrastra elementos de interfaz comunes — botones, bloques de texto, imágenes, campos de entrada — sobre un lienzo y luego exporta como PNG o guarda como JSON para seguir editando.

El lienzo está construido sobre fabric.js y trae un kit completo de elementos: rectángulos, bloques de texto, botones, marcadores de imagen, campos de entrada, navbars, cards, checkboxes, desplegables, grupos de radio, barras de progreso, sliders y notas adhesivas para anotar. El zoom y el ajuste a pantalla mantienen legibles los diseños cargados, y puedes encuadrar el lienzo a ancho de móvil, tablet o escritorio. Deshacer, rehacer, agrupar, desagrupar y reordenar son accesibles por teclado. Exporta PNG o SVG para compartir, o un JSON que vuelves a abrir en el mismo estado.

Cómo usar

1. Selecciona un elemento de interfaz en la barra de herramientas — como un rectángulo, bloque de texto, botón, marcador de imagen o campo de entrada — y haz clic en el lienzo para colocarlo.
2. Arrastra los elementos para reposicionarlos, cambia su tamaño tirando de los controladores y edita el texto haciendo doble clic. Agrupa elementos para moverlos más fácilmente.
3. Exporta tu wireframe como imagen PNG para compartirlo, o guárdalo como JSON para recargarlo y continuar editando más tarde.

Cuándo usar

• Bocetar tres variantes de pantalla en 15 minutos antes de una revisión con stakeholders.
• Anotar una idea en Slack en lugar de describir el layout con palabras.
• Enseñar a un diseñador junior la diferencia entre trabajo de baja y alta fidelidad.

Resultado

Un product manager esboza la pantalla de inicio de sesión de una aplicación móvil con un marcador de logo, campos de correo electrónico y contraseña, un botón de inicio de sesión y un enlace de 'olvidé mi contraseña' — y luego exporta el PNG para compartirlo en un canal de Slack.

Preguntas frecuentes

¿En qué se diferencia esto de Figma?

Figma cubre la alta fidelidad: componentes, prototipos, colaboración en equipo. Esta herramienta es deliberadamente baja fidelidad: un kit pequeño de formas básicas y nada de detalles de estilo. Una idea de pantalla sale en minutos, no en una tarde. El resultado sirve para aclarar ideas, no para el handoff.

¿Cómo muevo los elementos píxel a píxel?

Selecciona el elemento y usa las flechas para empujes de 1 píxel. Pulsa Shift más flecha para saltos de 10 píxeles. Para cambiar tamaño, agarra los manejadores de las esquinas, y mantén Shift mientras arrastras una esquina para conservar las proporciones.

¿Puedo copiar elementos de un wireframe a otro?

Exporta ambos wireframes a JSON, abre un editor de texto y pega las entradas del array elements que necesites en el segundo JSON. Reimporta y los nuevos elementos aparecen. La mayoría duplica con Ctrl+D dentro del mismo wireframe en vez de pasar por esto.

¿Por qué el JSON a veces pesa más que el PNG?

El JSON guarda todas las propiedades de cada forma (posición, relleno, trazo, tipografía, texto) como texto legible. El PNG es una imagen rasterizada plana. En wireframes con mucho texto el JSON puede superar al PNG, pero solo el JSON te deja seguir editando.

¿Se pueden añadir formas personalizadas?

No directamente dentro de la herramienta, pero puedes agrupar las primitivas existentes (Ctrl+G) para crear un cluster reutilizable como una barra de búsqueda o una pestaña. Guarda el JSON, copia ese grupo y pégalo en archivos nuevos como tu mini librería personal.

Herramientas relacionadas