Przewodnik po tworzeniu prototypów w aplikacji Figma.

Zanim zaczniesz

Kto może korzystać z tej funkcji?

Obsługiwana w dowolnym zespole lub planie.

Każdy, kto ma dostęp typu can edit (może edytować), może tworzyć prototypy.

Każdy, kto ma dostęp typu can view (może wyświetlać), może odtwarzać prototypy w widoku prezentacji.

Funkcje prototypowania aplikacji Figma umożliwiają tworzenie interaktywnych przepływów, które badają, w jaki sposób użytkownik może wchodzić w interakcje z Twoimi projektami.

Prototypy są świetnym sposobem na:

• Podgląd interakcji i przepływów użytkownika
• Dzielenie się pomysłami i udoskonalanie ich
• Zdobywanie opinii współpracowników
• Testowanie interakcji z użytkownikami
• Przedstawianie swoich projektów interesariuszom

Obejrzyj nasz film o prototypowaniu poniżej. Możesz też sprawdzić naszą listę odtwarzania dotyczącą prototypów i współpracy w serwisie Youtube.

Przepływy i punkty startowe

Dzięki prototypowaniu w aplikacji Figma możesz tworzyć wiele przepływów dla swojego prototypu na jednej stronie, aby przejrzeć pełną ścieżkę użytkownika i jego doświadczenia związane z Twoimi projektami.

Przepływ to sieć ramek i połączeń na jednej stronie. Prototyp może odwzorować całą ścieżkę użytkownika w aplikacji lub witrynie internetowej lub może skupić się na jej określonym segmencie, za pośrednictwem własnego przepływu. Przykład: Twój prototyp obejmuje wszystkie możliwe interakcje na stronie eCommerce. W ramach prototypu istnieją przepływy tworzenia konta, dodawania produktów do koszyka i realizacji zamówień.

Aplikacja Figma tworzy punkt początkowy przepływu w momencie dodania pierwszego połączenia między dwiema ramkami. Istnieje kilka innych sposobów dodania punktu początkowego przepływu do prototypu:

• Po wybraniu ramki początkowej kliknij w sekcji Flow starting point (Punkt początkowy przepływu) na prawym pasku bocznym.
• Kliknij prawym przyciskiem myszy ramkę, a następnie wybierz opcję Add starting point (Dodaj punkt początkowy).
• Skopiuj ramkę z istniejącym punktem początkowym.

Kiedy przyjdzie czas na testowanie projektów, możesz udostępnić cały prototyp lub skopiować łącze do punktu początkowego przepływu.

Dowiedz się więcej o punktach początkowych i przepływach →

Tworzenie połączeń

1. Wybierz punkt dostępu dla połączenia.
2. Kliknij ikonę , aby utworzyć połączenie.
3. Przeciągnij je do miejsca docelowego.
4. Jeśli nie ma istniejących połączeń, aplikacja Figma ustawi pierwszą ramkę jako punkt początkowy.

Tworzenie interakcji i animacji

1. Otwórz kartę Prototype (Prototyp) na prawym pasku bocznym
2. Dodaj interakcje
3. Ustaw szczegóły interakcji
4. Zastosuj animację
5. Wyświetl podgląd (Preview) swojej animacji

Dostosowywanie ustawień prototypu

1. Wybierz Device (urządzenie) i model
2. Wyświetl podgląd (Preview) swojego prototypu
3. Wybierz kolor tła (Background)
4. Ustaw Starting Frame (ramkę początkową) prototypu

Dowiedz się więcej o prototypowaniu

Rozpocznij

• Tworzenie prototypowych interakcji i animacji
• Wybieranie punktu początkowego prototypu
• Dostosowywanie prototypowych urządzeń
• Prototypowe operacje, wyzwalacze i animacje

Zaawansowane interakcje

• Tworzenie nakładek w prototypach
• Tworzenie zaawansowanych animacji za pomocą programu Smart Animate
• Prototypowe interakcje przewijania z zachowaniem przepełnienia
• Dodawanie wideo do prototypów
• Dodawanie animowanych plików GIF do prototypów
• Korzystanie ze zmiennych w prototypach
• Używanie wyrażeń w prototypach
• Wiele akcji i warunków
• Tryby zmienne w prototypach

