Korzystanie ze zmiennych w prototypach – Polish (Poland)

This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign.

Zanim zaczniesz

Kto może korzystać z tej funkcji?

Dostępność w dowolnym płatnym planie.

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

W aplikacji Figma zmienne to przechowywane wartości, które reprezentują atrybuty projektu lub zapisane stany. Mogą to być typy wartości: ciąg, liczba, kolor lub wartość logiczna.

Można ustawiać i modyfikować wartości zmiennych za pomocą prototypowania, co pozwala na tworzenie wciągających prototypów, które dynamicznie zmieniają się w zależności od wyboru użytkownika przy użyciu zaledwie kilku prostych ramek i interakcji. Oznacza to, że można używać akcji prototypowych, aby:

Zaktualizować zawartość tekstową przy użyciu zmiennych ciągów
Zmienić wymiary obiektu, promień narożnika lub właściwości automatycznego układu za pomocą zmiennych liczbowych
Przełączyć widoczność warstwy przy użyciu zmiennych logicznych

Aby zacząć używać zmiennych w prototypach, skonfiguruj swoje zmienne, a następnie użyj operacji Set variable (Ustaw zmienną), aby zmienić lub zmodyfikować wartości swoich zmiennych.

Kiedy już opanujesz korzystanie ze zmiennych i prototypów, spróbuj użyć bardziej zaawansowanych funkcji, aby jeszcze bardziej zwiększyć ich możliwości:

Wyrażenia: manipuluj zmiennymi za pomocą podstawowych operacji, co pozwala na tworzenie bardziej zaawansowanych prototypów z elastycznymi wartościami
Wiele operacji i warunków: użyj instrukcji „if/else”, aby sprawdzić, czy warunek został spełniony przed wykonaniem operacji, i ułóż nieograniczoną liczbę operacji na jednym wyzwalaczu

Dowiedz się więcej o zmiennych w aplikacji Figma.

Wypróbuj rozwiązanie

Zbyt mało ćwiczeń? Sprawdź plik środowiska testowego zaawansowanego prototypowania.

Szukasz więcej przykładów wykorzystania zmiennych w prototypach? Sprawdź więcej przykładów zaawansowanego prototypowania.

Konfiguracja zmiennych

Zanim zaczniesz tworzyć prototypy ze zmiennymi, musisz wykonać następujące czynności:

Utwórz zmienne: dowiedz się, jak tworzyć i organizować zbiory zmiennych.
Zastosuj zmienne: dowiedz się, jak stosować zmienne do zawartości tekstowej, wymiarów obiektów, widoczności warstw i nie tylko.

Konfiguracja wartości zmiennych

Po utworzeniu i zastosowaniu zmiennych w całym projekcie możesz zacząć używać ich w prototypach.

Każda interakcja prototypu ma wyzwalacz (to, co powoduje, że prototyp posuwa się naprzód) i jedną lub więcej operacji (to, co dzieje się w wyniku zadziałania wyzwalacza).

Operacja Set variable (Ustaw zmienną) pozwala ustawić lub zmodyfikować wartość zmiennej w wyniku wyzwolenia prototypu.

Aby użyć operacji Set variable (Ustaw zmienną) w interakcji prototypu:

Utwórz interakcję prototypu.
Przejdź do elementu modalnego Interaction (Interakcja) i wybierz element wyzwalający z menu rozwijanego.
Z menu rozwijanego Action (Operacja) wybierz pozycję Set variable (Ustaw zmienną).
Z menu rozwijanego Target (Wartość docelowa) wybierz zmienną, dla której chcesz ustawić nową wartość.
W polu Value (Wartość) wprowadź nową wartość dla zmiennej. Nowy typ wartości musi być zgodny z typem zmiennej, którą zmieniasz. Jeśli na przykład wybierzesz zmienną liczbową, nowa wartość musi być również liczbą.
- String values (Wartości ciągów): wprowadź dowolny tekstowy ciąg znaków (zamknięty w cudzysłowie) lub wybierz dowolną zmienną ciągu z panelu wyboru
- Number values (Wartości liczbowe): wprowadź dowolną wartość liczbową lub wybierz dowolną zmienną liczbową z panelu wyboru
- Boolean values (Wartości logiczne): wprowadź true (prawda) lub false (fałsz), albo wybierz dowolną zmienną logiczną z panelu wyboru
- Color values (Wartości kolorów): wprowadź dowolny kod szesnastkowy lub wybierz kod szesnastkowy z selektora kolorów
Odtwórz swój prototyp, aby przetestować interakcję.

