Estensione Safari

Se usi il browser Safari per accedere alla nostra app, l'estensione ufficiale Moqups per Safari aggiungerà le seguenti funzionalità e caratteristiche:

• Converti pagine web in layout modificabili
• Acquisisci screenshot nella libreria
• Abilita il contagocce per il selettore colore
• Crea progetti e vai a Moqups

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

Installa l'estensione Moqups

1. Visita l'Apple App Store e cerca Moqups
2. Dopo aver installato l'estensione, il pulsante blu Moqups apparirà a destra della barra degli indirizzi del browser.
3. Per attivare il contagocce, dovrai aggiornare le schede che hanno l'app Moqups attualmente aperta.

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 nella barra degli strumenti

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.

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 delle immagini del team in Moqups – o annullare se vuoi riprovare!

Abilita il contagocce

La nostra estensione Safari 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 Format.

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

Perché il contagocce funziona solo se si usa un'estensione del browser?

Per fornire tutte queste funzionalità – incluso il contagocce – abbiamo scelto di affidarci alle estensioni del browser per ragioni sia tecniche che di sicurezza. Per una spiegazione completa di questa scelta e del ragionamento alla base, consulta il nostro articolo del blog.

Questa estensione è disponibile per altri browser?

Al momento, la nostra estensione è disponibile per Safari, Firefox e Chrome – e gli utenti di Brave possono installare la versione Chrome.