Zanim zaczniesz

Kto może korzystać z tej funkcji?

Użytkownicy dowolnego planu

Każdy, kto ma dostęp do edycji plików Figma Design, może tworzyć właściwości komponentów, zarządzać nimi i używać ich

W tym artykule opisano sposób tworzenia i konfigurowania właściwości komponentów. Dowiedz się, jak edytować instancje za pomocą właściwości komponentów.

Właściwości komponentu to zmienne aspekty komponentu. Pozwalają ci przekazać, które części komponentu można zmienić, na przykład:

• Które warstwy w komponencie można ukryć lub pokazać
• Czy można zamienić instancję i ustawić preferowane instancje do zamiany
• Które ciągi tekstowe można zmieniać

Właściwości komponentów tworzy się i stosuje do głównych komponentów i zestawów komponentów w celu zdefiniowania części systemu projektowego i ułatwienia korzystania z systemów projektowych.

Każdy, kto używa komponentu z właściwościami komponentu, może wyświetlić jeden zestaw skonsolidowanych elementów sterujących w prawym panelu, dzięki czemu może od razu sprawdzić, co można zmienić i edytować, w jednym miejscu.

Skraca to czas potrzebny na zapoznanie się z dokumentacją, zwiększa dokładność korzystania z komponentów i systemów projektowania oraz zmniejsza konieczność wybierania i nadpisywania poszczególnych warstw.

Typy właściwości komponentów

Właściwości komponentów są powiązane z różnymi właściwościami projektowymi. Możesz utworzyć właściwości komponentu dla dowolnego głównego komponentu lub wariantów zestawu komponentów i zastosować je do zagnieżdżonych warstw komponentu lub wariantu.

Właściwości komponentów występują w różnych typach:

Typ właściwości komponentu	Zastosowanie
Właściwość logiczna	Wskaż, które warstwy mogą mieć włączoną lub wyłączoną widoczność, na przykład ikonę na przycisku.
Właściwość zamiany instancji	Wskaż, które instancje można zamienić; ustaw preferowane instancje do zamiany.
Właściwość tekstu	Wskaż, którą treść tekstową można zmienić.
Właściwość wariantu	Zdefiniuj różne warianty komponentu, takie jak jego różne stany, rozmiary czy kolory.

Tworzenie i stosowanie właściwości komponentów

Właściwość logiczna

Używaj właściwości logicznych, aby ustawić wartości prawda/fałsz, które pozwalają na włączanie lub wyłączanie atrybutu. Jeśli na przykład system projektowy zawiera przyciski z ikoną i bez niej, zamiast tworzyć warianty dla każdego stanu, zastosuj właściwość logiczną do widoczności warstwy ikony.

Obecnie właściwości logiczne obsługują jedynie widoczność warstw. 

Tworzenie właściwości logicznej

Gdy tworzona jest właściwość logiczna dla widoczności warstwy, wartość ustawiona na false (fałsz) oznacza, że warstwa będzie ukryta. Jeśli ustawisz na true (prawda), warstwa będzie widoczna.

1. Wybierz główny komponent lub zestaw komponentów.
2. W prawym pasku bocznym kliknij w sekcji Properties (Właściwości) i wybierz Boolean (Logiczne) z menu rozwijanego.
3. W elemencie modalnym Create component properties (Utwórz właściwości komponentu) użyj pól i menu rozwijanych, aby skonfigurować właściwość.
   • Nadaj swojej właściwości nazwę w polu tekstowym.
   • Ustaw domyślną wartość na true lub false. Możesz też kliknąć opcję Apply variable (Zastosuj zmienną), aby użyć istniejącej zmiennej logicznej, jeśli jest dostępna.
4. Kliknij przycisk Create property (Utwórz właściwość).

Stosowanie właściwości logicznej do komponentu

1. Wybierz warstwę zagnieżdżoną w głównym komponencie lub wariancie.
2. Jeśli pracujesz z wariantami, możesz kliknąć , aby włączyć funkcję wielokrotnej edycji, co pozwala na edytowanie pasujących obiektów i przyspieszenie przepływu pracy. Dowiedz się, jak edytować wiele wariantów.
3. W prawym pasku bocznym odszukaj sekcję Appearance (Wygląd) i kliknij ikonę Apply variable/property (Zastosuj zmienną/właściwość).
4. Wybierz właściwość logiczną z listy. Po zastosowaniu zobaczysz fioletowy przycisk z nazwą właściwości w prawym pasku bocznym.

Właściwość zamiany instancji

Właściwość zamiany instancji pozwala wskazać, które instancje zagnieżdżone w komponencie głównym lub wariancie mogą zostać zamienione.