Projekt z dwiema ramkami. Operacja prototypu jest ustawiona na obrazie w pierwszej ramce. Po kliknięciu obrazu zmienna profileName (Nazwa profilu) zaktualizuje swoją wartość, a prototyp przejdzie do następnej ramki.

Uwaga:

Czy Twoje zmienne mają wiele trybów? Dowiedz się więcej o ustawianiu wartości zmiennych na konkretne wartości trybu.

Wskazówka:

Używaj wyrażeń do manipulowania zmiennymi za pomocą operacji. Możesz na przykład wykonywać podstawowe działania matematyczne na zmiennych liczbowych, łączyć wiele zmiennych tekstowych lub używać wyrażeń logicznych.

Wypróbuj rozwiązanie

Stwórzmy kolekcję zmiennych o nazwie „Shapes” (Kształty). Kolekcja ta będzie zawierać jedną zmienną ciągu, która reprezentuje nazwę kształtu.

Usuń zaznaczenie wszystkich elementów w przestrzeni roboczej, następnie odszukaj sekcję Local variables (Zmienne lokalne) na prawym pasku bocznym i kliknij opcję Open variables (Otwórz zmienne).
Kliknij przycisk Create variable (Utwórz zmienną) i wybierz String (Ciąg).
W kolumnie Name wprowadź „shapeName” (Nazwa kształtu).
W kolumnie Value (Wartość) wprowadź „circle” (okrąg).

Teraz możesz zastosować zmienną shapeName do swojego projektu. W tym przykładzie stworzyliśmy prosty projekt, który zawiera ramkę z dwoma kształtami (okrąg i kwadrat) oraz dwie warstwy tekstu. Chcemy powiązać zmienną shapeName z dolną warstwą tekstu, aby zmieniała się w zależności od wybranego kształtu.

Odtwórz projekt przedstawiony poniżej. Dodaj obiekt elipsy, obiekt prostokąta i dwie warstwy tekstu do ramki. Wprowadź „You picked:” (Wybrano:) jako zawartość pierwszej warstwy tekstu.
Kliknij, aby wybrać dolną warstwę tekstu na swojej ramce.
Na karcie Design (Projekt) na prawym pasku bocznym, odszukaj sekcję Text (Tekst) i kliknij przycisk Apply variable (Zastosuj zmienną).
Wybierz zmienną shapeName z panelu wyboru zmiennych, aby zastosować ją do treści tekstu.

Dodajmy teraz interakcję z operacją Set variable (Ustaw zmienną).

Zaznacz obiekt elipsy.
Z prawego paska bocznego przejdź do zakładki Prototype (Prototyp). W sekcji Interactions (Interakcje) kliknij znak plusa , aby dodać nową interakcję.
W elemencie modalnym Interactions (Interakcje) utwórz interakcję z wyzwalaczem On tap / On click (Po dotknięciu/kliknięciu) i operacją Set variable (Ustaw zmienną).
Wybierz zmienną shapeName z menu rozwijanego Target (Wartość docelowa). W polu Value (Wartość) ustaw nową wartość na „circle” (okrąg).
Powtórz kroki 1–4 w przypadku obiektu prostokąta. Tym razem ustaw zmienną shapeName na „square” (kwadrat).

Na ramce zaznaczono obiekt w kształcie okręgu z otwartym elementem modalnym interakcji. Ustawiona jest interakcja: Trigger (Wyzwalacz) ma wartość On tap (Po dotknięciu), Action (Operacja) ma wartość Set variable (Ustaw zmienną), Target (Wartość docelowa) ma wartość shapeName (Nazwa kształtu), a Value (Wartość) ma wartość circle (okrąg).

Teraz możesz już odtworzyć swój prototyp i go przetestować. Gdy klikniesz każdy obiekt kształtu, warstwa tekstu zaktualizuje się automatycznie na podstawie nowej wartości zmiennej. Prototyp jest odtwarzany. Po wybraniu obiektu elipsy dolna warstwa tekstu zmienia kształt na okrąg. Po wybraniu obiektu kwadratu dolna warstwa tekstu zmienia kształt na kwadrat.

