Istnieje milion sposobów na wykonanie prezentacji, ale Figma jest do tego niedocenianym narzędziem. Funkcja prototypu w Figma pozwala na wiele konfigurowalnych opcji przejścia. Twoje przejścia nie tylko zachwycą twoją publiczność, ale możesz włączyć wtyczki, aby uzyskać dodatkowy pizzę i utrzymać zaangażowanie odbiorców, dzięki czemu poczujesz się pewnie w swoich umiejętnościach.
Pokażemy Ci, jak zrobić zabójczą prezentację za pomocą Figma; po prostu postępuj zgodnie z tym przewodnikiem.
1. Skonfiguruj swoją pierwszą ramkę prezentacji
otwarty Figma i kliknij Nowy plik projektu. Kliknij Narzędzie do tworzenia ramek (F) aby narysować ramkę lub wybrać gotową ramkę po prawej stronie za pomocą Prezentacja > Slajd 16:9. Możesz utwórz szablon główny oszczędzać czas.
Zmień nazwę ramki, klikając dwukrotnie niebieski tytuł w lewym górnym rogu. Ustaw kolor tła; chociaż zawsze możesz to zmienić później, podświetlając wszystkie klatki i zmieniając kolor wypełnienia.
2. Dodaj tekst tytułu
Użyj Narzędzie tekstowe
(T) i wpisz swój tytuł. Użyj oddzielnych pól tekstowych dla osobnych wierszy, z tylko jednym lub dwoma słowami w wierszu. Ustaw swoje preferencje tekstowe w Tekst menu po prawej stronie. Figma używa czcionek Google, więc możesz chcieć wiedzieć najlepsze pary czcionek Google.3. Dodaj obraz
Możesz użyj zdjęcia stockowego lub zrób własne odpowiednie zdjęcie. Aby dodać obraz, narysuj prostokąt, używając Narzędzie Prostokąt (R). Twój wizerunek będzie siedział w tym kształcie.
Kliknij prostokąt i przejdź do Wypełnić i kliknij kolorowy kwadrat. Następnie kliknij Solid > Obraz > Wybierz obraz. Znajdź swój obraz i kliknij otwarty. Najedź na obrazek, aby odsłonić 4 białe kółka. Kliknij i przeciągnij jedno kółko do środka, aby zaokrąglić rogi obrazu.
Ułóż warstwy tak, aby obraz znajdował się z tyłu, a tekst na górnej warstwie. Możesz przeciągać warstwy w panelu warstw lub używając Cmd/Ctrl + [ aby odesłać warstwę z powrotem lub Cmd/Ctrl + ] aby przenieść warstwę do przodu.
4. Utwórz pierwsze przejście
Pierwsze przejście otworzy obraz i pozwoli wsunąć tekst tytułu do ramki. Najpierw zduplikuj pierwszą klatkę, zaznaczając ją i naciskając Cmd/Ctrl + D powielać go.
W lewej ramce zmniejsz obraz, zmniejszając atrybuty wysokości w H pole do około 150, pozostawiając poziomą szczelinę obrazu. Wyrównaj go do środka, zaznaczając oba obrazy w ramkach i klikając Oopcja + V (Mac) lub Alt + V (Windows).
Aby zakończyć przejście obrazu, wybierz obraz po lewej stronie. Następnie zmień nieprzezroczystość do 0% w menu po prawej stronie w polu obok opcji Przekaż pod warstwą. Dzięki temu obraz będzie niewidoczny przed przejściem i otwarciem.
Kliknij pierwsze pole tekstowe i przytrzymaj Zmiana. Rozpocznij przeciąganie, a następnie przytrzymaj Spacja i kontynuuj przeciąganie tekstu poza ramkę. Wygląda na to, że znika po wyjęciu z kadru. Bez spacji to przejście nie zadziała, ale jeśli przytrzymasz spację przed przeciągnięciem, przesunie tylko ramkę.
Zrób to ponownie dla drugiego lub kolejnych pól tekstowych, ale przeciągnij je nieco dalej w lewo, aby urozmaicić przejście. Gdy tekst jest nadal zaznaczony, zmniejsz krycie warstwy do 0% w taki sam sposób, jak poprzednio dla obrazu.
Aby ustawić przejście, przejdź do Prototyp. Wybierz ramkę po lewej stronie i kliknij niebieskie kółko który pojawia się pośrodku prawej strony ramki. Przeciągnij go, aby linia trafiła do drugiej klatki.
W menu, które mówi Natychmiastowy, Wybierz Inteligentna animacja. Następnie zmień pole za pomocą stoper do 1000ms. Spowoduje to, że przejście zajmie jedną sekundę od kliknięcia myszą. Pozostałe ustawienia powinny być ustawione domyślnie. Upewnij się, że nie zmieniasz nazw ramek po ustawieniu przejścia, w przeciwnym razie pliki nie będą się łączyć.
Kliknij Bawić się przycisk, aby przetestować przejście. Wróć do Projekt aby kontynuować projekt prezentacji.
5. Dodaj więcej slajdów
Aby przejść ze slajdu 1 do slajdu 2, zduplikuj slajd z prawej strony (Cmd/Ctrl + D). W nowej ramce — slajdzie 2 — przesuń pola tekstowe poza ramkę, korzystając z poprzedniej techniki (Zmiana + Ciągnąć następnie Spacja po rozpoczęciu przeciągania). Przesuń jedno pole tekstowe w lewo, a drugie w prawo od ramki. Ustaw krycie na 0% dla obu.
W przypadku obrazu zmniejsz go i przesuń nieco poza środek, a następnie ustaw krycie na 0%. To w efekcie daje puste płótno dla drugiego slajdu. Możesz dodać zawartość do niewidocznych zasobów z poprzedniego slajdu.
Dodaj duży obraz na środku ramki. Aby dodać dekoracje na górze obrazu, użyj a Wtyczka Figma do GIF-ów lub pobierz naklejkę GIF z Giphy i przeciągnij go na górę obrazu. Wybierz swój główny obraz i dowolne GIF-y i pogrupuj je (Cmd/Ctrl + G), zapewnia to prawidłowe działanie programu Smart Animate.
Wybierz grupę i skopiuj ją (Cmd/Ctrl + C). Następnie wklej go na ramkę slajdu 1 (Cmd/Ctrl + V). Zmniejsz go i ustaw krycie na 0%. Następnie przenieś tę warstwę do tyłu (Cmd/Ctrl + [). Zapewnia to płynne przejście do następnego slajdu.
Iść do Prototyp. Wybierz slajd 2 i kliknij niebieskie kółko, aby przeciągnąć go do slajdu 3. Domyślnie Figma w menu prototypu używa poprzednich ustawień, więc wszystkie powinny być ustawione zgodnie z poprzednim przejściem. Wróć do Projekt.
Powiel ostatni slajd (Cmd/Ctrl + D). Ten slajd użyje tego samego obrazu, co poprzedni, ale przeskalujemy go do jednej strony ramki. Przesuń obraz na lewo od ramki, przeciągając go, przytrzymując Zmiana. Najedź na prawą krawędź obrazu, aż pojawią się strzałki skierowane w przeciwną stronę, kliknij i przeciągnij prawą krawędź obrazu w lewą stronę, aż będzie zadowalający.
Iść do Prototyp i połącz ze sobą dwie ramki. Następnie wróć do Projekt.
Dodaj tytuł i treść po prawej stronie przeskalowanego obrazu i zgrupuj je razem. Skopiuj grupę tekstową i wklej ją na poprzednim slajdzie. Kliknij i przeciągnij grupę tekstu na prawo od ramki, tak jak poprzednio.
6. Dodaj makietę
Utwórz makietę; sprawdź nasze poradnik tworzenia makiet za pomocą wtyczek w Figma. Dodaj nową ramkę, a następnie wklej na nią swoją makietę. Zmień rozmiar makiety, aby pasowała do ramy.
Skopiuj makietę i wklej ją do poprzedniej klatki. Zmień jego rozmiar, aby zmieścił się w części obrazu, a następnie przenieś go na tył warstw i ustaw krycie na 0%. Połącz ramki w Prototyp.
7. Dodaj etykiety
Powiel ramkę makiety. Dodaj tytuł i opis, aby wyjaśnić części swojej makiety. Pogrupuj tekst i nazwij go. Wtedy możesz utwórz wskaźnik z matowego szkła dla twoich wypunktowań i linii. Zgrupuj jedną linię z jednym okręgiem. Dopasuj swój wskaźnik do tego, co opisuje i dodaj obok niego swój opis. Połącz ramki w Prototyp.
Powiel ramkę i dodaj kolejny wskaźnik punktora z tym, co opisuje. Prototypuj to jeszcze raz. Powiel każdą klatkę na każdy punkt, tak aby każdy punkt wypunktowania przechodził sam.
8. Zakończ prezentację
Powiel ostatni slajd. Napisz ostatnie słowo lub dwa i wyśrodkuj je. Skopiuj tekst i wklej go na poprzednim slajdzie.
Zmniejsz tekst, przytrzymując K podczas skalowania — dzięki temu tekst jest sformatowany przy zmniejszaniu jego rozmiaru. Umieść tekst gdzieś w górnej części makiety i prześlij warstwę na tył, pod obraz. Ustaw krycie na 0%. Wróć do ostatniego slajdu.
Przenieś wszystkie inne obiekty poza ramkę za pomocą metody przeciągania. Przejście wysunie wszystko w kierunku boków i góry, gdy tekst przesuwa się w dół od góry i rozszerza. Połącz slajdy w Prototyp.
9. Udostępnij swoją prezentację Figma
Możesz uzyskać dostęp do swojej prezentacji w dowolnym miejscu, w którym możesz zalogować się na swoje konto Figma lub udostępnić adres URL innym, aby mogli oglądać z dowolnego miejsca. Aby zaprezentować ostateczną prezentację z przejściami, kliknij Bawić się i prezentuj w trybie pełnoekranowym.
Możesz także zapisać klatki jako pliki PDF, chociaż stracisz w ten sposób animowane przejścia.
Popraw swoje prezentacje dzięki Figma
Ta prezentacja jest nie tylko minimalistyczna, co nie przytłoczy odbiorców, ale przejścia są profesjonalne i czyste. Nie potrzeba eksperta UI/UX, aby korzystać z Figmy w sposób, który przyniesie korzyści Twoim prezentacjom, bez względu na stanowisko pracy. Prezentuj z pewnością siebie, a będziesz zasypywany pytaniami o to, jak została wykonana Twoja prezentacja.