Jak tworzyć i dodawać makiety do projektów Figma za pomocą wtyczek?

Jeśli jesteś projektantem, który lubi prezentować swoje projekty za pomocą makiet, tworzenie ich w Figma może być łatwe.

Zamiast zapisywać projekty Figma i przenosić się do innego programu w celu stworzenia makiety, możesz łatwo pobrać wtyczki do mockupów w Figma. Istnieje wiele opcji wtyczek w różnych stylach, ale wszystkie są proste w użyciu i można je zintegrować z większymi projektami.

Jak znaleźć i pobrać wtyczki Figma

Pobieranie i instalowanie wtyczki w Figma przebiega tak samo, niezależnie od tego, czy używasz aplikacji, czy wersji przeglądarki. Z Strona główna przeglądarki Figma, Kliknij Społeczność > Wtyczki i widżetyi przeszukaj listę lub użyj paska wyszukiwania.

Z Aplikacja Figmy, strona główna będzie oferować tę samą opcję, co przeglądarka, aby przejść do strony społeczności. Ale jeśli jesteś na stronie projektu, możesz kliknąć logo Figma, a następnie Wtyczki. Jeśli masz już zainstalowane wtyczki, zobaczysz je tutaj.

Aby znaleźć więcej, wybierz Przeglądaj wtyczki w społeczności.

Spowoduje to przejście do strony społeczności w aplikacji, na której możesz szukać innych wtyczek.

Na stronie społeczności znajdziesz małą notkę dla każdej wtyczki, datę ostatniej aktualizacji i częstotliwość pobierania każdej wtyczki. Aby uzyskać więcej informacji o każdej wtyczce — takich jak komentarze użytkowników i przewodniki użytkowania — kliknięcie jej nazwy spowoduje przejście do strony informacyjnej tej wtyczki.

Po znalezieniu wtyczki, którą chcesz pobrać, kliknij niebieski zainstalować przycisk.

Jeśli nie wiesz, czego szukać, oto pięć naszych najlepszych ulubionych wtyczek do makiet. Jest ich znacznie więcej, ale od czegoś warto zacząć.

• Makiety gliny 3D
• Makiety kątowe
• MockRocket - makiety 3D
• makieta
• Wektarowe elementy 3D

Jak korzystać z wtyczek do mockupów w Figma

Proces instalowania wtyczek jest taki sam, niezależnie od rodzaju używanej wtyczki, ale mogą wystąpić pewne różnice w sposobie ich używania. Dlatego zawsze najlepiej jest przeczytać stronę społeczności poszczególnych wtyczek, aby uzyskać dodatkowe informacje.

W Figmie można wybrać gotowe rozmiary ramek pod konkretne ekrany, jak iPhone 13 czy duży lub mały Android. Powinieneś utworzyć projekt zgodnie z zamierzonym rozmiarem urządzenia, zamiast próbować zmieniać rozmiar projektów później, aby dopasować się do makiety, ale niektóre makiety pozwolą na nieco inne rozmiary bez zniekształcenie.

Możesz nawet użyć zrzutu ekranu ze swojego urządzenia, który będzie idealnie dopasowany do makiety tego samego urządzenia.

Makiety są zwykle przeznaczone do statycznych projektów ekranów, chociaż można zrób makietę wideo w Photoshopie. Skupimy się na makietach Figma na urządzenia przenośne, ale możesz stworzyć makietę od podstaw w Photoshopie dla innych urządzeń. Po sfinalizowaniu projektu ekranu możesz przejść do tworzenia makiety produktu.

Pokażemy Ci, jak korzystać z trzech sugerowanych przez nas wtyczek: Clay Mockups 3D, Angle Mockups i Vectory 3D Elements. Wskoczmy od razu.

Makiety gliny 3D

Po otwarciu projektu wybierz ramkę, a następnie przejdź do Wtyczki i wybierz Makiety gliny 3D. Spowoduje to otwarcie okna, w którym możesz wybrać urządzenie do makiety. Twój projekt powinien pojawić się na ekranie makiety w tym oknie.

W tym oknie możesz zmienić kąt i kolor makiety. Gdy będziesz zadowolony z tego, jak wygląda, kliknij Zapisz jako obraz.