Prototyp ze zmiennymi i komponentami

Gdy już nauczysz się podstaw, możesz zacząć jednocześnie używać zmiennych i komponentów w swoich prototypach.

Zastosuj zmienne do komponentów, aby automatycznie aktualizować swój komponent, gdy zmienisz wartość zmiennej w prototypie. Każda zmiana wartości zmiennej powoduje również aktualizację innych elementów powiązanych z tą samą zmienną.

Wartość zmiennej można zmienić przez:

Użycie operacji Set variable (Ustaw zmienną)
Użycie operacji Change to (Zmień na) w komponencie interaktywnym
Użycie operacji Set variable mode (Ustaw tryb zmienny)

Przykład

Zestaw interaktywnych komponentów przycisków ma stan default (domyślnie) i hover (po ustawieniu kursora). Komponent używa operacji Change to (Zmień na), aby po ustawieniu kursora na wariancie default (domyślnie) przełączyć się na wariant hover (po ustawieniu kursora) (i odwrotnie).

Zmienna logiczna hoverState (Stan po ustawieniu kursowa) jest stosowana zarówno do instancji wariantu, jak i do widoczności oddzielnej warstwy nakładki.

Po ustawieniu kursora na wariancie domyślnie w swoim prototypie:

Instancja aktualizuje się do wariantu hover
Zmienna logiczna hoverState aktualizuje się z wartości false na true.
Zostaje wyświetlona warstwa obrazu

Chcesz poćwiczyć na podobnym przykładzie? Sprawdź sekcję „Wypróbuj” poniżej.

Miejsce, w którym zastosujesz zmienną, określa zakres zmian w prototypie.

Zastosuj zmienną do:	Podczas prototypowania:
Właściwości wariantów wystąpień komponentów	Zmień wartość zmiennej, aby zaktualizować wariant instancji.
Właściwości komponentu	Zmień wartość zmiennej, aby zaktualizować wszystkie wystąpienia komponentu.

Dowiedz się więcej o stosowaniu zmiennych do właściwości komponentów i wariantów.

Uwaga: Zagnieżdżona instancja nie przenosi zmian, jeśli jej wariant zostanie zmieniony z powodu zmiany wartości przypisanej zmiennej.

Wypróbuj: Przykład 1

Utwórz zestaw komponentów interaktywnych.
1. Utwórz komponent przycisku, który posiada właściwość wariantu „clicked” (kliknięcie) z wartościami „true” (prawda) i „false” (fałsz).
2. Dodaj interakcję prototypu w wariancie „fałszywym”, używając wyzwalacza On click (Po kliknięciu) i operacji Change to (Zmień na). Teraz po kliknięciu fałszywego wariantu przełączy się on na prawdziwy wariant.
Umieść instancję wariantu z zestawu komponentów interaktywnych w ramce.
1. Dodaj fałszywy wariant do ramki.
Przypisz zmienną do instancji komponentu interaktywnego. Wartość zmiennej musi odpowiadać wartości właściwości wariantu.
1. Utwórz zmienną logiczną circleVisibility (Widoczność okręgu) z domyślną wartością false (fałsz).
2. Wybierz instancję przycisku.
3. Z prawego paska bocznego ustaw kursor na klikniętej właściwości wariantu.
4. Wybierz opcję Apply variable (Zastosuj zmienną).
5. Kliknij, aby wybrać zmienną circleVisibility do powiązania z właściwością.
Przypisz tę samą zmienną do innej warstwy w swoim projekcie.
1. Dodaj obiekt elipsy do ramki.
2. W sekcji Appearance (Wygląd) na prawym pasku bocznym kliknij prawym przyciskiem myszy ikonę Hide (Ukryj).
3. Wybierz zmienną circleVisibility, aby zastosować zmienną logiczną do widoczności warstwy elipsy.
Odtwórz swój prototyp, aby przetestować interakcję. Kiedy interakcja zostanie wyzwolona i komponent zostanie zmieniony, wartość zmiennej również ulegnie zmianie. Oznacza to, że jeśli masz tę samą zmienną powiązaną z innymi wartościami, one również zostaną zaktualizowane.

