Przewodnik po zmiennych w aplikacji Figma

Zmienne w Figma Design przechowują wartości, które można ponownie wykorzystać do zastosowania w przypadku wszelkiego rodzaju właściwości projektu i operacji prototypowania. Pomagają oszczędzać czas i pracę podczas tworzenia projektów, zarządzania systemami projektowymi i tworzenia złożonych przepływów prototypów.

Możesz wykonać następujące czynności:

• Twórz tokeny projektowe, aby zwiększyć efektywność przy zarządzaniu systemami projektowania.
• Przełączaj ramkę między różnymi rozmiarami urządzeń i natychmiast aktualizuj odstępy zgodnie z określonym systemem przestrzennym.
• Wyświetlaj podgląd, jak tekst układa się w różnych językach, przełączając tekst na ramce.
• Utwórz w pełni funkcjonalny projekt koszyka przy kasie, który oblicza sumę zamówienia na podstawie dodanych do niego pozycji.
• Zbuduj prototyp interaktywnego quizu, który wykorzystuje logikę warunkową, aby pokazać, czy użytkownik odpowiedział na pytanie poprawnie czy niepoprawnie.

Istnieją trzy główne sposoby używania zmiennych w aplikacji Figma:

1. Projekty i systemy projektowania ↓
2. Zaawansowane prototypowanie ↓
3. Interfejsy API Figma ↓

Zmienne do projektów i systemów projektowania

Użyj zmiennych i trybów, aby w swoim systemie wdrożyć tokeny projektowe oraz przełączać projekty między różnymi kontekstami — takimi jak jasne/ciemne motywy. Dzięki zmiennym możesz projektować wydajniej i budować bardziej wydajny system projektowania.

• Samouczek Figma: Wprowadzenie do zmiennych

  W tym samouczku wideo omówiono podstawy zmiennych, sposób ich wykorzystania do reprezentowania tokenów projektowych oraz sposób używania zmiennych kolorów i liczb w celu uwzględnienia różnych trybów i motywów.
• Samouczek Figma: Zmienne dotyczące typografii

  Z tego samouczka wideo dowiesz się, jak używać zmiennych we właściwościach czcionek, przyjmować zmienne do istniejącego systemu typów i jak używać ich do zasilania responsywnego projektu.
• Artykuł: Omówienie zmiennych, zbiorów i trybów →

  Tutaj rozpoczniesz swoją podróż ze zmiennymi! Poznaj różne typy zmiennych oraz dowiedz się, czym są kolekcje zmiennych i tryby.

• Artykuł: Tworzenie zmiennych i zarządzanie nimi →

  Dowiedz się, jak tworzyć zmienne i zbiory, odwoływać się do innych definicji zmiennych i określać, które zmienne mogą być używane w projektach.

• Artykuł: Stosowanie zmiennych w projektach →

  Dowiedz się, jak zastosować istniejące zmienne do właściwości projektowych.

• Artykuł: Tryby zmiennych →

  Dowiedz się, jak utworzyć wiele definicji zmiennej, z których każda będzie powiązana z trybem. Dowiedz się również, jak używać ich do szybkiego zmieniania kontekstów projektów.

• Article: Różnica między zmiennymi i stylami →
  

  Wraz z rozszerzeniem zestawu funkcji aplikacji Figma o zmienne możesz się zastanawiać: jaka jest różnica między zmiennymi i stylami? Kiedy wybrać jedno z nich, a kiedy drugie?

• Artykuł: Zmienne w interfejsie Dev Mode →

  Dowiedz się więcej o uzyskiwaniu dostępu do zmiennych w Dev Mode podczas sprawdzania projektów, w tym o uzyskiwaniu szczegółów zmiennych i sugerowanych zmiennych oraz o przeglądaniu lokalnych zmiennych przy użyciu tabeli zmiennych.

• Plik społeczności: środowisko testowe zmiennych →

  Chcesz zdobyć praktyczne doświadczenie ze zmiennymi? Pobierz kopię pliku środowiska testowego, aby ćwiczyć podczas nauki.

Zmienne do zaawansowanego prototypowania

