Jak tworzyć wzorce szablonów prezentacji w Figma

Jeśli tworzysz stylizowaną prezentację, ale nie chcesz używać nadużywanych szablonów od PowerPoint, Prezentacje Google lub Canva, możesz tworzyć własne szablony główne na swoją przyszłość projekty prezentacji.

To świetna opcja dla tych, którzy chcą mieć tematyczne projekty prezentacji lub muszą postępować zgodnie z markowym przewodnikiem stylu. Czytaj dalej, aby dowiedzieć się, jak używać Figma do tworzenia szablonów głównych do prezentacji.

1. Jak skonfigurować dokument Figma do prezentacji

Załóż darmowe konto na Figma.com, a jeśli masz już konto, zaloguj się. Możesz korzystać z Figmy bezpośrednio w przeglądarce lub możesz pobierz aplikację komputerową.

Otwórz Nowy plik projektu, następnie kliknij Nieuprawny u góry, aby zmienić nazwę pliku, na przykład „Szablon główny prezentacji”. Po lewej stronie kliknij Strona 1, a później znak plusa aby dodać nową stronę. Zmień nazwę nowej strony na „Szablon”. Dzięki temu możesz później oddzielić slajdy wzorcowe od slajdów projektu.

Aby utworzyć ramkę — nazwę Figma dla obszaru roboczego lub płótna — użyj przycisku

Narzędzie do tworzenia ramek (F), a następnie kliknij w dowolnym miejscu, aby otworzyć ramkę. W ustawieniach po prawej stronie zmień W oraz H przypisuje do odpowiedniego rozmiaru prezentacji; używamy 1920 x 1080, co jest standardowym rozmiarem ekranu. To będzie twój pierwszy szablon główny.

Kliknij dwukrotnie niebieski tytuł u góry ramki, aby zmienić jego nazwę. Zastanów się nad układem strony, który planujesz, i odpowiednio go nazwij — na przykład pomocne może być „Tytuł w drugiej kolumnie” lub „Obraz z prawej strony tytułu u góry”.

2. Zaprojektuj układy prezentacji

Aby pomóc w projektowaniu układu, możesz użyć siatki układu. Aby go włączyć, wybierz ramkę, a następnie na prawym pasku narzędzi kliknij przycisk znak plusa obok Siatka układu. Spowoduje to otwarcie czerwonej półprzezroczystej siatki na górze twojego projektu.

Aby utworzyć kolumny — które są łatwiejsze do zaprojektowania — kliknij przycisk ikona siatki z kwadratowymi kropkami w sekcji Siatka układu, a następnie kliknij Siatka w menu i wybierz Kolumny. Ustaw liczbę na 12, co jest typowe dla projektowania ekranów. Siatka nie zapisuje się na ostatecznym projekcie. Możesz go tymczasowo włączyć lub wyłączyć za pomocą ikona oka lub trwale usunąć, klikając ikona minus przy oku.

Niezależnie od tego, czy używasz siatki układu, czy nie, możesz rozpocząć dodawanie podstawowych składników zastępczych do pierwszego układu slajdu. Ogólnie rzecz biorąc, układ slajdów zależy od Ciebie.

3. Utwórz dwukolumnowy układ tekstu

Zacznijmy od zaprojektowania tytułu z dwukolumnowym slajdem tekstowym. Aby dodać symbol zastępczy tytułu, użyj Narzędzie tekstowe (T) i wpisz „Symbol zastępczy tytułu”. Domyślny rozmiar tekstu w Figma jest dość mały, więc po wpisaniu symbolu zastępczego zaznacz go i użyj ustawień po prawej stronie, aby zwiększyć rozmiar i wybrać czcionkę —w razie potrzeby pobierz czcionkę. Możesz także ustawić kerning i inne atrybuty.

Aby dostosować szerokość slajdu, zwiększ szerokość pola tekstowego tytułu, klikając i przeciągając róg w prawo. Zostaw margines z każdej strony. Oznacza to, że pole tekstowe pomieści tytuły o różnej długości w przyszłych prezentacjach.

Aby dodać dwukolumnowy obszar tekstu podstawowego, użyj przycisku Narzędzie tekstowe (T) i przeciągnij pole tekstowe zgodnie z siatką układu, pozostawiając obok niego wystarczająco dużo miejsca na drugą kolumnę o tym samym rozmiarze.

Po umieszczeniu pola tekstowego wybierz odpowiednią czcionkę i rozmiar. Zaznacz pole tekstowe i zduplikuj je, przytrzymując Oopcja (Mac) lub Alt (Windows) podczas przeciągania pudełka. Tworzy to układ dwukolumnowy; jednak możesz użyć tego systemu do projektowania innych typów układów.

4. Dodaj kolor lub obraz tła

Możesz ustawić kolor tła, wybierając ramkę i przechodząc do Wypełnić w menu po prawej stronie, aby wybrać kolor. Ale jeśli wolisz użyć obrazu lub zestawu obrazów jako tła, możesz. Po prostu przeciągnij obraz tła z folderu na ramkę. Możesz od razu zmienić jego rozmiar, przeciągając rogi, aby dopasować je do ramki.

