Wprowadzenie do komponentów Figma Interactive

Niedawno Figma wypuściła wersję beta dla najnowszych interaktywnych komponentów, która pozwala definiować interakcje i animacje bezpośrednio w wariantach i propaguje je do każdej instancji komponentu. Oznacza to, że możliwe jest teraz tworzenie komponentu ze stanami (najechanie, aktywny, kliknięty, fokus) i uczynienie go interaktywnym, tak aby każda kopia komponentu domyślnie odziedziczyła te same interakcje, co bardzo pomaga w fazie prototypowania.

Oto przykład porównawczy tego, jak zmieni się przepływ pracy:

Jak widać na powyższym przykładzie, wymaga czterech ekranów i ośmiu interakcji, aby prototyp działał jak prawdziwy produkt. A gdybym chciał użyć trzech przełączników, musiałbym dodać jeszcze więcej ekranów i interakcji.

W następnym przykładzie do interakcji wymaga tylko jednego ekranu i jednego komponentu z dwoma wariantami, a przełącznik jest taki sam, więc można go duplikować tyle razy, ile potrzeba:

Korzystanie z Interactive Components upraszcza nie tylko ostateczny prototyp, ale także logikę , która za nim stoi, ułatwiając naukę budowania, utrzymywania i aktualizowania prototypów.

Teraz, zanim zaczniemy:

Komponenty interaktywne (dostęp w wersji beta)

Aby rozpocząć eksperymentowanie z tą nową funkcją, musisz zarejestrować się w programie Interactive Components Beta, ponieważ nie jest ona jeszcze dostępna w bieżącej stabilnej wersji. Dołączenie do wersji beta jest bezpłatne, a po przesłaniu formularza nie powinno zająć więcej niż dwa lub trzy dni, zanim w narzędziu do projektowania Figma pojawią się interaktywne komponenty.

Gratis

Stworzyłem plik projektu Figma z przykładami z tego artykułu. Gdy dołączysz do wersji beta, możesz powielać mój projekt i łatwiej go śledzić.

• Pobierz plik projektu Figma →

Przed rozpoczęciem

Konieczne jest zrozumienie niektórych kluczowych elementów Figma, których będziemy używać, jeśli już je znasz, możesz pominąć tę część i zacząć bezpośrednio od pierwszego samouczka (sekcja: „Stwórz swój pierwszy komponent interaktywny”).

składniki

Pomyśl o nich jako o elementach, które po zduplikowaniu tworzą połączenie z jego kopią (nazywaną instancją ), a gdy komponent jest zmieniany, instancja otrzymuje te same zmiany. Możesz także zastosować nadpisania do instancji (które są zasadniczo zmianami stylu we właściwościach komponentu, które pozwalają na pewne dostosowanie).

• Dowiedz się więcej o Komponentach →
• Dowiedz się więcej o nadpisaniach →

Warianty

Są to różne style, które może mieć komponent i są zwykle używane do zastosowania różnych właściwości, takich jak rozmiar lub stan.

• Dowiedz się więcej o wariantach →

Panel szczegółów interakcji

Ważne jest, aby zrozumieć panel Szczegóły interakcji, ponieważ pozwala nam on definiować różne interakcje i animacje dla naszych interaktywnych komponentów. Figma ma wiele informacji na swojej stronie, więc dołączę linki dla tych z Was, którzy chcą sięgnąć głębiej.

Hotspot

Chociaż nie znajduje się to w panelu, hotspot jest elementem, w którym nastąpi interakcja, w naszym przypadku każdy wariant będzie interaktywnym hotspotem, dla którego możesz zdefiniować wyzwalacze i akcje.

Wyzwalacze

Są one znane w rozwoju jako zdarzenia i są różnymi sposobami, w jakie użytkownik może aktywować interakcję.

• Na kliknięcie,
• Przy przeciąganiu,
• Unosząc się,
• Podczas naciskania,
• Klucz/pad do gier,
• Wejście myszy,
• Opuszczenie myszy,
• Mysz w dół,
• Mysz w górę,

