Esistono milioni di modi per fare una presentazione, ma Figma è uno strumento sottovalutato. La funzione prototipo in Figma consente una moltitudine di opzioni di transizione personalizzabili. Non solo le tue transizioni stupiranno il tuo pubblico, ma puoi incorporare plug-in per un tocco in più e mantenere il tuo pubblico coinvolto, facendoti sentire sicuro delle tue capacità.
Ti mostreremo come fare una presentazione killer usando Figma; basta seguire questa guida.
1. Imposta la tua prima cornice di presentazione
Aprire Figma e fare clic Nuovo file di progettazione. Clicca il Strumento Cornice (F) per disegnare la cornice o per scegliere una cornice preimpostata sulla destra utilizzando Presentazione > Diapositiva 16:9. Puoi creare un modello principale risparmiare tempo.
Rinomina la cornice facendo doppio clic sul titolo blu in alto a sinistra. Imposta un colore di sfondo; tuttavia, puoi sempre cambiarlo in un secondo momento evidenziando tutti i fotogrammi e cambiando il colore di riempimento.
2. Aggiungi il testo del titolo
Utilizzare il Strumento di testo (T) e scrivi il tuo titolo. Usa caselle di testo separate per righe separate, con solo una o due parole per riga. Imposta le tue preferenze di testo in Testo menu a destra. Figma utilizza i caratteri di Google, quindi potresti volerlo sapere i migliori abbinamenti di caratteri Google.
3. Aggiungi un'immagine
Puoi usa una foto d'archivio o scatta la tua foto rilevante. Per aggiungere un'immagine, disegna un rettangolo usando il Strumento rettangolo (R). La tua immagine siederà in questa forma.
Fare clic sul rettangolo e andare a Riempire e fare clic su quadrato colorato. Quindi fare clic Solido > Immagine > Scegli immagine. Trova la tua immagine e clicca Aprire. Passa il mouse sopra l'immagine per rivelare 4 cerchi bianchi. Fare clic e trascinare un cerchio verso l'interno per arrotondare gli angoli dell'immagine.
Disporre i livelli in modo che l'immagine sia sul retro e il testo sul livello superiore. Puoi trascinare i livelli nel pannello dei livelli o utilizzando Cmd/Ctr + [ per inviare un livello indietro o Cmd/Ctr + ] per portare uno strato in avanti.
4. Crea la prima transizione
La prima transizione aprirà l'immagine e consentirà al testo del titolo di scorrere nella cornice. Innanzitutto, duplica il primo fotogramma selezionandolo e premendo Cmd/Ctr + D per duplicarlo.
Nel riquadro di sinistra, ridimensiona l'immagine riducendo gli attributi di altezza nel file H casella a circa 150, lasciando una fessura orizzontale dell'immagine. Allinea al centro selezionando entrambe le immagini attraverso i fotogrammi e facendo clic ozione + V (Mac) o Alt+V (Finestre).
Per completare la transizione dell'immagine, seleziona l'immagine a sinistra. Quindi cambia il opacità allo 0% nel menu di destra nella casella accanto a Passa attraverso sotto Livello. Ciò renderà l'immagine invisibile prima che passi e si apra.
Fare clic sulla prima casella di testo e tenere premuto Spostare. Inizia a trascinare, quindi tieni premuto Barra spaziatrice e continua a trascinare il testo fuori dalla cornice. Sembra che scompaia una volta fuori dall'inquadratura. Senza l'aggiunta della barra spaziatrice, questa transizione non funzionerà, ma se tieni premuta la barra spaziatrice prima di trascinare, si sposterà solo la cornice.
Fallo di nuovo per la tua seconda o successiva casella di testo, ma trascinale un po' più a sinistra per aggiungere un po' di varietà nella transizione. Con il testo ancora selezionato, riduci l'opacità del livello allo 0% nello stesso modo in cui hai fatto in precedenza per l'immagine.
Per impostare la transizione, vai a Prototipo. Seleziona la cornice di sinistra e fai clic su cerchio blu che appare al centro del lato destro della cornice. Trascinalo, in modo che la linea vada al tuo secondo fotogramma.
Nella tendina che dice Immediato, Selezionare Animazione intelligente. Quindi cambia la casella con il cronometro a 1000 ms. Questo imposterà la transizione in modo che richieda un secondo dal clic del mouse. Le altre impostazioni dovrebbero essere impostate per impostazione predefinita. Assicurati di non rinominare i titoli dei frame dopo aver impostato una transizione, altrimenti i file non si connetteranno.
Clicca il Giocare a pulsante per testare la transizione. Tornare a Disegno per continuare il tuo design di presentazione.
5. Aggiungi più diapositive
Per passare dalla diapositiva 1 alla diapositiva 2, duplica la diapositiva più a destra (Cmd/Ctr + D). Nella nuova cornice, diapositiva 2, spostare le caselle di testo fuori dalla cornice utilizzando la tecnica precedente (Spostare + Lagna poi Barra spaziatrice dopo aver iniziato a trascinare). Sposta una casella di testo a sinistra e l'altra a destra della cornice. Imposta l'opacità su 0% per entrambi.
Per l'immagine, ridimensionala e spostala leggermente fuori centro, quindi imposta l'opacità su 0%. Questo, in effetti, ti dà una tela bianca per la tua seconda diapositiva. Puoi aggiungere il contenuto sopra le risorse invisibili della diapositiva precedente.
Aggiungi un'immagine grande al centro della cornice. Per aggiungere alcune decorazioni sopra la tua immagine, usa a Plugin Figma per GIF o scarica una GIF adesiva da Giphy e trascinalo sopra l'immagine. Seleziona la tua immagine principale ed eventuali GIF e raggruppale insieme (Cmd/Ctr + G), questo assicura che Smart Animate funzioni correttamente.
Seleziona il gruppo e copialo (Cmd/Ctr + C). Quindi incollalo sulla cornice della diapositiva 1 (Cmd/Ctr + V). Ridimensiona e imposta l'opacità su 0%. Quindi sposta questo livello sul retro (Cmd/Ctr + [). Ciò garantisce una transizione graduale alla diapositiva successiva.
Vai a Prototipo. Seleziona la diapositiva 2 e fai clic sul cerchio blu per trascinarlo nella diapositiva 3. L'impostazione predefinita di Figma nel menu del prototipo consiste nell'utilizzare le impostazioni precedenti, quindi dovrebbero essere tutte impostate in base alla transizione precedente. Tornare a Disegno.
Duplica l'ultima diapositiva (Cmd/Ctr + D). Questa diapositiva utilizzerà la stessa immagine della precedente, ma la ridimensioneremo su un lato del fotogramma. Sposta l'immagine a sinistra della cornice trascinandola mentre tieni premuto Spostare. Passa il mouse sul bordo destro dell'immagine finché non vengono visualizzate le frecce opposte, fai clic e trascina il bordo destro dell'immagine verso sinistra fino a quando non sei soddisfatto.
Vai a Prototipo e collegare i due frame insieme. Quindi torna a Disegno.
Aggiungi un titolo e un corpo del testo a destra dell'immagine ridimensionata e raggruppali insieme. Copia il gruppo di testo e incollalo nella diapositiva precedente. Fare clic e trascinare il gruppo di testo a destra della cornice come prima.
6. Aggiungi un mockup
Crea un mockup; dai un'occhiata al nostro guida alla creazione di modelli utilizzando i plug-in in Figma. Aggiungi una nuova cornice, quindi incolla il tuo mockup su di essa. Ridimensiona il mockup per adattarlo alla cornice.
Copia il mockup e incollalo nel frame precedente. Ridimensiona per adattarlo alla porzione dell'immagine, quindi spostalo sul retro dei livelli e imposta l'opacità su 0%. Collega le cornici Prototipo.
7. Aggiungi etichette
Duplica la cornice del mockup. Aggiungi un titolo e una descrizione per spiegare parti del tuo mockup. Raggruppa il testo e assegnagli un nome. Allora puoi creare un indicatore di vetro smerigliato per i tuoi punti elenco e linee. Raggruppa una linea con un cerchio. Allinea il tuo indicatore con ciò che sta descrivendo e aggiungi la tua descrizione accanto ad esso. Collega le cornici Prototipo.
Duplica la cornice e aggiungi un altro indicatore di punto elenco con ciò che sta descrivendo. Prototipi questo di nuovo. Duplica ogni fotogramma per punto elenco, in modo che ogni punto elenco passi da solo.
8. Termina la tua presentazione
Duplica l'ultima diapositiva. Scrivi un'ultima parola o due e centrala. Copia il testo e incollalo nella diapositiva precedente.
Ridimensiona il testo tenendo premuto K durante il ridimensionamento: ciò mantiene il testo formattato mentre lo ridimensiona. Posiziona il testo da qualche parte vicino alla parte superiore del mockup e invia il livello sul retro, sotto l'immagine. Imposta l'opacità su 0%. Torna alla diapositiva finale.
Sposta tutti gli altri oggetti fuori dalla cornice usando il metodo di trascinamento. La transizione farà scorrere tutto verso i lati e verso l'alto mentre il testo si sposta dall'alto verso il basso e si espande. Collegamento diapositive Prototipo.
9. Condividi la tua presentazione Figma
Puoi accedere alla tua presentazione ovunque tu sia in grado di accedere al tuo account Figma o condividere l'URL con altri, in modo che possano guardare da qualsiasi luogo. Per presentare la presentazione finale con le sue transizioni, fare clic su Giocare a pulsante e presente in modalità a schermo intero.
Puoi anche salvare i fotogrammi come PDF, anche se così facendo perderai le transizioni animate.
Migliora le tue presentazioni con Figma
Non solo questa presentazione è minimalista, che non travolgerà il tuo pubblico, ma le transizioni sono professionali e pulite. Non ci vuole un esperto di UI/UX per usare Figma in un modo che avvantaggia le tue presentazioni, indipendentemente dal tuo ruolo lavorativo. Presenta con sicurezza e sarai sommerso di domande su come è stata realizzata la tua presentazione.
