Estensione Firefox

La nostra estensione Firefox ti permette di convertire pagine web live, parti di una pagina o elementi selezionati in mockup completamente modificabili. Ti permette anche di portare design IA come layout modificabili, così puoi rifinirli e rivederli. Dall'estensione puoi anche generare brief di design da pagine web, acquisire screenshot, creare nuovi progetti Moqups o aprire la nostra app.

In questo articolo imparerai come installare l'estensione in Firefox e come usarne le funzionalità.

Installa l'estensione Moqups

1. Visita la pagina Firefox Browser Add-ons.
2. Dopo aver installato l'estensione, il pulsante blu Moqups apparirà a destra della barra degli indirizzi del browser.

Trasforma le pagine web live in layout modificabili

Potresti voler lavorare con mockup di pagine web live per vari motivi: aggiornare e mantenere pagine esistenti, creare nuove pagine che corrispondano al design di quelle già pubblicate, o personalizzare elementi ripetuti in grandi hub interni e siti di back-office.

L'estensione Moqups ti permette di portare in Moqups pagine web intere o selezioni. I design arrivano come layout completamente modificabili – con ogni elemento separato per facilitarne la selezione e la personalizzazione.

Con le opzioni puoi usare il design ad alta fedeltà della pagina oppure convertire quel layout in un wireframe lo-fi. Puoi anche importare la finestra corrente o adattare il layout alle viste desktop, laptop o telefono.

Per convertire una pagina web live in un mockup modificabile:

1. Fai clic sull'icona dell'estensione Moqups a destra della barra degli indirizzi del browser

2. Seleziona Hi-Fi Design

3. Scegli tra…

   • Seleziona area (Select area) per convertire una parte della pagina o singoli elementi
   • Finestra corrente (Current window) per convertire l'intera pagina
   • Le opzioni Vista Desktop, Laptop o Telefono (Desktop / Laptop / Phone View) per adattare il layout a quelle viste

4. Nel pop-up Selezione pronta (Selection ready)…

   • Fai clic sul pulsante Copia negli appunti (Copy to clipboard) per incollare il layout in un progetto Moqups aperto
   • Fai clic sul pulsante Apri in Moqups (Open in Moqups) per creare un nuovo progetto dal layout

Converti pagine web hi-fi in wireframe lo-fi

Oltre a importare le pagine web in piena fedeltà, puoi anche trasformarle in wireframe a bassa fedeltà in scala di grigi. Eliminare i colori e lo stile può aiutare a concentrarsi sul layout, sulla struttura e sul contenuto della pagina. È utile quando vuoi confrontare la struttura di fondo di pagine diverse, sperimentare soluzioni di design alternative o partire da una tela visivamente vuota durante un rebrand.

Per trasformare una pagina web hi-fi in un wireframe lo-fi:

1. Fai clic sull'icona dell'estensione Moqups a destra della barra degli indirizzi del browser.

2. Seleziona Wireframe

3. Scegli tra…

   • Seleziona area (Select area) per convertire una parte della pagina o singoli elementi
   • Finestra corrente (Current window) per convertire l'intera pagina
   • Vista Desktop, Laptop o Telefono (Desktop / Laptop / Phone View) per adattare il layout a quelle viste

4. Nel pop-up Selezione pronta (Selection ready)…

   • Fai clic sul pulsante Copia negli appunti (Copy to clipboard) per incollare il layout in un progetto Moqups aperto.
   • Fai clic sul pulsante Apri in Moqups (Open in Moqups) per creare un nuovo progetto dal layout.

Porta i design IA in Moqups

Puoi anche usare l'estensione Moqups per trasformare gli artefatti generati dall'IA in design completamente modificabili. Questo significa che puoi usare l'IA come generatore di template – che fornisce gran parte del layout e del testo segnaposto – prima di personalizzare e rifinire i dettagli in Moqups. Il tuo team può anche passare avanti e indietro tra Moqups e il tuo strumento di IA, esportando sezioni da rigenerare e poi perfezionando il risultato passo dopo passo.