Udostępnianie i współpraca

• Wyświetlanie połączeń prototypów
• Ustawianie opcji widoku prezentacji prototypu
• Udostępnianie prototypu
• Wyświetlanie prototypów na urządzeniu mobilnym
• Wyrażanie opinii na temat prototypów przy użyciu komentarzy

Słownik

• Punkt dostępu to miejsce, w którym odbywa się interakcja. Punktem dostępu może być dowolny obiekt w oryginalnej ramce, taki jak łącze, przycisk, obraz lub ikona itp.
• Connections (Połączenia) to niebieskie strzałki lub „wątki”, które łączą punkt dostępu z miejscem docelowym. Stosujemy ustawienia interakcji i animacji za pośrednictwem połączenia.
• Flow (Przepływ) to sieć połączonych ramek, które tworzą ścieżkę przez prototyp. Każdy przepływ ma swój własny punkt początkowy. W ramach jednego prototypu można mieć wiele przepływów.
• Punktem początkowym ( Starting point) jest pierwsza ramka przepływu. Ustaw kilka punktów początkowych, aby pokazać różne przepływy prototypu w widoku prezentacji.
• Trigger (Wyzwalacz) określa, jaki rodzaj interakcji z punktem dostępu spowoduje przejście prototypu do następnego kroku. To może być interakcja za pomocą myszy lub dotyku, taka jak dotknięcie, przeciągnięcie, kliknięcie, ustawienie kursora itp.
• Destination (Miejsce docelowe) to punkt, w którym kończy się przejście. To musi być ramka najwyższego poziomu — ramka dodawana bezpośrednio do przestrzeni roboczej — a nie obiekt w ramce. Jeśli wyobrazimy sobie przejście z punktu A do punktu B, punkt A jest punktem dostępu, a punkt B miejscem docelowym.
• Action (Operacja) definiuje rodzaj postępu zachodzącego w prototypie. Operacja może na przykład polegać na przejściu do innej ramki lub otwarciu zewnętrznego adresu URL.
• Ustawienia animacji określają, jak prototyp przechodzi z jednej ramki do drugiej. Możesz kontrolować rodzaj animacji, a także jej prędkość i kierunek.
• Transition (Przejście) jest rodzajem animacji. Określa sposób, w jaki operacja przemieszcza się do miejsca docelowego.
• Direction (Kierunek) określa stronę, z której pochodzi przejście. Wybierz pomiędzy lewą stroną, prawą stroną, górą lub dołem.
• Duration (Czas trwania) określa czas potrzebny na ukończenie animacji. Im krótszy czas trwania, tym szybsza zmiana. Wybierz czas trwania pomiędzy 1 ms a 10 000 ms (10 sekund).
• Easing (Łagodzenie) wpływa na przyspieszenie animacji—czy zaczyna się wolno, czy szybko. Pozwala to na tworzenie bardziej naturalnych animacji.
• Overlays (Nakładki) to ramki, które pojawiają się nad bieżącym ekranem lub ramką. Możesz używać nakładek do tworzenia podpowiedzi, interaktywnych menu, alertów lub potwierdzeń.
• Overflow behavior (Zachowanie przepełnienia) pozwala określić, jak prototyp reaguje na przewijanie. Umożliwia to tworzenie bardziej zaawansowanych interakcji z użytkownikami, takich jak karuzele, galerie czy interaktywne mapy.
• Wybierz, które urządzenie (device) będzie wyświetlane podczas prezentacji Twojego prototypu. Zdefiniuj zarówno urządzenie, jak i model.
• Background color (Kolor tła) pozwala zdefiniować kolor w tle twojego prototypu.
• Jeśli masz prototyp z ramkami pionowymi i poziomymi, możesz wybrać orientację (orientation). Orientacja jest ustawiona dla całego prototypu. Nie można przełączać się między widokiem pionowym a poziomym w prototypie.
• Preview (Podgląd) pokazuje, jak dany element będzie wyglądać lub działać w prototypie. Pokazujemy podglądy zarówno animacji, jak i ustawień urządzenia prototypu.