Wypróbuj to: Przykład 2

Utwórz zestaw komponentów z co najmniej dwoma wariantami.
1. Utwórz zestaw komponentów z właściwością wariantu „shape” (kształt) o wartościach „circle” (okrąg) i „square” (kwadrat).
Umieść instancję wariantu na ramce.
Przypisz zmienną do instancji. Wartość zmiennej musi odpowiadać wartości właściwości wariantu.
1. Utwórz zmienną ciągu shapeType (Typ kształtu) z domyślną wartością „circle”.
2. Kliknij instancję, aby ją zaznaczyć.
3. Z prawego paska bocznego ustaw kursor z prawej strony właściwości wariantu i kliknij przycisk Assign variable (Przypisz zmienną).
4. Wybierz zmienną, którą chcesz powiązać z właściwością.
Utwórz interakcję na dowolnym obiekcie w ramce, który używa operacji Set variable (Ustaw zmienną). Zmodyfikuj wartość zmiennej, aby dopasować ją do wartości nieużywanej właściwości wariantu.
1. Dodaj interakcję prototypu do obiektu, używając wyzwalacza On click / On tap (Po kliknięciu/dotknięciu) i operacji Set variable (Ustaw zmienną). Ustaw wartość zmiennej shapeType na „square”.
Odtwórz swój prototyp, aby przetestować interakcję. Kiedy interakcja zostanie wyzwolona i zmienna się zmieni, wariant również się zaktualizuje.

Zanim zaczniesz

Kto może korzystać z tej funkcji?

Dostępność w dowolnym płatnym planie.

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

Każdy, kto ma dostęp do pliku typu can view (może wyświetlać) lub can view prototypes only (może wyświetlać tylko prototypy), może wyświetlać prototypy.

W aplikacji Figma zmienne to przechowywane wartości, które reprezentują atrybuty projektu lub zapisane stany. Mogą to być typy wartości: ciąg, liczba, kolor lub wartość logiczna.

Zaktualizować zawartość tekstową przy użyciu zmiennych ciągów
Zmienić wymiary obiektu, promień narożnika lub właściwości automatycznego układu za pomocą zmiennych liczbowych
Przełączyć widoczność warstwy przy użyciu zmiennych logicznych

Aby zacząć używać zmiennych w prototypach, skonfiguruj swoje zmienne, a następnie użyj operacji Set variable (Ustaw zmienną), aby zmienić lub zmodyfikować wartości swoich zmiennych.

Kiedy już opanujesz korzystanie ze zmiennych i prototypów, spróbuj użyć bardziej zaawansowanych funkcji, aby jeszcze bardziej zwiększyć ich możliwości:

Wyrażenia: manipuluj zmiennymi za pomocą podstawowych operacji, co pozwala na tworzenie bardziej zaawansowanych prototypów z elastycznymi wartościami
Wiele operacji i warunków: użyj instrukcji „if/else”, aby sprawdzić, czy warunek został spełniony przed wykonaniem operacji, i ułóż nieograniczoną liczbę operacji na jednym wyzwalaczu

Zmienne to dla Ciebie nowy temat? Dowiedz się więcej o zmiennych w aplikacji Figma →

Wypróbuj rozwiązanie

Aby zdobyć więcej praktyki, sprawdź samouczki „Wypróbuj” w każdej sekcji. Użyj tych prostych przykładów, aby lepiej zrozumieć, jak działa ta funkcja.

Zbyt mało ćwiczeń? Sprawdź zaawansowany plik środowiska testowego do prototypowania →

Szukasz więcej przykładów wykorzystania zmiennych w prototypach? Sprawdź więcej zaawansowanych przykładów prototypowania →

Konfiguracja zmiennych

Zanim zaczniesz tworzyć prototypy ze zmiennymi, musisz wykonać następujące czynności:

Utwórz zmienne: dowiedz się, jak tworzyć i organizować zbiory zmiennych →
Zastosuj zmienne: dowiedz się, jak stosować zmienne do zawartości tekstowej, wymiarów obiektów, widoczności warstw i nie tylko →

Konfiguracja wartości zmiennych

