Extensión de Google Chrome

Nuestra extensión de Chrome te permite convertir páginas web en vivo, partes de una página o elementos seleccionados en maquetas totalmente editables. También te permite traer diseños de IA como diseños editables para que puedas pulirlos y revisarlos. Desde la extensión también puedes generar briefings de diseño a partir de páginas web, tomar capturas de pantalla, crear nuevos proyectos de Moqups o abrir nuestra aplicación.

En este artículo, aprenderás cómo instalar la extensión en Chrome y cómo usar las funciones de la extensión.

Instalar la extensión de Moqups

1. Visita la Chrome Web Store.
2. Después de instalar la extensión, el botón azul de Moqups aparecerá a la derecha de la barra de direcciones del navegador.

Convertir páginas web en vivo en diseños editables

Puede que quieras trabajar con maquetas de páginas web en vivo por varios motivos: actualizar y mantener páginas existentes, crear páginas nuevas que coincidan con el diseño de lo que ya está publicado, o personalizar elementos repetidos en grandes centros internos y sitios de back-office.

La extensión de Moqups te permite traer páginas web completas o selecciones a Moqups. Los diseños llegan como diseños totalmente editables, con cada elemento separado para que sea fácil seleccionarlo y personalizarlo.

Además, hay opciones que te permiten usar el diseño de alta fidelidad de la página o convertir ese diseño en un wireframe de baja fidelidad. También puedes importar la ventana actual o ajustar el diseño a las vistas de escritorio, portátil o teléfono.

Para convertir una página web en vivo en una maqueta editable:

1. Haz clic en el icono de la extensión de Moqups a la derecha de la barra de direcciones del navegador

2. Selecciona Hi-Fi Design

3. Elige entre…

   • Seleccionar área (Select area) para convertir una parte de una página o elementos individuales
   • Ventana actual (Current window) para convertir la página completa
   • Las opciones Escritorio (Desktop), Portátil (Laptop) o Vista de teléfono (Phone View) para ajustar el diseño a esas vistas

4. En la ventana emergente Selección lista (Selection ready)…

   • Haz clic en el botón Copiar al portapapeles (Copy to clipboard) para pegar el diseño en un proyecto de Moqups abierto
   • Haz clic en el botón Abrir en Moqups (Open in Moqups) para crear un nuevo proyecto a partir del diseño

Convertir páginas web de alta fidelidad en wireframes de baja fidelidad

Además de importar páginas web con fidelidad total, también puedes convertirlas en wireframes de baja fidelidad en escala de grises. Quitar los colores y el estilo puede ayudar a centrar la atención en el diseño, la estructura y el contenido de la página. Esto es útil cuando quieres comparar la estructura subyacente de distintas páginas, probar soluciones de diseño alternativas o partir de una pizarra visual en blanco durante un cambio de marca.

Para convertir una página web de alta fidelidad en un wireframe de baja fidelidad:

1. Haz clic en el icono de la extensión de Moqups a la derecha de la barra de direcciones del navegador.

2. Selecciona Wireframe

3. Elige entre…

   • Seleccionar área (Select area) para convertir una parte de una página o elementos individuales
   • Ventana actual (Current window) para convertir la página completa
   • Escritorio (Desktop), Portátil (Laptop) o Vista de teléfono (Phone View) para ajustar el diseño a esas vistas

4. En la ventana emergente Selección lista (Selection ready)…

   • Haz clic en el botón Copiar al portapapeles (Copy to clipboard) para pegar el diseño en un proyecto de Moqups abierto.
   • Haz clic en el botón Abrir en Moqups (Open in Moqups) para crear un nuevo proyecto a partir del diseño.

Traer diseños de IA a Moqups

También puedes usar la extensión de Moqups para convertir artefactos generados por IA en diseños totalmente editables. Esto significa que puedes usar la IA como generador de plantillas, que aporta la mayor parte del diseño y el texto de relleno, antes de personalizar y afinar los detalles en Moqups. Tu equipo también puede ir y volver entre Moqups y tu propia herramienta de IA, exportando secciones para regenerarlas y refinando el resultado paso a paso.