Dzięki zmiennym możesz budować prototypy o wysokiej wierności przy użyciu mniejszej liczby klatek. Używaj zmiennych z innymi zaawansowanymi funkcjami, takimi jak wyrażenia i instrukcje warunkowe, aby przenieść swoje prototypy na wyższy poziom.

W prototypowaniu zmienne są używane do przechowywania stanów obiektów lub ich właściwości. Używaj interakcji prototypów do modyfikowania wartości zmiennych, które mogą zmieniać wygląd, zawartość lub widoczność obiektów w projekcie — a wszystko to w kilku prostych ramkach.

• Samouczek wideo: Tworzenie prototypu ze zmiennymi

  Obejrzyj go i naucz się, jak używać zmiennych w prototypach, śledząc realistyczny przykład. Dowiesz się, jak modyfikować wartości zmiennych, jak budować proste wyrażenia i jak używać wielu akcji i logiki „if/else” do oceny kontroli warunkowych.
• Artykuł: Korzystanie ze zmiennych w prototypach →

  Poznaj podstawy prototypowania ze zmiennymi w aplikacji Figma — w tym jak skonfigurować swoje zmienne, używać operacji Set variable (Ustaw zmienną) do zmiany wartości zmiennych oraz jak używać zmiennych z wariantami komponentów i komponentami interaktywnymi.

• Artykuł: Używanie wyrażeń w prototypach →

  Dowiedz się, jak używać wyrażeń i zmiennych w prototypach, aby generować dynamiczne wartości ciągów znaków, wykonywać podstawowe operacje matematyczne na wartościach liczbowych, a nawet oceniać wyrażenia logiczne.

• Artykuł: Wiele operacji i warunków →

  Dowiedz się, jak korzystać z wielu operacji, aby ustawić nieograniczoną liczbę operacji na tym samym wyzwalaczu, lub używać instrukcji warunkowych, aby sprawdzić, czy warunek został spełniony, przed wykonaniem operacji za pomocą logiki „if/else”.

• Artykuł: Tryby zmienne w prototypach →

  Dowiedz się, jak korzystać z trybów zmiennych w swoich prototypach. Możesz ustawić wartości konkretnych trybów w zależności od kontekstu lub użyć konkretnych wartości trybów w swoich wyrażeniach.

• Plik społeczności: zaawansowany plik środowiska testowego do prototypowania →

  Utwórz kopię naszego pliku zaawansowanego prototypowania, aby uzyskać więcej praktycznych ćwiczeń ze zmiennymi w prototypowaniu.

Zmienne wykorzystujące interfejsy API

Zmienne są teraz obsługiwane w interfejsie API wtyczek Figma — do tworzenia wtyczek i widżetów— oraz w interfejsie REST API. 

• Dokumentacja dla programistów: do interfejsu REST API →

  Wsparcie dla zmiennych w interfejsie REST API obejmuje punkty końcowe do zapytań, tworzenia, aktualizacji i usuwania zmiennych.

• Dokumentacja dla programistów: do interfejsu API wtyczek →

  Wsparcie dla zmiennych w API wtyczek obejmuje tworzenie i odczytywanie zmiennych oraz ich wiązanie z komponentami. Można na przykład utworzyć wtyczkę umożliwiającą importowanie lub eksportowanie zmiennych albo konwersję stylów na zmienne.

• Dokumentacja dla programistów: do interfejsu API widżetów →

  Widżety mogą uzyskiwać dostęp do zmiennych za pomocą interfejsu API wtyczki. Widżety mogą tworzyć i odczytywać zmienne, ale właściwości widżetów nie mogą być powiązane ze zmiennymi.

• Samouczek Figma: Synchronizacja zmiennej z GitHub

  Z tego samouczka wideo dowiesz się, jak synchronizować zmienne z bazą kodu. Pokażemy Ci, jak używać naszego przykładowego repozytorium operacji GitHub Variables do synchronizacji zmiennych Figma i Twojej bazy kodu.
• Plik społeczności: synchronizacja systemów projektowania przy użyciu interfejsu REST API zmiennych →

  Dowiedz się, jak możesz użyć interfejsu REST API zmiennych Figma, aby skonfigurować zautomatyzowane przepływy pracy do synchronizacji zmian między plikami projektów a bazą kodu.