Υπάρχουν εκατομμύρια τρόποι για να κάνετε μια παρουσίαση, αλλά το Figma είναι ένα υποτιμημένο εργαλείο για αυτό. Η λειτουργία πρωτοτύπου στο Figma επιτρέπει μια πληθώρα προσαρμόσιμων επιλογών μετάβασης. Όχι μόνο οι μεταβάσεις σας θα εντυπωσιάσουν το κοινό σας, αλλά μπορείτε να ενσωματώσετε πρόσθετα για επιπλέον πιτσαρία και να κρατήσετε το κοινό σας αφοσιωμένο, κάνοντάς σας να αισθάνεστε σίγουροι για τις ικανότητές σας.
Θα σας δείξουμε πώς να κάνετε μια δολοφονική παρουσίαση χρησιμοποιώντας το Figma. απλά ακολουθήστε αυτόν τον οδηγό.
1. Ρυθμίστε το πρώτο σας πλαίσιο παρουσίασης
Ανοιξε Figma και κάντε κλικ Νέο αρχείο σχεδίασης. Κάντε κλικ στο Εργαλείο πλαισίου (φά) για να σχεδιάσετε το καρέ σας ή να επιλέξετε ένα προκαθορισμένο πλαίσιο στα δεξιά χρησιμοποιώντας Παρουσίαση > Διαφάνεια 16:9. Μπορείς δημιουργήστε ένα κύριο πρότυπο για εξοικονόμηση χρόνου.
Μετονομάστε το καρέ σας κάνοντας διπλό κλικ στον μπλε τίτλο επάνω αριστερά. Ορίστε ένα χρώμα φόντου. Ωστόσο, μπορείτε πάντα να το αλλάξετε αργότερα επισημαίνοντας όλα τα καρέ και αλλάζοντας το χρώμα πλήρωσης.
2. Προσθέστε το κείμενο τίτλου
Χρησιμοποιήστε το Εργαλείο κειμένου (Τ) και γράψτε τον τίτλο σας. Χρησιμοποιήστε ξεχωριστά πλαίσια κειμένου για ξεχωριστές γραμμές, με μόνο μία ή δύο λέξεις ανά γραμμή. Ορίστε τις προτιμήσεις κειμένου σας στο Κείμενο μενού στα δεξιά. Το Figma χρησιμοποιεί γραμματοσειρές Google, οπότε ίσως θέλετε να μάθετε τα καλύτερα ζεύγη γραμματοσειρών Google.
3. Προσθήκη εικόνας
Μπορείς χρησιμοποιήστε μια φωτογραφία στοκ ή τραβήξτε τη δική σας σχετική φωτογραφία. Για να προσθέσετε μια εικόνα, σχεδιάστε ένα ορθογώνιο χρησιμοποιώντας το Ορθογώνιο εργαλείο (R). Η εικόνα σας θα έχει αυτό το σχήμα.
Κάντε κλικ στο ορθογώνιο και μεταβείτε στο Γέμισμα και κάντε κλικ στο χρωματιστό τετράγωνο. Στη συνέχεια κάντε κλικ Στερεά > Εικόνα > Επιλογή εικόνας. Βρείτε την εικόνα σας και κάντε κλικ Ανοιξε. Τοποθετήστε το δείκτη του ποντικιού πάνω από την εικόνα για να αποκαλύψετε 4 λευκούς κύκλους. Κάντε κλικ και σύρετε έναν κύκλο προς τα μέσα για να στρογγυλοποιήσετε τις γωνίες της εικόνας σας.
Τακτοποιήστε τα στρώματά σας έτσι ώστε η εικόνα να βρίσκεται στο πίσω μέρος και το κείμενο στο επάνω επίπεδο. Μπορείτε να σύρετε τα επίπεδα στον πίνακα επιπέδων ή χρησιμοποιώντας ντοmd/Ctrl + [ για να στείλετε ένα στρώμα πίσω ή ντοmd/Ctrl + ] να φέρει ένα στρώμα μπροστά.
4. Δημιουργήστε την Πρώτη Μετάβαση
Η πρώτη μετάβαση θα ανοίξει την εικόνα και θα επιτρέψει στο κείμενο του τίτλου να ολισθήσει στο πλαίσιο. Πρώτα, αντιγράψτε το πρώτο πλαίσιο επιλέγοντάς το και πατώντας ντοmd/Ctrl + D για να το αντιγράψετε.
Στο αριστερό πλαίσιο, μειώστε την κλίμακα της εικόνας μειώνοντας τα χαρακτηριστικά ύψους στο H πλαίσιο στο 150 περίπου, αφήνοντας μια οριζόντια σχισμή της εικόνας. Στοίχιση στο κέντρο επιλέγοντας και τις δύο εικόνες στα καρέ και κάνοντας κλικ Οψηφίο + V (Mac) ή Alt + V (Windows).
Για να ολοκληρώσετε τη μετάβαση της εικόνας, επιλέξτε την αριστερή εικόνα. Στη συνέχεια αλλάξτε το αδιαφάνεια στο 0% στο δεξιό μενού στο πλαίσιο δίπλα στο Pass Through κάτω από το Layer. Αυτό θα κάνει την εικόνα αόρατη πριν μεταβεί και ανοίξει.
Κάντε κλικ στο πρώτο πλαίσιο κειμένου και κρατήστε πατημένο Βάρδια. Ξεκινήστε να σύρετε και, στη συνέχεια, κρατήστε πατημένο Spacebar και συνεχίστε να σύρετε το κείμενο από το πλαίσιο. Μοιάζει σαν να εξαφανίζεται μια φορά έξω από το κάδρο. Χωρίς την προσθήκη του διαστήματος, αυτή η μετάβαση δεν θα λειτουργήσει, αλλά αν κρατήσετε το πλήκτρο διαστήματος πριν το σύρετε, θα μετακινήσει μόνο το καρέ σας.
Κάντε αυτό ξανά για το δεύτερο ή τα επόμενα πλαίσια κειμένου, αλλά σύρετέ τα λίγο πιο αριστερά για να προσθέσετε κάποια ποικιλία στη μετάβαση. Με το κείμενο ακόμα επιλεγμένο, μειώστε την αδιαφάνεια του επιπέδου στο 0% με τον ίδιο τρόπο που κάνατε προηγουμένως για την εικόνα.
Για να ορίσετε τη μετάβαση, μεταβείτε στο Πρωτότυπο. Επιλέξτε το αριστερό πλαίσιο και κάντε κλικ στο μπλε κύκλος που εμφανίζεται στο κέντρο της δεξιάς πλευράς του πλαισίου. Σύρετε το, ώστε η γραμμή να πηγαίνει στο δεύτερο καρέ σας.
Στο αναπτυσσόμενο μενού που λέει Στιγμή, επιλέξτε Έξυπνο Animate. Στη συνέχεια αλλάξτε το πλαίσιο με το χρονόμετρο έως 1000ms. Αυτό θα ρυθμίσει τη μετάβασή σας να διαρκεί ένα δευτερόλεπτο από το κλικ του ποντικιού. Οι υπόλοιπες ρυθμίσεις θα πρέπει να οριστούν από προεπιλογή. Βεβαιωθείτε ότι δεν μετονομάζετε τίτλους πλαισίων αφού ορίσετε μια μετάβαση, διαφορετικά τα αρχεία δεν θα συνδεθούν.
Κάντε κλικ στο Παίζω κουμπί για να δοκιμάσετε τη μετάβασή σας. Επιστρέψτε στο Σχέδιο για να συνεχίσετε τον σχεδιασμό της παρουσίασής σας.
5. Προσθήκη περισσότερων διαφανειών
Για να μεταβείτε από τη διαφάνεια 1 στη διαφάνεια 2, αντιγράψτε τη διαφάνεια που βρίσκεται στη δεξιά πλευρά (ντοmd/Ctrl + ρε). Στο νέο πλαίσιο - διαφάνεια 2 - μετακινήστε τα πλαίσια κειμένου έξω από το πλαίσιο χρησιμοποιώντας την προηγούμενη τεχνική (Βάρδια + Σέρνω έπειτα Spacebar αφού αρχίσατε να σέρνετε). Μετακινήστε το ένα πλαίσιο κειμένου στα αριστερά και το άλλο στα δεξιά του πλαισίου. Ορίστε την αδιαφάνεια στο 0% και για τα δύο.
Για την εικόνα, μειώστε την κλίμακα και μετακινήστε την ελαφρώς εκτός κέντρου και, στη συνέχεια, ορίστε την αδιαφάνεια στο 0%. Αυτό, ουσιαστικά, σας δίνει έναν κενό καμβά για τη δεύτερη διαφάνειά σας. Μπορείτε να προσθέσετε το περιεχόμενο πάνω από τα αόρατα στοιχεία από την προηγούμενη διαφάνεια.
Προσθέστε μια μεγάλη εικόνα στο κέντρο του πλαισίου. Για να προσθέσετε μερικά διακοσμητικά πάνω από την εικόνα σας, χρησιμοποιήστε a Πρόσθετο Figma για GIF ή κατεβάστε ένα αυτοκόλλητο GIF από τη Giphy και σύρετέ το πάνω από την εικόνα. Επιλέξτε την κύρια εικόνα σας και τυχόν GIF και ομαδοποιήστε τα μαζί (ντοmd/Ctrl + σολ), αυτό διασφαλίζει ότι το Smart Animate θα λειτουργεί σωστά.
Επιλέξτε την ομάδα και αντιγράψτε την (ντοmd/Ctrl + ντο). Στη συνέχεια επικολλήστε το στο πλαίσιο της διαφάνειας 1 (ντοmd/Ctrl + V). Μειώστε το και ορίστε την αδιαφάνεια στο 0%. Στη συνέχεια μετακινήστε αυτό το στρώμα προς τα πίσω (ντοmd/Ctrl + [). Αυτό εξασφαλίζει μια ομαλή μετάβαση στην επόμενη διαφάνεια.
Παω σε Πρωτότυπο. Επιλέξτε τη διαφάνεια 2 και κάντε κλικ στον μπλε κύκλο για να τη σύρετε στη διαφάνεια 3. Η προεπιλογή του Figma στο πρωτότυπο μενού είναι να χρησιμοποιεί τις προηγούμενες ρυθμίσεις, επομένως θα πρέπει να οριστούν όλες σύμφωνα με την προηγούμενη μετάβαση. Επιστρέψτε στο Σχέδιο.
Αντιγράψτε την τελευταία διαφάνεια (ντοmd/Ctrl + D). Αυτή η διαφάνεια θα χρησιμοποιεί την ίδια εικόνα με την προηγούμενη, αλλά θα την κλιμακώσουμε στη μία πλευρά του πλαισίου. Μετακινήστε την εικόνα στα αριστερά του πλαισίου σύροντάς την κρατώντας την Βάρδια. Τοποθετήστε το δείκτη του ποντικιού στη δεξιά άκρη της εικόνας μέχρι να εμφανιστούν τα βέλη που βλέπουν απέναντι, κάντε κλικ και σύρετε τη δεξιά άκρη της εικόνας προς τα αριστερά μέχρι να ικανοποιηθεί.
Παω σε Πρωτότυπο και συνδέστε τα δύο πλαίσια μεταξύ τους. Στη συνέχεια, επιστρέψτε στο Σχέδιο.
Προσθέστε ένα κείμενο τίτλου και σώματος στα δεξιά της εικόνας σε κλίμακα και ομαδοποιήστε τα μαζί. Αντιγράψτε την ομάδα κειμένου και επικολλήστε την στην προηγούμενη διαφάνεια. Κάντε κλικ και σύρετε την ομάδα κειμένου στα δεξιά του πλαισίου όπως πριν.
6. Προσθέστε ένα Mockup
Δημιουργήστε μια μακέτα. ελέγξτε μας οδηγός για τη δημιουργία μακέτες χρησιμοποιώντας πρόσθετα στο Figma. Προσθέστε ένα νέο πλαίσιο και, στη συνέχεια, επικολλήστε το mockup σας σε αυτό. Αλλάξτε το μέγεθος της μακέτας ώστε να ταιριάζει στο πλαίσιο.
Αντιγράψτε το mockup και επικολλήστε το στο προηγούμενο πλαίσιο. Αλλάξτε το μέγεθός του ώστε να ταιριάζει στο τμήμα της εικόνας, στη συνέχεια μετακινήστε το στο πίσω μέρος των επιπέδων και ορίστε την αδιαφάνεια στο 0%. Συνδέστε τα πλαίσια Πρωτότυπο.
7. Προσθήκη ετικετών
Αντιγράψτε το πλαίσιο μακέτας. Προσθέστε έναν τίτλο και μια περιγραφή για να εξηγήσετε μέρη της μακέτας σας. Ομαδοποιήστε το κείμενο και ονομάστε το. Τότε μπορείς δημιουργήστε μια ένδειξη παγωμένου γυαλιού για τα σημεία και τις γραμμές σας. Ομαδοποιήστε μια γραμμή με έναν κύκλο. Ευθυγραμμίστε τον δείκτη σας με αυτό που περιγράφει και προσθέστε την περιγραφή σας δίπλα του. Συνδέστε τα πλαίσια Πρωτότυπο.
Αντιγράψτε το πλαίσιο και προσθέστε μια άλλη ένδειξη κουκκίδας με αυτό που περιγράφει. Κάντε το πρωτότυπο ξανά. Αντιγράψτε κάθε πλαίσιο ανά σημείο κουκκίδας, έτσι ώστε κάθε σημείο κουκκίδας να μεταβαίνει μόνο του.
8. Τερματίστε την Παρουσίασή σας
Αντιγράψτε την τελευταία διαφάνεια. Γράψτε μια ή δύο τελευταίες λέξεις και κεντράρετε την. Αντιγράψτε το κείμενο και επικολλήστε το στην προηγούμενη διαφάνεια.
Μειώστε το κείμενο κρατώντας πατημένο το κουμπί κ κατά την κλιμάκωσή του—αυτό διατηρεί το κείμενό σας μορφοποιημένο ενώ το μέγεθος του μειώνεται. Τοποθετήστε το κείμενό σας κάπου κοντά στην κορυφή της μακέτας και στείλτε το στρώμα στο πίσω μέρος, κάτω από την εικόνα. Ορίστε την αδιαφάνεια στο 0%. Επιστρέψτε στην τελική σας διαφάνεια.
Μετακινήστε όλα τα άλλα αντικείμενα έξω από το πλαίσιο χρησιμοποιώντας τη μέθοδο μεταφοράς. Η μετάβαση θα σύρει τα πάντα προς τα έξω και προς τα πάνω καθώς το κείμενο μετακινείται προς τα κάτω από την κορυφή και επεκτείνεται. Ο σύνδεσμος εισέρχεται Πρωτότυπο.
9. Μοιραστείτε την παρουσίασή σας στο Figma
Μπορείτε να έχετε πρόσβαση στην παρουσίασή σας οπουδήποτε μπορείτε να συνδεθείτε στον λογαριασμό σας Figma ή να μοιραστείτε τη διεύθυνση URL με άλλους, ώστε να μπορούν να παρακολουθούν από οπουδήποτε. Για να παρουσιάσετε την τελική σας παρουσίαση με τις μεταβάσεις της, κάντε κλικ στο Παίζω κουμπί και παρουσιάζεται σε λειτουργία πλήρους οθόνης.
Μπορείτε επίσης να αποθηκεύσετε τα καρέ ως PDF, αν και θα χάσετε τις κινούμενες μεταβάσεις κάνοντας αυτό.
Ανεβάστε επίπεδο τις Παρουσιάσεις σας με το Figma
Όχι μόνο αυτή η παρουσίαση είναι μινιμαλιστική, που δεν θα κατακλύσει το κοινό σας, αλλά οι μεταβάσεις είναι επαγγελματικές και καθαρές. Δεν χρειάζεται ένας ειδικός UI/UX για να χρησιμοποιεί το Figma με τρόπο που να ωφελεί τις παρουσιάσεις σας, ανεξάρτητα από τον ρόλο της εργασίας σας. Παρουσιάστε με σιγουριά και θα πλημμυρίσετε από ερωτήσεις σχετικά με το πώς έγινε η παρουσίασή σας.