Zmienne w interfejsie Dev Mode
Jako programista, przeglądając projekty w trybie programistycznym, natkniesz się na zmienne koloru, liczb, ciągów i zmienne logiczne. Wartości tych zmiennych mogą zależeć od takich elementów jak tryb zmienny, co czasami utrudnia zidentyfikowanie dokładnych wartości, które chcesz wyciągnąć z projektu.
Firma Figma oferuje kilka opcji w interfejsie Dev Mode, aby ułatwić programistom pracę ze zmiennymi:
Szczegóły zmiennych
Przeglądając projekt w interfejsie Dev Mode, możesz zobaczyć szczegóły dotyczące zmiennych użytych w projekcie. Element modalny Variable details (Szczegóły zmiennej) przedstawia informacje o zmiennej, takie jak:
- Nazwa zmiennej
- Łącze do pliku, który zawiera zmienną
- Nazwa zbioru zmiennych, który zawiera daną zmienną
- Tryb zmiennej
- Wartość zmiennej oraz, jeśli to istotne, łańcuch aliasów prowadzący do wartości surowej
- Zakres zmiennej (gdzie można jej używać)
- Fragment kodu do użycia zmiennej
Przydatną funkcją jest możliwość śledzenia łańcucha aliasów zmiennych do określonej wartości. Na przykład na poprzednim obrazie zmienna Background/Positive/Default (Tło/dodatnio/domyślnie) używa aliasu Green/500 (Zielone/500), co odpowiada wartości koloru #14AE5C.
Korzystając z elementu modalnego Variable details (Szczegóły zmiennej), możesz także zmieniać tryby, co pozwala wyświetlić inne wartości, jakie może przyjąć zmienna.
Otwieranie elementu modalnego Variable details (Szczegóły zmiennej)
Dostępne są dwa sposoby otwierania elementu modalnego Variable details (Szczegóły zmiennej):
W przypadku zmiennych pojawiających się we fragmencie kodu, takich jak tokeny projektowe w arkuszach CSS, kliknij nazwę zmiennej w panelu Inspection (Sprawdzanie), aby otworzyć element modalny Variable details (Szczegóły zmiennej).
W przypadku innych zmiennych, takich jak te, które pojawiają się w sekcji Selection colors (Kolory zaznaczenia), kliknij opcję Variable details (Szczegóły zmiennej) w panelu Inspection (Sprawdzanie), aby otworzyć element modalny Variable details (Szczegóły zmiennej).
Sugerowane zmienne
W interfejsie Dev Mode podczas sprawdzania projektu czasami zamiast zmiennych lub stylów natkniesz się na wartości surowe. Może się to zdarzyć z wielu powodów, na przykład gdy projektant przypadkowo odłączy zmienną podczas fazy projektowania. Gdy natrafisz na surową wartość, możesz sprawdzić, czy istnieje zmienna, której można użyć zamiast niej.
Aby ułatwić identyfikację odpowiednich zmiennych, interfejs Dev Mode może zasugerować zmienne.
Aby można było zasugerować zmienną, musi ona mieć:
- Dokładnie taką samą wartość
- Odpowiedni zakres
Możesz kliknąć sugerowaną zmienną, aby skopiować jej nazwę.
Uzyskiwanie sugerowanych zmiennych
Aby uzyskać sugerowane zmienne dla wartości w interfejsie Dev Mode, w panelu Inspection (Sprawdzanie) kliknij wartość, dla której chcesz uzyskać sugestię. Element modalny Suggested variables (Sugerowane zmienne) pojawia się obok klikniętej wartości.
Uzyskiwanie dostępu do zbioru zmiennych lokalnych
W interfejsie Dev Mode możesz uzyskać dostęp do zbiorów zmiennych lokalnych w pliku i je wyświetlać.
Na przykład na poprzednim obrazie, w sekcji Collections from this file (Zbiory z tego pliku), wybrano zbiór zmiennych Color Primitives (Prymitywy kolorów). Te nazwy są tylko przykładami — rzeczywiste nazwy zbiorów i zmiennych odpowiadają lokalnym zmiennym i zbiorom w danym pliku.
Poniżej sekcji Collections from this file (Zbiory z tego pliku) znajduje się lista wszystkich grup zmiennych, które pojawiają się w zbiorze, takich jak Brand (Znak), Black (Czarny) i White (Biały). Domyślnie wybrana jest opcja All variables (Wszystkie zmienne). Grupy są uporządkowane w taki sam sposób, w jaki są zorganizowane w elemencie modalnym Variables (Zmienne).
W przypadku wybranej grupy tabela zmiennych przedstawia zmienne wraz z wartościami dla każdego trybu zmiennej. Jeżeli wybrano opcję All variables (Wszystkie zmienne), tabela jest uporządkowana według grup.
Możesz kliknąć poszczególne zmienne i wartości, aby skopiować je do schowka i wyświetlić szczegóły dotyczące zmiennej.
Otwieranie tabeli zmiennych
Aby otworzyć tabelę zmiennych, w sekcji Variables (Zmienne) panelu Inspection (Sprawdzanie) kliknij opcję Open variables (Otwórz zmienne). Tabela zmiennych rozszerzy się, aby wypełnić przestrzeń roboczą.