Po utworzeniu i zastosowaniu zmiennych w całym projekcie możesz zacząć używać ich w prototypach.

Każda interakcja prototypu ma wyzwalacz (to, co powoduje, że prototyp posuwa się naprzód) i jedną lub więcej operacji (to, co dzieje się w wyniku zadziałania wyzwalacza).

Operacja Set variable (Ustaw zmienną) pozwala ustawić lub zmodyfikować wartość zmiennej w wyniku wyzwolenia prototypu.

Aby użyć operacji Set variable (Ustaw zmienną) w interakcji prototypu:

Utwórz interakcję prototypu.
Przejdź do panelu Interaction details (Szczegóły interakcji) i wybierz wyzwalacz z menu rozwijanego.
Z rozwijanego menu Actions (Operacje) wybierz Set variable (Ustaw zmienną).
Z menu rozwijanego Pick target variable (Wybierz zmienną docelową) wybierz zmienną, dla której chcesz ustawić nową wartość.
W polu Write expression (Zapisz wyrażenie) wprowadź nową wartość dla zmiennej. Nowy typ wartości musi być zgodny z typem zmiennej, którą zmieniasz. Jeśli na przykład wybierzesz zmienną liczbową, nowa wartość musi być również liczbą.
- String values (Wartości ciągów): wprowadź dowolny tekstowy ciąg znaków (zamknięty w cudzysłowie) lub wybierz dowolną zmienną ciągu z panelu wyboru
- Number values (Wartości liczbowe): wprowadź dowolną wartość liczbową lub wybierz dowolną zmienną liczbową z panelu wyboru
- Boolean values (Wartości logiczne): wprowadź true (prawda) lub false (fałsz), albo wybierz dowolną zmienną logiczną z panelu wyboru
- Color values (Wartości kolorów): wprowadź dowolny kod szesnastkowy lub wybierz kod szesnastkowy z selektora kolorów
Odtwórz swój prototyp, aby przetestować interakcję.

Uwaga:

Czy Twoje zmienne mają wiele trybów? Dowiedz się więcej o ustawianiu wartości zmiennych na konkretne wartości trybu →

Wskazówka:

Wypróbuj rozwiązanie

Stwórzmy kolekcję zmiennych o nazwie „Shapes” (Kształty). Kolekcja ta będzie zawierać jedną zmienną ciągu, która reprezentuje nazwę kształtu.

Usuń zaznaczenie wszystkich elementów w przestrzeni roboczej, następnie odszukaj sekcję Local variables (Zmienne lokalne) na prawym pasku bocznym i kliknij opcję Open variables (Otwórz zmienne).
Kliknij przycisk Create variable (Utwórz zmienną) i wybierz String (Ciąg).
W kolumnie Name wprowadź „shapeName” (Nazwa kształtu).
W kolumnie Value (Wartość) wprowadź „circle” (okrąg).

Odtwórz projekt przedstawiony poniżej. Dodaj obiekt elipsy, obiekt prostokąta i dwie warstwy tekstu do ramki. Wprowadź „You picked:” (Wybrano:) jako zawartość pierwszej warstwy tekstu.
Kliknij, aby wybrać dolną warstwę tekstu na swojej ramce.
Na karcie Design (Projekt) na prawym pasku bocznym, odszukaj sekcję Text (Tekst) i kliknij przycisk Apply variable (Zastosuj zmienną).
Wybierz zmienną shapeName (Nazwa kształtu) z panelu wyboru zmiennych, aby zastosować ją do zawartości tekstowej.

Ramka z obiektem elipsy, obiektem kwadratu, warstwą tekstu z napisem YOU PICKED (Wybrano) i zaznaczoną warstwą tekstu z napisem CIRCLE (Okrąg). Po zaznaczeniu drugiej warstwy tekstu kursor myszy wskazuje ikonę Apply variable (Zastosuj zmienną) w sekcji Text (Tekst) na prawym pasku bocznym.

Dodajmy teraz interakcję z operacją Set variable (Ustaw zmienną).

