Come creare e aggiungere modelli ai tuoi progetti Figma usando i plugin

Se sei un designer a cui piace mostrare i tuoi progetti usando i modelli, può essere facile crearli in Figma.

Invece di salvare i tuoi progetti Figma e passare a un altro programma per creare un mockup, puoi facilmente scaricare plug-in di mockup in Figma. Ci sono molte opzioni di plugin in vari stili, ma sono tutte semplici da usare e si integrano in progetti più grandi.

Come trovare e scaricare i plugin Figma

Il download e l'installazione di un plug-in in Figma è lo stesso sia che tu stia utilizzando l'app o la versione del browser. Da La homepage del browser di Figma, fare clic Comunità > Plugin e widgete cerca nell'elenco o utilizza la barra di ricerca.

Da L'app di Figma, la home page offrirà la stessa opzione del browser per accedere alla pagina della community. Ma se sei su una pagina di design, puoi fare clic sul logo Figma, quindi Plugin. Se hai già installato i plugin, li vedrai elencati qui.

Per saperne di più, scegli Sfoglia i plugin nella community. Questo ti porterà alla pagina della community all'interno dell'app dove puoi cercare altri plugin.

Nella pagina della community, troverai una piccola descrizione per ciascun plug-in, la data dell'ultimo aggiornamento e la frequenza con cui è stato scaricato ciascun plug-in. Per ulteriori informazioni su ciascun plug-in, come i commenti degli utenti e le guide all'utilizzo, facendo clic sul suo nome si accede alla pagina delle informazioni di quel plug-in.

Dopo aver trovato un plug-in che desideri scaricare, fai clic sul blu Installare pulsante.

Se non sei sicuro di cosa cercare, ecco i nostri primi cinque plug-in mockup preferiti. Ce ne sono molti altri, ma è bene iniziare da qualche parte.

• Mockup di argilla 3D
• Mockup angolari
• MockRocket - Mockup 3D
• Modello
• Elementi 3D vettoriali

Come utilizzare i plug-in Mockup in Figma

Il processo di installazione dei plug-in è lo stesso indipendentemente dal tipo di plug-in che stai utilizzando, ma potrebbero esserci delle differenze nel modo in cui vengono utilizzati. Ecco perché è sempre meglio leggere la pagina della community del singolo plug-in per ulteriori dettagli.

In Figma, puoi scegliere dimensioni del telaio già pronte per schermi specifici, come l'iPhone 13 o un Android grande o piccolo. Dovresti creare il tuo design per le dimensioni del dispositivo previste piuttosto che provare a ridimensionare i design in seguito per adattarsi al tuo modello, ma alcuni modelli consentiranno dimensioni leggermente diverse con n distorsione.

Potresti anche utilizzare uno screenshot dal tuo dispositivo, che sarà perfettamente dimensionato per un mockup dello stesso dispositivo.

I mockup sono solitamente per progetti di schermi statici, anche se puoi crea un mockup video in Photoshop. Ci concentreremo sui modelli Figma per dispositivi portatili, ma puoi farlo crea un mockup da zero in Photoshop per altri dispositivi. Una volta finalizzato il design dello schermo, puoi passare alla creazione del mockup del prodotto.

Ti mostreremo come utilizzare tre dei nostri plugin suggeriti: Clay Mockups 3D, Angle Mockups e Vectory 3D Elements. Entriamo subito.

Mockup di argilla 3D

Con il tuo disegno aperto, seleziona la cornice e poi vai a Plugin e scegli Mockup di argilla 3D. Si apre una finestra in cui puoi scegliere il dispositivo per il mockup. Il tuo design dovrebbe essere visualizzato sullo schermo del mockup in questa finestra.

Puoi modificare l'angolazione del mockup e il colore in questa finestra. Quando sei soddisfatto di come appare, fai clic Salva come immagine.

Puoi tornare indietro e modificare il colore o altri aspetti in qualsiasi momento facendo clic Modifica mockup sotto Collegare nel menu di destra. Ora puoi aggiungere il tuo plug-in a progetti più grandi come presentazioni o portfolio.

Mockup angolari

Per utilizzare Angle Mockups, devi creare un account Angle per scaricare la libreria di mockup dal loro sito web. SU Il sito web di Angle, fare clic Registrazione, che farà apparire un popup in cui puoi fare clic Iscrizione e aggiungi i tuoi dati per creare un account gratuito.

Una volta effettuato l'accesso, per scaricare i mockup, fare clic su Mockup > Scarica campione. Per un set più completo di mockup, puoi pagare per l'accesso premium, ma l'esempio offerto con l'account gratuito è abbastanza buono.

Una volta scaricato, decomprimi il file. Questo contiene esempi che puoi utilizzare in Figma, Sketch e Adobe XD, oltre ad alcuni sfondi gratuiti. Aprire AngoloFigma. Troverai due video per aiutarti con l'utilizzo dei modelli, oltre a quattro set di file Figma con vari modelli.

Per importare i file nel tuo account Figma, vai al browser Figma e fai clic sul tuo profilo. Puoi accedervi dall'app andando su File > Apri Browser file. Trascina e rilascia ogni file Angle in Figma. Quindi apri il file Angle facendo doppio clic su di esso dalla pagina del browser Figma.

Trova l'angolazione del dispositivo che desideri utilizzare per il tuo modello e copialo (Cmd + C per Mac o Ctr + C per Windows). Incollalo (Cmd + V per Mac o Ctr + V per Windows) nella stessa tavola da disegno del progetto principale.

Nella tavolozza dei livelli, espandi i livelli della schermata del mockup finché non vedi il livello con l'icona di un'immagine intitolata Posiziona la tavola da disegno qui. Seleziona quel livello. Allora vai a Plugin > Mockup angolari e seleziona il tuo design originale nella finestra popup.

Questo dovrebbe essere visualizzato nella finestra di anteprima nell'angolo del tuo mockup, ma non mostrerà il dispositivo del mockup. Clic Applicare e ora lo schermo dovrebbe trovarsi sul modello del dispositivo con l'angolazione corretta.

Elementi 3D vettoriali

Vectary 3D funziona in modo simile a Clay Mockups 3D, sebbene abbia meno opzioni per i prototipi dei dispositivi poiché offre anche una varietà di risorse 3D. Apri il tuo disegno, seleziona la cornice e vai a Plugin > Elementi 3D vettoriali.

Trova il mockup che desideri utilizzare nella libreria popup, quindi fai clic Carica telaio. Una volta che il tuo design è apparso sullo schermo del dispositivo, fai clic su Esporta immagine.

Ora hai un mockup 3D del tuo progetto sul dispositivo che scegli. Puoi aggiungerlo facilmente a un altro design.

Una volta che il tuo mockup è completo, puoi salvarlo come file PNG per usarlo facilmente in un altro design. Clic File > Esporta. Seleziona l'immagine scelta da esportare, quindi fai clic su Esportare per il tuo PNG finale.

Aggiungi realismo ai tuoi progetti con i modelli Figma

Ci sono innumerevoli usi per creare modelli per i tuoi progetti. Con vari plug-in Figma, puoi trovare una grande varietà di stili con cui lavorare che puoi aggiungere alle tue presentazioni, portfolio o creare solo per divertimento per mostrare il tuo lavoro di progettazione.

Con alcune differenze nell'applicazione, i plug-in mockup Figma sono di facile accesso e utilizzo, quindi perché non provarlo?

Come creare modelli master per presentazioni in Figma

Leggi Avanti