• Po opóźnieniu.

• Więcej informacji o wyzwalaczach →.

działania

W tym ustawieniu możesz określić, co się stanie, gdy interakcja zostanie aktywowana; dla komponentów interaktywnych użyjemy Change To , które pozwala na zamianę wariantów wewnątrz komponentu.

• Zmień na,
• Nawigować do,
• Otwarta nakładka,
• Przewiń do,
• Zamień na (nakładka),
• Plecy,
• Zamknij nakładkę,
• Otwórz URL.

Miejsce docelowe

To jest ostateczny cel akcji. W moich przykładach użyję wariantu jako miejsca docelowego, aby zamienić go z Wyłącz na Włącz.

Animacje

Figma jest dostarczana z zestawem predefiniowanych przejść, które mogą być przydatne w niektórych przypadkach (przesuń się, popchnij, wsuń), ale zawsze wolę korzystać ze Smart Animate i definiować własne przejścia, ponieważ jest naprawdę łatwy w użyciu — w zasadzie sprawdza nazwy warstw i jeśli wystąpią zmiany między wybraną klatką a docelową klatką, ożywi te warstwy.

• Więcej informacji o przejściach Figma i Smart Animate →

Łagodzenie

Easing odnosi się do sposobu, w jaki animacja się porusza, to w zasadzie sposób, w jaki element przyspiesza i zwalnia. W tym samouczku użyję dwóch ustawień: Ease In and Out dla przełącznika oraz Linear dla pętli, ale pamiętaj, że możliwe jest również zdefiniowanie niestandardowego wygładzania, więc możesz chcieć dowiedzieć się więcej o Easing .

Tworzenie pierwszego interaktywnego komponentu

Teraz, gdy masz już wszystkie informacje, możesz zacząć tworzyć swój pierwszy interaktywny komponent. Pokażę ci bardzo częsty przypadek, tworząc prosty przełącznik, który ma dwa stany (wyłączony i włączony) i użyj wariantów do replikacji tych stanów.

Utwórz komponent

Pierwszym krokiem jest stworzenie komponentu.