Per portare un design IA nel tuo progetto Moqups:

1. Fai clic sull'icona dell'estensione Moqups a destra della barra degli indirizzi del browser.

2. Scegli Hi-Fi Design o Wireframe.

3. Seleziona Converti artefatto IA o iframe (Convert AI artifact or iframe)

4. Fai clic sull'iframe oppure seleziona un elemento con la barra spaziatrice

5. Nel pop-up Selezione pronta (Selection ready)…

   • Fai clic sul pulsante Copia negli appunti (Copy to clipboard) per incollare il layout in un progetto Moqups aperto.
   • Fai clic sul pulsante Apri in Moqups (Open in Moqups) per creare un nuovo progetto dal layout.

Genera un brief di design per l'IA

È un ottimo strumento se lavori con l'IA e vuoi darle le tue linee guida di branding. Estrae lo stile da qualsiasi finestra del browser per generare un brief di design. Puoi poi incollare il brief nel tuo prompt per l'IA, così saprà quali linee guida di branding – colori, tipografia, stile di pulsanti e campi di input – usare come riferimento per qualsiasi nuova generazione di design.

Acquisisci screenshot

Con l'estensione puoi acquisire l'area visibile di un sito web, una selezione specifica o un'intera pagina – e aggiungere quegli screenshot immediatamente alla libreria Immagini del team. Questo fa risparmiare tempo quando stai creando una mood board, cercando ispirazione, facendo ricerche sulla concorrenza o creando mockup veloci.

Per acquisire screenshot:

1. Fai clic sull'icona dell'estensione Moqups a destra della barra degli indirizzi del browser.

2. Seleziona una delle opzioni Acquisisci screenshot (Take Screenshot):

   • Area visibile (Visible Area) acquisirà solo ciò che è attualmente visibile nella finestra del browser
   • Area selezionata (Capture Region) ti permetterà di fare clic e trascinare per scegliere una parte specifica della finestra
   • Intera pagina (Full Page) acquisirà l'intera pagina web

3. Il tuo screenshot si aprirà in una nuova scheda del browser; qui puoi nominarlo, salvarlo direttamente nella libreria Immagini del team in Moqups – o annullare se vuoi riprovare!

4. Una volta fatto clic sul pulsante Salva su Moqups (Save to Moqups) e l'immagine è stata caricata, fai clic sul pulsante Fatto! Vai a Moqups (Done! Go to Moqups) per passare al tuo progetto.

Abilita il contagocce

La nostra estensione Firefox abilita anche il contagocce dell'app – così puoi puntare a qualsiasi colore sulla pagina e applicarlo immediatamente ai tuoi elementi di design.

L'installazione dell'estensione – e l'aggiornamento delle schede Moqups aperte – attiverà automaticamente il contagocce. Troverai l'icona del contagocce nel selettore colore del pannello di formattazione.

Per usare il contagocce e selezionare i colori:

1. Fai clic sull'icona del contagocce per aprire una finestra di ispezione nell'angolo in alto a destra dello schermo.
2. Man mano che sposti il cursore a mirino sulla pagina, la finestra visualizzerà una vista ravvicinata dei pixel sottostanti, nonché i loro valori RGB e Hex.
3. Fai clic per selezionare il colore sotto il cursore.

Crea progetti e vai a Moqups

Puoi creare immediatamente un nuovo progetto o andare direttamente alla Dashboard del tuo account premendo il pulsante Moqups nell'angolo in alto a destra del browser.

Questo è particolarmente utile quando si passa tra più schede nel browser – o si acquisiscono screenshot per creare mood board, mockup e storyboard.

Domande e risposte

Questa estensione è disponibile per altri browser?

Al momento, la nostra estensione è disponibile per Chrome e Firefox – e gli utenti di Brave possono installare la versione Chrome. Stiamo lavorando a un'estensione per Safari, ma potrebbe richiedere un po' più di tempo per essere implementata.