Podczas tworzenia właściwości zamiany instancji możesz ustawić instancję domyślną przy użyciu dowolnego komponentu utworzonego w pliku lub z bibliotek dodanych do pliku. Możesz także ustawić preferowane instancje, aby inni użytkownicy wiedzieli, na które instancje mogą się zamieniać. Dowiedz się, jak zamieniać komponenty, używając właściwości zamiany instancji.

Tworzenie właściwości zamiany instancji

1. Wybierz główny komponent lub zestaw komponentów.
2. W prawym pasku bocznym kliknij sekcję Properties (Właściwości) i wybierz opcję Instance swap (Zamiana instancji) z menu rozwijanego.
3. W elemencie modalnym Create component properties (Utwórz właściwości komponentu) użyj pól i menu rozwijanych, aby skonfigurować właściwość.
   • Nadaj nazwę swojej właściwości za pomocą pola tekstowego.
   • Ustaw wartość domyślną, używając menu rozwijanego w celu wybrania instancji z dowolnego komponentu utworzonego w pliku lub z dowolnej biblioteki dodanej do pliku.
   • Możesz skonfigurować preferowane instancje, aby inni wiedzieli, które komponenty powinni wybrać przy zamianie instancji.
4. Kliknij przycisk Create property (Utwórz właściwość).

Stosowanie właściwości zamiany instancji do komponentu

1. Wybierz instancję zagnieżdżoną w głównym komponencie lub wariancie.
2. Jeśli pracujesz z wariantami, możesz kliknąć , aby włączyć funkcję wielokrotnej edycji, co pozwala na edytowanie pasujących obiektów i przyspieszenie przepływu pracy. Dowiedz się, jak edytować wiele wariantów.
3. Na górze prawego paska bocznego kliknij przycisk Apply instance swap property (Zastosuj właściwość zamiany instancji).
4. Wybierz właściwość instancji z listy. Po zastosowaniu zobaczysz fioletowy przycisk z nazwą właściwości w prawym pasku bocznym.

Wybieranie preferowanych wartości

Wartości preferowane umożliwiają utworzenie wybranego zestawu komponentów do wyboru podczas zamiany instancji (za pomocą właściwości zamiany instancji). Ograniczają domysły, informując, które konkretne komponenty mogą zastąpić istniejący.

Możesz na przykład utworzyć przycisk ikony z właściwością wymiany instancji, aby wskazać, że ikonę można zamienić. Jednak twoja biblioteka ikon zawiera ponad 100 ikon, ale tylko 8 z nich powinno być użytych do tego przycisku.

Aby ułatwić znalezienie tych 8 ikon i dowiedzieć się, której z nich można użyć, dodajesz je jako preferowane wartości. Teraz, kiedy projektanci chcą zamienić ikonę, mają wyselekcjonowaną listę zasobów, których mogą użyć.

Podczas korzystania z komponentu z preferowaną wartością lista preferowanych wartości pojawia się domyślnie po otwarciu menu właściwości zamiany instancji.

Aby dodać preferowane wartości dla instancji:

1. Zacznij od edytowania istniejącej właściwości zamiany instancji lub utwórz nową.
2. Z poziomu odpowiednich elementów modalnych kliknij w sekcji Preferred values (Preferowane wartości) i zaznacz pola wyboru obok instancji, które chcesz uwzględnić jako preferowane wartości.

Aby usunąć preferowaną wartość, kliknij obok wartości w sekcji Preferred (Preferowane) wartości w elemencie modalnym.

Właściwość tekstu

Użyj właściwości tekstu, aby wskazać, która zawartość tekstowa w komponencie może być edytowana. Zawartość tekstową można edytować z prawego panelu lub na obszarze roboczym.

Tworzenie właściwości tekstu

1. Wybierz główny komponent lub zestaw komponentów.
2. Kliknij sekcję Properties (Właściwości) na prawym pasku bocznym i wybierz opcję Text (Tekst) z menu rozwijanego.
3. W elemencie modalnym Create component property (Utwórz właściwość komponentu) użyj pól, aby skonfigurować właściwość.
   • Nadaj nazwę swojej właściwości za pomocą pola tekstowego.
   • Ustaw domyślne ciągi tekstowe za pomocą pola tekstowego value (wartość). Możesz też kliknąć opcję Apply variable (Zastosuj zmienną), aby użyć istniejącej zmiennej ciągu, jeśli jest dostępna.
4. Kliknij przycisk Create property (Utwórz właściwość).

Stosowanie właściwości tekstu do komponentu

