En este artículo:
Si usas el navegador Safari para acceder a nuestra aplicación, la extensión oficial de Moqups para Safari añadirá las siguientes funciones y características:
- Convertir páginas web en diseños editables
- Capturar Capturas de Pantalla a la Biblioteca
- Habilitar Cuentagotas para el Selector de Color
- Crear Proyectos e ir a Moqups
En este artículo, aprenderás cómo instalar la extensión en Safari y cómo usar las funciones de la extensión.
Instalar la extensión de Moqups
- Visita la Apple App Store y busca Moqups
- Después de instalar la extensión, el botón azul de Moqups aparecerá a la derecha de la barra de direcciones del navegador.
- Para habilitar el cuentagotas, deberás actualizar cualquier pestaña que tenga la aplicación Moqups abierta actualmente.
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.
Las extensiones de Moqups te permiten 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:
-
Haz clic en el icono de la extensión de Moqups en la barra de herramientas
-
Selecciona Hi-Fi Design
-
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
-
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:
-
Haz clic en el icono de la extensión de Moqups a la derecha de la barra de direcciones del navegador.
-
Selecciona Wireframe
-
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
-
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:
-
Haz clic en el icono de la extensión de Moqups a la derecha de la barra de direcciones del navegador.
-
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
-
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!
Habilitar el cuentagotas
Nuestra extensión de Safari también habilita el cuentagotas de nuestra aplicación, para que puedas seleccionar cualquier color en la página y aplicarlo instantáneamente 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:
- Haz clic en el icono del cuentagotas para abrir una ventana de inspector en la esquina superior derecha de la pantalla.
- 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.
- 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
¿Por qué el cuentagotas solo funciona si uso una extensión de navegador?
Para proporcionar todas estas funciones —incluido el cuentagotas— elegimos depender de las extensiones del navegador por razones técnicas y de seguridad. Para una explicación completa de esta elección y el razonamiento detrás de ella, consulta nuestra publicación del blog.
¿Esta extensión está disponible para otros navegadores?
Por ahora, nuestra extensión está disponible para Safari, Firefox y Chrome, y los usuarios de Brave pueden instalar la versión de Chrome.