• Używając narzędzia Prostokąt ( R ), utwórz szary prostokąt (#A7A9BC) o rozmiarze 56x32 pikseli i zastosuj promień narożnika 16 pikseli.
• Za pomocą narzędzia Elipsa ( O ) utwórz białe kółko ( #FFF ) o wymiarach 24x24 piksele i umieść je nad prostokątem w lewej części, pozostawiając 4 piksele odstępu. Tak powinno wyglądać:

• Połącz te dwa elementy w jeden komponent za pomocą Ctrl/Cmd + Alt + K (lub używając ikony Component z górnego paska w Figma):

Uwaga: tutaj iw innych miejscach użyję uniwersalnej notacji klawiszy Windows/Mac, gdzie klawisz Ctrl w systemie Windows odpowiada klawiszowi Cmd na komputerze Mac; Alt w Windows jest odpowiednikiem Alt/Option na Macu, więc będę używał skrótu Alt , a Shift jest taki sam na obu platformach.

Dodaj wariant

• Wybierz komponent, który właśnie utworzyłeś i w prawym panelu (wewnątrz karty Projekt) kliknij przycisk plus obok Warianty :

Wygeneruje fioletową ramkę z przerywaną ramką, która reprezentuje grupę posiadanych wariantów.

Powinieneś mieć już dwa warianty, użyj pierwszego dla stanu Off , a drugiego dla stanu On .

• Zastosuj inny styl do stanu On , aby była aktywna, polecam użyć niebieskiego tła (#0B5FFF) i przesunąć kółko w prawo.

Są to stany przełącznika, które zmienią się z Off na On (i odwrotnie), gdy użytkownik kliknie na przełącznik.

Przydatna wskazówka: W tym przypadku nie jest to konieczne, ale jeśli chcesz dodać więcej wariantów , możesz wybrać komponent w polu i kliknąć fioletowy przycisk plus, doda kopię wybranego komponentu i automatycznie zmieni rozmiar pudełka. (Możliwa jest również ręczna zmiana rozmiaru pudełka, tak jakby była ramką, oraz dowolne powielanie i układanie w nim wariantów.)

Alternatywne podejście

Jak widzieliście, utworzyliśmy te komponenty, powielając je w grupie wariantów, ale możliwe jest również tworzenie ich pojedynczo i łączenie ich jako wariantów , efekt końcowy będzie dokładnie taki sam. Jeśli chcesz wypróbować tę metodę, po prostu utwórz i wybierz dwa komponenty, w prawym panelu pojawi się kolejna czynność o nazwie „Połącz jako warianty”, kliknij ją i gotowe — teraz będziesz mieć te same dwa warianty.

Ta alternatywa jest naprawdę przydatna, gdy masz już różne komponenty i musisz tylko zdefiniować warianty, jeśli pracujesz nad biblioteką, pomoże ci to zaktualizować bez konieczności odtwarzania wszystkiego od zera.

Nazwij swoje warianty

Nazywanie wariantów nie będzie miało bezpośredniego wpływu na wynik końcowy (chyba że użyjesz tej samej nazwy więcej niż jeden raz) , ale zdefiniowanie nazw i hierarchii pomoże Ci uporządkować wszystko i lepiej zrozumieć dla innych współpracowników, którzy mogą potrzebować prototyp dla innych projektów.

Domyślnie główna grupa wariantów nosi nazwę „Właściwość 1”, możesz to zmienić na pasku bocznym podczas wybierania całej grupy. Sugeruję zmianę nazwy na „State”, ponieważ zamierzamy używać stanów Off i On.

Zmiana nazwy pojedynczego wariantu odbywa się za pomocą tego samego procesu, ale musisz wybrać pojedynczy wariant w grupie, a w tym samym panelu znajdziesz nazwy „Domyślny” i „Wariant 2”, które możesz nadpisać dla nazwy przełącznika powinny to być „Wyłączone” i „Włączone”.

W rezultacie nazwy warstw wariantów zostaną automatycznie zmienione na „Stan=Wyłączony” i „Stan=Włączony”.

Ciekawostka: jeśli Twój komponent ma tylko dwa warianty i używasz nazw „Wyłączone” i „Włączone”, w miejscu docelowym pojawi się przełącznik zamiast listy rozwijanej!

Zróbmy to interaktywne!

Teraz, gdy masz już składnik i warianty, nadszedł czas na zastosowanie interakcji .

• Kliknij kartę Prototype (w prawym górnym rogu ekranu), aby otworzyć panel Prototype i aktywować jego funkcje.
• Wybierz wariant Off (powinien mieć niebieską kropkę) i przeciągnij go na wariant On , aby go połączyć.

• Sprawdź dokładnie, czy wybrałeś cały wariant, a nie tylko warstwę tła, dzięki temu interakcja będzie działać nawet wtedy, gdy użytkownik kliknie element koła.
• W panelu Szczegóły interakcji ustaw wyzwalacz na Kliknięcie .
• Upewnij się, że akcja jest ustawiona na Zmień na .
• Zmień animację na Smart Animate i użyj funkcji Łatwość wejścia i wyjścia, aby uzyskać naturalne wrażenie.

Przetłumaczę te ustawienia na jedno zdanie, aby wyjaśnić, co się stanie: gdy użytkownik kliknie stan wyłączony , a następnie zmieni stan na stan włączony za pomocą funkcji Smart Animate z łatwością wejścia i wyjścia w ciągu 300 milisekund.

• Zastosuj te same ustawienia do wariantu On State , aby po ponownym kliknięciu wyłączyło przełącznik. ( Uwaga: Figma zapamięta ustawienia interakcji zastosowane do elementów wewnątrz grupy i zastosuje te same ustawienia podczas przeciągania nowej interakcji, więc w tym przypadku wystarczy tylko dwukrotnie sprawdzić.)

Gotowy! Jeśli chcesz sprawdzić, czy to działa, musisz umieścić jeden z wariantów w ramce, wybierz ramkę, a następnie kliknij przycisk prezentacji (reprezentowany przez ikonę odtwarzania), który znajduje się nad zakładkami.

Powinno to pozwolić na włączanie i wyłączanie każdego przełącznika z osobna.

Jeśli jednak chcesz zobaczyć prawdziwą moc tej funkcji, zduplikuj składnik w ramce wiele razy (co najmniej trzy lub więcej) i aktywuj je pojedynczo w prezentacji.

Korzystanie z więcej niż dwóch wariantów

Ta funkcja staje się bardzo potężna, gdy dodasz wiele wariantów i połączysz je indywidualnie, aby stworzyć realistyczny komponent. Oto przykład, w którym połączyłem w sumie sześć wariantów z niewielkimi zmianami koloru tła, aby odtworzyć wiele stanów przycisku, co jest obecnie klasykiem w branży projektowania stron internetowych.

Stany składowe

Oto lista różnych stanów tego komponentu, w tym również wyzwalacze, których będziemy używać do zmiany z jednego wariantu na inny.

1. Domyślny — Domyślny,
2. Hover — ChociażHover,
3. Wciśnięty — wciśnięty myszką,
4. Aktywny — MouseUp (może być możliwe użycie On Click dla tego samego wyniku),
5. Najedź, gdy aktywny — WhileHover,
6. Wciśnięty, gdy aktywny — MouseDown.

Przydatna wskazówka: można użyć funkcji MouseDown do symulowania naciśnięcia , ale nie zwolnienia przycisku, a następnie użycia funkcji MouseUp do aktywowania przejścia. Jest to miły szczegół interakcji, który sprawia, że ​​przycisk jest bardziej realistyczny.

Zagnieżdżone komponenty interaktywne

Jeśli chodzi o zwykłe komponenty, możesz również tworzyć zagnieżdżone komponenty interaktywne.

Korzystając z tego samego przykładu listy rozwijanej, można by utworzyć pojedynczy interaktywny komponent o nazwie Dropdown z dwoma interaktywnymi komponentami w środku: przyciskiem rozwijanym i menu rozwijanym. Pomoże Ci to kontrolować wzajemne oddziaływanie przycisku i menu, umożliwiając zdefiniowanie, który wariant przycisku spowoduje otwarcie menu.

Uwaga: byłoby możliwe utworzenie innego komponentu zagnieżdżonego dla opcji menu rozwijanego i użycie zastąpienia do zmiany różnych tekstów.

Główną korzyścią z używania zagnieżdżonych komponentów interaktywnych jest nowy poziom modułowości, który zapewnia prototypy, można indywidualnie definiować interakcje i mieszać je w nieskończone komponenty interaktywne. Menu rozwijane może być zawarte w innych komponentach (na przykład na karcie) bez konieczności każdorazowego prototypowania sposobu jego działania.

Nawigacja

Możemy pójść jeszcze dalej, można też nawigować z wariantu do ramki zewnętrznej, można połączyć pojedynczy wariant z ramką za pomocą wyzwalacza Po kliknięciu i akcji Przejdź do . W tym przykładzie połączyłem każdą akcję ze składnika menu rozwijanego z zewnętrzną ramką z szarym prostokątem w tej samej pozycji co menu (prawo, góra, lewo, dół).

Kliknięcie jednej z tych akcji spowoduje przejście do połączonej ramki, jak to ma miejsce w przypadku zwykłych prototypów, prawdziwa magia dzieje się, gdy trzeba ponownie użyć menu rozwijanego dla innego komponentu, wszystkie interakcje będą już wykonane, więc Ty nie trzeba go łączyć w kółko.

Ten przepływ pracy i funkcje zagnieżdżonych komponentów są niesamowite w przypadkach projektowania produktu, w których masz mnóstwo ramek do połączenia, ponieważ zmniejszą one ilość pracy wymaganej do stworzenia prototypu o wysokiej wierności do testowania, a nawet jeśli chcesz stworzyć biblioteka komponentów dla prototypów.

Efekty specjalne

To wszystko za wprowadzenie do interaktywnych komponentów Figma. Jak widać, użycie tej funkcji do tworzenia i łączenia interakcji wewnątrz prototypu jest dość łatwe. Ale możliwe jest również tworzenie różnego rodzaju efektów specjalnych za pomocą wariantów .

W następnej sekcji przyjrzę się im bliżej!

Pętle

W końcu można bez większego wysiłku tworzyć nieskończone pętle wewnątrz Figmy, a także tworzyć różne spinnery i wskaźniki ładowania.

Aby utworzyć pętlę, użyj wyzwalacza After Delay ustawionego na 1 ms, aby automatycznie zamienić warianty i połączyć co najmniej dwa z nich.

Uwaga: 1 ms to minimalny czas, jaki możemy ustawić w Figma, aby zmienić wariant na inny i sprawić, że zmiana będzie prawie natychmiastowa; a dzięki wyzwalaczowi AfterDelay nastąpi to automatycznie. Możliwe jest użycie dłuższego czasu opóźnienia, jeśli chcesz, aby pętla wyglądała, jakby miała przerwę między wariantami.

Obrót

Pozwolę sobie rozpocząć dalszą część artykułu od notki o tym, jak dziwnie Figma radzi sobie z rotacją.

Figma ma dziwny sposób obracania elementów, wydaje się, że jest ograniczona od -179 do maksymalnie 180 i nie pozwala iść dalej niż te wartości. Ponadto nie ma sposobu na zdefiniowanie kierunku obrotu, więc jeśli spróbujesz obrócić się od 0 do 180 i odwrotnie, zamiast wykonać obrót o 360 , najpierw obróci się do 180 , a następnie wróci do 0 (jak huśtawka ).

Tak więc, aby system mógł poprawnie zidentyfikować rotację, będziesz musiał użyć co najmniej trzech wariantów.

Oto jak możesz to zrobić:

• Utwórz komponent z trzema wariantami: WariantA, WariantB, WariantC (w tym przykładzie zmodyfikowałem elipsę, aby uzyskać kształt trójkąta).
• Zastosuj następujący obrót do elementów wewnątrz wariantów ( nie do samych wariantów).
  • WariantA: ustaw element na 0 i połącz wariant z WariantemB .
  • WariantB: ustaw element na -120 i połącz wariant z WariantemC .
  • WariantC: ustaw element na 120 i połącz wariant z WariantemA , aby zakończyć pętlę.
• Wszystkie interakcje powinny być wyzwalane po opóźnieniu (1 ms) i wygładzaniu liniowym .

Rezultatem będzie neutralny spinner, który będzie miał trzy małe przerwy po 1 ms każda z powodu zamiany wariantów, nie idealny, ale szybki i jak na prototyp, jest wystarczająco dobry — i prawdopodobnie będziesz jedynym, który i tak zauważy przerwy .

Przydatna wskazówka : możesz użyć tego samego czasu animacji dla każdego wariantu, aby utworzyć liniową pętlę, lub możesz bawić się animacją, używając szybszego czasu dla niektórych wariantów i wolniejszego czasu dla innych, będzie to symulować zakrzywione luzowanie.

Skomplikowane błystki

Nie sugerowałbym używania interaktywnych komponentów Figma dla złożonych spinnerów, w takich przypadkach lepiej byłoby stworzyć spinner za pomocą dedykowanej aplikacji do animacji (takiej jak After Effects) i zaimportować go do prototypu jako GIF.

Mikrointerakcje

Interaktywne komponenty pozwalają na uwzględnienie bardziej zachwycających szczegółów w prototypach. Wrócę do przykładu przełącznika, aby pokazać, jak dodać mikrointerakcje do tego komponentu za pomocą funkcji MouseDown i On Click .

Składnik

Aby odtworzyć ten przykład, musisz wprowadzić pewne zmiany w strukturze przełącznika:

• Utwórz kopię przełącznika stanu Wyłącz , który już utworzyłeś.
• Utwórz kolejny kształt elipsy o wymiarach 16*24 px, umieść go nad poprzednią elipsą (kołem).

• Połącz obie elipsy jako grupę logiczną za pomocą Union .

• Dowiedz się więcej o grupach logicznych →.

• Zastosuj 32 piksele border-radius do warstwy Union, spowoduje to efekt zniekształcenia, który możesz zobaczyć w przykładzie.
• Utwórz komponent ( Ctrl/Cmd + Alt + K ).

Warianty i prototyp

Aby to zadziałało, potrzebne będą cztery warianty: OffState , OffStatePressed , OnState i OnStatePressed .

• Użyj spustu Mouse Down , aby zasymulować naciśnięcie myszy i aktywuj zniekształcenie, przesuwając większą elipsę o rozmiarze 8 pikseli na drugą stronę.
• Użyj wyzwalacza On Click , aby zmienić stany z Off na On.

Animacja 3D z sekwencją obrazów

Zanim przejdziemy dalej, chciałbym podziękować Andrei Cau , autorce tej fajnej sekwencji 3D, której użyję jako przykładu.

Jest to raczej hack do integracji animacji 3D z prototypem Figma, możesz również użyć GIF-ów, ale w ten sposób zyskujesz pełną kontrolę nad obrazami, a nie tylko odtwarzanie/zatrzymywanie, co pozwala stworzyć prototyp, który symuluje interfejs do obracania obiektów , często spotykany na stronach internetowych poświęconych samochodom, na których można obracać samochód.

W tym przypadku użyłem dziewięciu obrazów (możesz użyć więcej lub mniej, w zależności od wymaganej rotacji), ważne kroki do odtworzenia tej interakcji to:

• Utwórz jeden wariant na obraz (w tym przypadku będzie potrzebnych 9 wariantów) i dołącz po jednym obrazie w każdym z nich, zgodnie z kolejnością sekwencji.
• Utwórz przycisk strzałki, będzie to Hotspot.
• Połącz prawą strzałkę z kolejnym wariantem (powtórz dla każdego wariantu).
• Połącz strzałkę w lewo z poprzednim wariantem (powtórz dla każdego wariantu).
• Użyj animacji Instant zamiast Smart Animate, aby uniknąć efektu zanikania/zanikania i stworzyć iluzję ruchu.

Wniosek

Im częściej korzystam z tej funkcji, tym bardziej myślę, że zmieni ona zasady gry dla firm zajmujących się projektowaniem stron internetowych i produktów. Opanowanie interaktywnych komponentów i wariantów pozwoli projektantom tworzyć lepsze, bardziej zaawansowane i realistyczne prototypy przy mniejszym wysiłku, dając ci swobodę pracy nad rzeczywistymi projektami i mniej skupiania się na samym narzędziu projektowym.

Jak wspomniano wcześniej, stworzyłem plik społeczności Figma z przykładami z tego artykułu (i kilkoma innymi eksperymentami, które przeprowadzałem podczas testowania nowej funkcji). Gdy dołączysz do wersji beta, możesz powielać mój projekt, podążać dalej lub zacząć eksperymentować i dzielić się swoimi wynikami! Baw się czasami animacji, zmieniaj luz, próbuj obracać, skalować elementy, próbować zagnieżdżać różne interaktywne komponenty.

• Pobierz plik projektu Figma →

Jeśli masz pytania lub coś nie jest do końca jasne, zostaw pytanie w sekcji komentarzy poniżej lub napisz do mnie na Twitterze (@emi_cicero) — chętnie pomogę! :)

Dalsza lektura

• składniki
• Zastąpienia
• Warianty
• Wyzwalacze
• Inteligentna animacja
• Łagodzenie
• Plac zabaw z elementami interaktywnymi Figma
• Komponenty interaktywne w Figma (wideo @mds)
• Zaawansowane komponenty interaktywne w Figma (wideo @mds)
• Wideo o interaktywnych komponentach SketchTogether