1. Wybierz warstwę tekstu zagnieżdżoną w głównym komponencie lub wariancie.
2. W sekcji Text (Tekst) u góry prawego paska bocznego ustaw kursor na polu tekstowym i kliknij opcję Apply variable/property (Zastosuj zmienną/właściwość).
3. Wybierz właściwość tekstu z listy.

Właściwość wariantu

Wariant to indywidualny komponent w zestawie komponentów.

Właściwość wariantu pozwala zdefiniować atrybuty wariantów, takie jak stan, kolor lub rozmiar.

Zestaw komponentów zawiera wiele wariantów, a warianty te mają atrybuty, które można zdefiniować za pomocą właściwości wariantu. Właściwości wariantów są specyficzne dla wariantów i zestawów komponentów i nie mogą być tworzone ani stosowane do głównych komponentów.

Dowiedz się, jak tworzyć warianty i zestawy komponentów.

W poniższym przykładzie mamy komponent przycisku z czterema wariantami. Ma dwie właściwości wariantowe, rozmiar i kolor. Wartości rozmiaru obejmują mały i duży, a wartości koloru obejmują zielony i czerwony.

Przełączanie na inną właściwość komponentu

Jeśli do warstwy zastosowano właściwość komponentu, w każdej chwili można ją przełączyć na inną.

1. Na prawym pasku bocznym znajdź odpowiednią sekcję dla właściwości komponentu, którą chcesz zmienić.
   • Instance swap property (Właściwość zamiany instancji): góra prawego paska bocznego.
   • Text property (Właściwość tekstu): góra prawego paska bocznego w sekcji Text (Tekst).
   • Boolean property (Właściwość logiczna): sekcja Appearance (Wygląd).
2. Kliknij fioletowy przycisk.
3. Wybierz istniejącą właściwość tego samego typu.

Dostosowywanie właściwości komponentu

Zmiana domyślnej wartości

Zmień domyślną wartość właściwości tekstu, logicznej lub zamiany instancji.

1. Wybierz zestaw komponentów lub główny komponent.
2. Kliknij obok właściwości wariantu, aby otworzyć element modalny edycji właściwości.
3. Użyj pola tekstowego lub menu rozwijanego w sekcji Value (Wartość), aby zmienić wartość domyślną.

Zmiana wartości domyślnej zostanie odzwierciedlona w przestrzeni roboczej, jeśli do powiązanej warstwy instancji nie zastosowano żadnych nadpisań właściwości.

Eksponowanie zagnieżdżonych instancji

Wyeksponuj określone zagnieżdżone instancje, aby ujawnić ich właściwości komponentu wraz z właściwościami instancji najwyższego poziomu. Dzięki temu użytkownicy systemów projektowych mogą odkrywać zagnieżdżone instancje i właściwości ich komponentów bez konieczności mozolnego wyszukiwania warstw.

Możesz na przykład utworzyć komponent karty mediów społecznościowych zawierający wiele zagnieżdżonych w nim komponentów — awatar, nazwę, przyciski itd. Chcesz zmienić ikonę domyślnego przycisku na ikonę „wysyłania” i zmienić jej tekst. Chcesz również zmienić status przycisku anulowania na wyłączony .

Zamiast zagłębiać się w każdą warstwę, aby znaleźć kontrolki właściwości komponentów, możesz wyeksponować zagnieżdżone instancje, co pozwala kliknąć tylko komponent najwyższego poziomu — w tym przypadku kartę mediów społecznościowych — i edytować instancję z jednego miejsca.

Po wybraniu instancji najwyższego poziomu z odsłoniętymi zagnieżdżonymi instancjami w prawym panelu pojawi się lista właściwości komponentów dla instancji najwyższego poziomu i instancji zagnieżdżonych.

Po ustawieniu kursora na wierszu właściwości wokół odpowiadającego mu obiektu w przestrzeni roboczej pojawia się jasnofioletowe podświetlenie, dzięki któremu wiesz, co edytujesz.

Wybieranie zagnieżdżonych instancji do wyeksponowania

Po zaznaczeniu głównego komponentu lub zestawu komponentów kliknij w sekcji Properties (Właściwości) w prawym panelu i wybierz opcję Nested instances (Zagnieżdżone instancje) w sekcji Expose properties from (Wyeksponuj właściwości z).

W elemencie modalnym Expose nested instances (Wyeksponuj zagnieżdżone instancje) zaznacz pola wyboru dla instancji, które chcesz wyeksponować na najwyższym poziomie.

Lista wybranych zagnieżdżonych instancji pojawi się w panelu po prawej stronie.