Jeśli używasz an obraz jako tło, upewnij się, że ułożyłeś obraz tak, aby znajdował się z tyłu lub na dole warstw dla każdego slajdu, klikając prawym przyciskiem myszy i wybierając Wyślij wsteczlub przeciągając go na dół palety warstw po lewej stronie.

Aby dalej edytować obraz, pod Wypełnić, Kliknij Obraz w menu. Będziesz mógł zmienić tryb mieszania, współczynnik przycinania i inne aspekty. Aby zmienić krycie, zmień wartość procentową obok menu rozwijanego.

W przypadku pojedynczego obrazu, który nie jest tłem, użyj Narzędzie do tworzenia ramek (F), aby narysować ramkę w miejscu, w którym ma się znajdować obraz, i przeciągnij plik z komputera do ramki. Następnie możesz użyć tych samych ustawień, co poprzednio.

5. Jak tworzyć style tekstu w Figma

Podczas tworzenia szablonu wzorcowego style tekstu powinny być spójne na wszystkich slajdach. Można to zrobić ręcznie, ustawiając każdy składnik tekstu tak, aby był taki sam, ale jeśli masz wiele slajdów, może to być żmudne. Dobre wieści? Możesz zautomatyzować swoje style tekstu w Figma.

Po zaznaczeniu wybranego tekstu — na przykład napisów w preferowanym stylu, czcionce i rozmiarze — kliknij kwadrat czterech kropek obok Tekst w menu po prawej stronie. Kliknij znak plusa aby ustawić nowy styl.

W wyskakującym okienku nazwij styl — na przykład „Tytuł slajdu lub Tekst główny”. Projektując inne slajdy w tym szablonie, możesz wybrać styl z listy w menu tekstowym, zaznaczając tekst i wybierając styl. Aby odłączyć styl i zastąpić funkcję, kliknij przycisk ikona uszkodzonego linku który pojawia się po najechaniu kursorem na tytuł stylu tekstu.

Podobnie działa w przypadku kolorów. Wybierz coś w żądanym kolorze, a następnie kliknij przycisk menu Figma i Szybkie działania. Wpisz „Zaznacz wszystko z tym samym wypełnieniem”, a wybierze wszystko w tym samym kolorze. Następnie możesz ustawić to jako styl kolorów pod Wypełnić menu w taki sam sposób, jak tworzenie stylu tekstu. Działa to dobrze w przypadku kolorów tła, po prostu wybierając ramkę i wybierając kolor.

Jeśli nie stosujesz się jeszcze do przewodnika po stylu, jest ich wiele sposoby generowania palet kolorów.

6. Utwórz komponenty

Aby móc później użyć szablonów, muszą one być komponentami, więc łączą się. Aby zmienić ramkę w komponent, wybierz bieżącą ramkę i kliknij Polecenie + Opcja + K (Mac) lub klawisz kontrolny + Alt + K (Windows).

Tytuł ramki zmieni kolor z niebieskiego na fioletowy z ikoną rombu, aby pokazać, że jest to teraz komponent. Następnie, aby zduplikować ramkę, kliknij Polecenie + D (Mac) lub klawisz kontrolny + D (Windows) raz i przeciągnij nową ramkę na prawo od pierwszej.

Odłącz składnik duplikatu od oryginału, klikając prawym przyciskiem myszy tytuł nowej ramki i wybierając Odłącz instancję. Zmień nazwę nowego slajdu na odpowiedni tytuł dla jego układu. Dodaj nowy projekt do slajdu, a następnie stwórz z niego własny element, klikając Polecenie + Opcja + K (Mac) lub klawisz kontrolny + Alt + K (Windows). Ten proces należy wykonać za każdym razem, gdy tworzysz nowy slajd.

Projektując układ dla każdego nowego slajdu, użyj gotowych stylów tekstu i kolorów, aby zaoszczędzić czas. Zakończ ten proces tyloma slajdami podstawowymi, ile potrzebujesz, upewniając się, że wszystkie są zatytułowane opisowymi nazwami.

7. Jak korzystać ze slajdów wzorcowych

Aby użyć slajdów do przyszłych projektów, wybierz Strona 1 w Strony menu — z szablonem pod własnym tytułem — i utwórz nową ramkę o rozmiarze prezentacji. Następnie po lewej stronie kliknij Zasoby > Komponenty lokalne gdzie powinny znajdować się slajdy szablonu. Przeciągnij slajdy szablonu na nową ramkę i wyśrodkuj ją. Edytuj symbole zastępcze dla swoich treści.

Postępuj zgodnie z tym samym procesem, aż do zakończenia prezentacji.

Oszczędzaj czas, tworząc własne szablony wzorcowe w Figma

Możesz udostępnić swój szablon główny kolegom z zespołu lub współpracownikom, zachować go do użytku osobistego, a nawet sprzedać jako pakiety projektowe. Chociaż początkowo tworzenie szablonu wzorca slajdów może wydawać się trudne, zwiększy wydajność podczas tworzenia przyszłych prezentacji w Figma, ostatecznie oszczędzając czas.

10 najlepszych funkcji Figma, których powinni używać wszyscy projektanci

Czytaj dalej

O autorze