Możesz cofnąć się i zmienić kolor lub inne aspekty w dowolnym momencie, klikając Edytuj makieta pod Podłącz w menu po prawej stronie. Teraz możesz dodać swoją wtyczkę do większych projektów, takich jak prezentacje lub portfolio.

Makiety kątowe

Aby korzystać z makiet Angle, musisz utworzyć konto Angle, aby pobrać bibliotekę makiet z ich strony internetowej. Na Strona internetowa Angle, Kliknij Zaloguj się, co spowoduje wyświetlenie wyskakującego okienka, w którym możesz kliknąć Zapisać się i dodaj swoje dane, aby założyć darmowe konto.

Po zalogowaniu, aby pobrać makiety, kliknij Makiety > Pobierz próbkę. Aby uzyskać bardziej kompleksowy zestaw makiet, możesz zapłacić za dostęp premium, ale próbka oferowana z darmowym kontem jest wystarczająco dobra.

Po pobraniu rozpakuj plik. Zawiera próbki, których można użyć w programach Figma, Sketch i Adobe XD, a także kilka bezpłatnych tapet. otwarty KątFigma. Znajdziesz dwa filmy, które pomogą w korzystaniu z makiet, a także cztery zestawy plików Figma z różnymi makietami.

Aby zaimportować pliki na swoje konto Figma, przejdź do przeglądarki Figma i kliknij swój profil. Możesz uzyskać do niego dostęp z aplikacji, przechodząc do Plik > Otwórz przeglądarkę plików. Przeciągnij i upuść każdy plik Angle do Figma. Następnie otwórz plik Angle, klikając go dwukrotnie na stronie przeglądarki Figma.

Znajdź kąt urządzenia, którego chcesz użyć do swojej makiety i skopiuj ją (Cmd + C dla Maca lub Ctrl + C dla Windowsa). Wkleić to (Cmd + V dla Maca lub Ctrl + V dla Windows) do tego samego obszaru roboczego, co główny projekt.

W palecie warstw rozwijaj warstwy ekranu makiety, aż zobaczysz warstwę z ikoną obrazu zatytułowaną Umieść tutaj obszar roboczy. Wybierz tę warstwę. Następnie przejdź do Wtyczki > Makiety kątowe i wybierz swój oryginalny projekt w wyskakującym okienku.

Powinno to pokazać się w oknie podglądu pod kątem twojej makiety, ale nie pokaże urządzenia makiety. Kliknij Stosować Twój ekran powinien teraz znajdować się na makiecie urządzenia pod odpowiednim kątem.

Wektarowe elementy 3D

Vectary 3D działa podobnie do Clay Mockups 3D, chociaż ma mniej opcji dla makiet urządzeń, ponieważ oferuje również różnorodne zasoby 3D. Otwórz projekt, wybierz ramkę i przejdź do Wtyczki > Elementy 3D Vectary.

Znajdź w wyskakującej bibliotece makietę, której chcesz użyć, a następnie kliknij Załaduj ramkę. Gdy Twój projekt pojawi się na ekranie urządzenia, kliknij Eksportuj obraz.

Teraz masz makietę 3D swojego projektu na wybranym urządzeniu. Możesz łatwo dodać go do innego projektu.

Gdy Twoja makieta jest gotowa, możesz ją zapisać jako plik PNG, aby z łatwością wykorzystać ją w innym projekcie. Kliknij Plik > Eksportuj. Wybierz wybrany obraz do wyeksportowania, a następnie kliknij Eksport dla ostatecznego PNG.

Dodaj realizm do swoich projektów dzięki makietom Figma

Istnieje niezliczona ilość zastosowań do tworzenia makiet dla twoich projektów. Dzięki różnym wtyczkom Figma możesz znaleźć wiele różnych stylów do pracy, które możesz dodać do swoich prezentacji, portfolio lub stworzyć tylko dla zabawy, aby pochwalić się swoją pracą projektową.

Z kilkoma różnicami w aplikacji, wtyczki do makiety Figma są łatwo dostępne i łatwe w użyciu, więc dlaczego nie spróbować?

Jak tworzyć wzorce szablonów prezentacji w Figma

Czytaj dalej