Aby usunąć zagnieżdżone instancje przed ich wyeksponowaniem, ustaw kursor na nazwę instancji na tej liście i kliknij .

Upraszczanie instancji

Uproszczenie instancji pomaga zmniejszyć bałagan w panelu właściwości, ukrywając warstwy, do których nie zastosowano właściwości komponentu. Figma zakłada, że warstwa nieposiadająca żadnych właściwości komponentu jest warstwą, której nie należy edytować, a zatem można ją ukryć.

Aby uprościć instancję, wybierz główny komponent lub zestaw komponentów i kliknij opcję Component configuration (Konfiguracja komponentu) w prawym panelu. W oknie, które się pojawi, zaznacz pole wyboru simplify all instances (uprość wszystkie instancje).

Podczas korzystania z instancji uproszczonego komponentu nadmiarowe warstwy zostaną zwinięte w obszarze See all layers (Zobacz wszystkie warstwy). Kliknij obszar See all layers (Zobacz wszystkie warstwy), aby rozwinąć i zobaczyć warstwy. Możesz je ponownie zwinąć, klikając poza panelem warstw lub wybierając inną warstwę.

Zarządzanie właściwością komponentu

Po utworzeniu właściwości komponentu i ich wartości możesz nimi zarządzać w dowolnym momencie. Możesz zmieniać nazwy, zmieniać kolejność, usuwać, zmieniać wartości domyślne — i nie tylko.

Odłączanie właściwości

Odłącz tekst, zamianę instancji lub właściwości logiczne od warstwy.

1. Wybierz zagnieżdżoną warstwę z zastosowaną właściwością komponentu.
2. Kliknij w prawym panelu bocznym obok właściwości, którą chcesz odłączyć.

Spowoduje to usunięcie właściwości komponentu z warstwy, ale właściwość komponentu nie zostanie usunięta.

Zmiana nazwy, zmiana kolejności lub usuwanie

Właściwości

Aby zmienić nazwę, kolejność lub usunąć istniejącą właściwość komponentu:

1. Wybierz główny komponent lub zestaw komponentów.
2. W sekcji Properties (Właściwości) na prawym pasku bocznym:

   • Zmiana nazwy: kliknij dwukrotnie nazwę właściwości. Wpisz nową nazwę, a następnie naciśnij klawisze Return / Enter lub kliknij poza polem, aby zastosować zmianę.

   • Zmiana kolejności: ustaw kursor na właściwości, aby wyświetlić pseudonimy. Kliknij i przeciągnij, aby zmienić kolejność, a następnie zwolnij, aby zastosować zmianę.

     Właściwości wariantów zawsze znajdują się nad innymi typami właściwości w prawym pasku bocznym. Można je przestawiać z innymi wariantami właściwości, ale nie z innymi typami właściwości.

   • Usunięcie: kliknij prawym przyciskiem myszy właściwość i wybierz opcję Delete property (Usuń właściwość). Możesz również wybrać właściwość i nacisnąć klawisz Delete.

     Jeśli zestaw komponentów lub komponent główny zawierają tylko jedną właściwość wariantu, usunięcie tej właściwości spowoduje usunięcie całego zestawu komponentów lub komponentu głównego.

Wartości

Aby zmienić lub przestawić wartości właściwości wariantu:

1. Wybierz zestaw komponentów lub główny komponent.
2. Kliknij obok właściwości wariantu, aby otworzyć element modalny edycji właściwości.
   • Zmiana: w sekcji Values (Wartości) użyj pól tekstowych, aby zmienić lub zaktualizować wartości.
   • Zmiana kolejności: ustaw kursor na wartości, aby wyświetlić pseudonimy. Kliknij i przeciągnij, aby zmienić kolejność.

Środowisko testowe komponentów w interfejsie Dev Mode

Wybierając komponent lub instancję w interfejsie Dev Mode, zobaczysz podgląd komponentu, łącze do głównego komponentu oraz wszelkie łącza do odpowiedniej dokumentacji i zasobów dla programistów.

Po zaznaczeniu instancji komponentu w panelu sprawdzania pojawia się środowisko testowe komponentu. W środowisku testowym masz okazję poeksperymentować z różnymi właściwościami komponentu bez zmiany rzeczywistego projektu. Aby otworzyć środowisko testowe komponentów w interfejsie Dev Mode:

1. Wybierz instancję komponentu w obszarze roboczym.
2. Kliknij przycisk Open in playground (Otwórz w środowisku testowym) w panelu Inspect (Sprawdź).

Dowiedz się więcej o używaniu interfejsu Dev Mode do sprawdzania projektów.