Para traer un diseño de IA a tu proyecto de Moqups:

1. Haz clic en el icono de la extensión de Moqups a la derecha de la barra de direcciones del navegador.

2. Elige Hi-Fi Design o Wireframe.

3. Selecciona Convertir artefacto de IA o iframe (Convert AI artifact or iframe)

4. Haz clic en el iframe o selecciona un elemento con la barra espaciadora

5. En la ventana emergente Selección lista (Selection ready)…

   • Haz clic en el botón Copiar al portapapeles (Copy to clipboard) para pegar el diseño en un proyecto de Moqups abierto.
   • Haz clic en el botón Abrir en Moqups (Open in Moqups) para crear un nuevo proyecto a partir del diseño.

Generar un briefing de diseño para IA

Esta es una gran herramienta si trabajas con IA y quieres darle tus pautas de marca. Extrae el estilo de cualquier ventana del navegador para generar un briefing de diseño. Luego puedes pegar el briefing en tu prompt de IA para que sepa qué pautas de marca (colores, tipografía, estilo de botones y campos de entrada) debe usar como referencia al generar cualquier diseño nuevo.

Tomar capturas de pantalla

Con la extensión, puedes capturar el área visible de un sitio web, una selección específica o una página completa, y agregar esas capturas instantáneamente a tu biblioteca de Imágenes del Equipo. Esto ahorra tiempo cuando estás preparando un tablero de inspiración, buscando ideas, haciendo investigación de la competencia o creando maquetas rápidas.

Para tomar capturas de pantalla:

1. Haz clic en el icono de la extensión de Moqups a la derecha de la barra de direcciones del navegador.

2. Selecciona una de las opciones de Tomar captura de pantalla (Take Screenshot):

   • Área visible (Visible Area) capturará solo lo que está visible actualmente en la ventana del navegador
   • Capturar región (Capture Region) te permitirá hacer clic y arrastrar para elegir una parte específica de la ventana
   • Página completa (Full Page) capturará toda la página web

3. Tu captura de pantalla se abrirá en una nueva pestaña del navegador; aquí puedes nombrarla, guardarla directamente en tu biblioteca de Imágenes del Equipo en Moqups, ¡o cancelar si quieres intentarlo de nuevo!

4. Cuando hayas hecho clic en el botón Guardar en Moqups (Save to Moqups) y la imagen se haya subido, haz clic en el botón ¡Listo! Ir a Moqups (Done! Go to Moqups) para saltar a tu proyecto.

Habilitar el cuentagotas

Para versiones de Chrome anteriores a la 95, nuestra extensión también habilita el cuentagotas de nuestra aplicación, para que puedas seleccionar cualquier color de la página y aplicarlo al instante a tus elementos de diseño.

Instalar la extensión —y actualizar cualquier pestaña de Moqups abierta— activará automáticamente el cuentagotas. Encontrarás el icono del cuentagotas en el selector de color del Panel de Formato.

Para usar el cuentagotas para seleccionar colores:

1. Haz clic en el icono del cuentagotas para abrir una ventana de inspector en la esquina superior derecha de la pantalla.
2. A medida que mueves el cursor en forma de cruz por la página, la ventana mostrará una vista de cerca de los píxeles debajo, así como sus valores RGB y Hex.
3. Haz clic para seleccionar el color debajo del cursor.

Crear proyectos e ir a Moqups

Puedes crear instantáneamente un nuevo proyecto, o ir directamente al Dashboard de tu cuenta, presionando el botón de Moqups en la esquina superior derecha de tu navegador.

Esto es particularmente útil cuando estás saltando entre múltiples pestañas en el navegador, o tomando capturas de pantalla para crear tableros de inspiración, maquetas y guiones gráficos.

Preguntas y respuestas

¿Esta extensión está disponible para otros navegadores?

Ahora mismo, nuestra extensión está disponible para Chrome y Firefox, y los usuarios de Brave pueden instalar la versión de Chrome. Estamos trabajando en una extensión para Safari, pero puede tardar un poco más en implementarse.