Zaznacz obiekt elipsy.
Z prawego paska bocznego przejdź do zakładki Prototype (Prototyp). W sekcji Interactions (Interakcje) kliknij znak plusa , aby dodać nową interakcję.
Na panelu Interaction details (Szczegóły interakcji) utwórz interakcję z wyzwalaczem On tap / On click (Po dotknięciu/kliknięciu) i operacją Set variable (Ustaw zmienną).
Wybierz zmienną shapeName z menu rozwijanego. W polu to (na) ustaw nową wartość na „circle” (okrąg).
Powtórz kroki 1–4 w przypadku obiektu prostokąta. Tym razem ustaw zmienną shapeName na „square” (kwadrat).

wypróbuj

Teraz możesz już odtworzyć swój prototyp i go przetestować. Gdy klikniesz każdy obiekt kształtu, warstwa tekstu zaktualizuje się automatycznie na podstawie nowej wartości zmiennej.

Obiekt elipsy został zaznaczony. Na karcie Prototype (Prototyp) utworzono interakcję z wyzwalaczem On Tap (Po dotknięciu) i operacją Set Variable (Ustaw zmienną). Zmienna shapeName (Nazwa kształtu) jest ustawiana na wartość Circle (Okrąg).

Prototypowanie z użyciem zmiennych w praktyce

Gdy już opanujesz podstawy, możesz zacząć używać prototypów i zmiennych na różne sposoby.

Używanie zmiennych z wariantami komponentów

Możesz zastosować zmienne do wariantów komponentów. To pozwala automatycznie zaktualizować swój komponent za pomocą operacji Set variable (Ustaw zmienną).

Utwórz zestaw komponentów z co najmniej dwoma wariantami. (Utwórz na przykład zestaw komponentów z właściwością wariantu „shape” (kształt) o wartościach „circle” (okrąg) i „square” (kwadrat)).
Umieść instancję wariantu na ramce.
Przypisz zmienną do instancji. Wartość zmiennej musi odpowiadać wartości właściwości wariantu. (Na przykład przypisz zmiennej shapeType (Typ kształtu) domyślną wartość „circle” do instancji).
1. Kliknij instancję, aby ją zaznaczyć.
2. Z prawego paska bocznego ustaw kursor z prawej strony właściwości wariantu i kliknij przycisk Assign variable (Przypisz zmienną).
3. Wybierz zmienną, którą chcesz powiązać z właściwością.
Utwórz interakcję na dowolnym obiekcie w ramce, który używa operacji Set variable (Ustaw zmienną). Zmodyfikuj wartość zmiennej, aby dopasować ją do wartości nieużywanej właściwości wariantu. (Na przykład ustaw wartość zmiennej shapeType na "kwadrat").
Odtwórz swój prototyp, aby przetestować interakcję. Gdy interakcja zostanie wyzwolona i zmienna zostanie zmodyfikowana, wariant również się zaktualizuje.

Uwaga: Zagnieżdżona instancja nie przenosi nadpisań, jeśli jej wariant zostanie zmieniony z powodu zmiany wartości przypisanej zmiennej.

Wypróbuj rozwiązanie

Utwórz nową lokalną zmienną tekstu o nazwie colorName (Nazwa koloru) i ustaw jej domyślną wartość na „blue” (niebieski).
Utwórz zestaw komponentów z dwoma wariantami: jednym niebieskim kwadratem i jednym żółtym kwadratem. Nadaj właściwości wariantu nazwę „color” (kolor), z nazwami wartości „blue” (niebieski) i „yellow” (żółty).
Umieść instancję niebieskiego wariantu w ramce.
Zastosuj zmienną colorName do instancji, klikając przycisk Assign variable (Przypisz zmienną) obok właściwości wariantu „color”.
Dodaj dwie warstwy tekstu do ramki, poniżej kwadratu. Jedna warstwa tekstu powinna mieć napis „blue” (niebieski), a druga „yellow” (żółty).
Wybierz warstwę tekstu z napisem „blue” i dodaj interakcję prototypu z wyzwalaczem On click / On tap (Po kliknięciu/dotknięciu) i operacją Set variable (Ustaw zmienną). Ustaw wartość zmiennej colorName (Nazwa koloru) na „blue” (niebieski).
Wybierz warstwę tekstu z napisem „yellow” i dodaj interakcję prototypu z wyzwalaczem On click / On tap (Po kliknięciu/dotknięciu) i operacją Set variable (Ustaw zmienną). Ustaw wartość zmiennej colorName (Nazwa koloru) na „yellow” (żółty).
Odtwórz swój prototyp, aby przetestować interakcję. Po kliknięciu „żółtego” tekstu komponent zaktualizuje się do wariantu żółtego kwadratu. Po kliknięciu „niebieskiego” tekstu komponent zaktualizuje się do wariantu z niebieskim kwadratem.

Użycie zmiennych z komponentami interaktywnymi

Podobnie jak przy użyciu zmiennych z wariantami komponentów możesz stosować zmienne do komponentów interaktywnych.

Po kliknięciu komponentu interaktywnego:

Następuje aktualizacja wariantu
Zmienna się aktualizuje, co z kolei aktualizuje wszystkie inne elementy powiązane z tą samą zmienną

Aby używać komponentów interaktywnych ze zmiennymi:

Utwórz zestaw komponentów interaktywnych. (Utwórz na przykład komponent interaktywny przycisku, który posiada właściwość wariantu „clicked” (kliknięcie) z wartościami „true” (prawda) i „false” (fałsz).
Umieść instancję wariantu z zestawu komponentów interaktywnych w ramce.
Przypisz zmienną do instancji komponentu interaktywnego. Wartość zmiennej musi odpowiadać wartości właściwości wariantu. (Na przykład przypisz zmiennej logicznej circleVisibility (Widoczność okręgu) wartość domyślną „false” (fałsz) do instancji).
1. Wybierz instancję.
2. Z prawego paska bocznego wybierz menu rozwijane dla jednej z właściwości wariantu.
3. Wybierz opcję Assign variable (Przypisz zmienną).
4. Kliknij, aby wybrać zmienną, która ma zostać powiązana z właściwością.
Odtwórz swój prototyp, aby przetestować interakcję. Kiedy interakcja zostanie wyzwolona i komponent zostanie zmieniony, wartość zmiennej również ulegnie zmianie. Oznacza to, że jeśli masz tę samą zmienną powiązaną z innymi wartościami, one również zostaną zaktualizowane.

Uwaga: Zagnieżdżona instancja nie przenosi nadpisań, jeśli jej wariant zostanie zmieniony z powodu zmiany wartości przypisanej zmiennej.

Wypróbuj rozwiązanie

Utwórz lokalną zmienną logiczną. Nazwij zmienną selected (wybrana) i ustaw wartość początkową na „false” (fałsz).
Utwórz zestaw komponentów z dwoma wariantami: ze stanem zaznaczenia i ze stanem niezaznaczenia. Nadaj właściwości wariantu nazwę „selected” (wybrana) z wartościami „true” (prawda) i „false” (fałsz).
Dodaj interakcje prototypów między wariantami w zestawie komponentów. Po dotknięciu fałszywy wariant powinien zmienić się w prawdziwy wariant. Po dotknięciu prawdziwy wariant powinien zmienić się w fałszywy wariant.
Umieść instancję fałszywego wariantu na ramce.
Zastosuj zmienną selected (wybrana) do instancji, klikając przycisk Assign variable (Przypisz zmienną) obok właściwości wariantu „selected” (wybrana).
Dodaj obiekt gwiazdy do ramki.
Zastosuj wybraną zmienną do widoczności obiektu gwiazdy:
1. Zaznacz gwiazdę.
2. Przejdź do sekcji Layer (Warstwa) na prawym pasku bocznym i kliknij prawym przyciskiem myszy ikonę widoczności.
3. Kliknij zmienną selected (wybrana) na panelu wyboru zmiennych. Teraz gwiazdka będzie widoczna tylko wtedy, gdy wartość zmiennej selected jest prawdziwa.
Odtwórz swój prototyp. Kliknięcie przycisku spowoduje włączenie/wyłączenie widoczności obiektu gwiazdy.

···

Konfiguracja zmiennych

Konfiguracja wartości zmiennych

Prototyp ze zmiennymi i komponentami

Konfiguracja zmiennych

Konfiguracja wartości zmiennych

Prototypowanie z użyciem zmiennych w praktyce

Używanie zmiennych z wariantami komponentów

Użycie zmiennych z komponentami interaktywnymi