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ć

Każdy, kto używa komponentu z właściwościami komponentu, może wyświetlić jeden zestaw skonsolidowanych elementów sterujących na prawym pasku bocznym, 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.

Właściwości komponentu pomagają również zmniejszyć rozmiar systemu projektowego lub pliku biblioteki poprzez zastosowanie właściwości logicznych.

Typy właściwości komponentów

Właściwości komponentów są powiązane z różnymi właściwościami projektu. Możesz utworzyć właściwości komponentu dla dowolnego głównego komponentu lub 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:

• Właściwości logiczne
• Właściwości zamiany instancji
• Właściwości tekstu
• Właściwości wariantu

Właściwość logiczna

Używaj właściwości logicznych, aby ustawić wartości prawda/fałsz. To pozwala użytkownikom 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.

Jest to także doskonały sposób na zmniejszenie rozmiaru systemów projektowych i bibliotek plików.

Jeśli utworzysz właściwość logiczną dla widoczności warstwy i ustawisz jej wartość na false (fałsz), wszystkie powiązane właściwości komponentu zostaną ukryte. Gdy przełączysz na wartość true (prawda), pojawi się powiązana właściwość.

Właściwość zamiany instancji

Właściwość zamiany instancji wskazuje, które instancje w głównym komponencie lub wariancie mogą zostać zamienione. Podczas tworzenia właściwości zamiany instancji możesz zdefiniować domyślną wartość instancji z dowolnej lokalnej i włączonej biblioteki.

Każda osoba korzystająca z tej właściwości będzie miała dostęp do menu zamiany instancji umożliwiające zamianę zagnieżdżonego zasobu na zasób z tego samego podzbioru komponentów lub z dowolnej dostępnej biblioteki.

Zagnieżdżone instancje z tą właściwością komponentu można zamieniać tylko na najwyższym poziomie warstwy elementu nadrzędnego. Jeśli wybierzesz zagnieżdżoną instancję, nie będziesz móc jej zamienić na inną.

Ustaw preferowane instancje, aby inni wiedzieli, na które instancje mają się zamienić ↓

Właściwość tekstu

Używaj właściwości tekstu, aby wskazać, które warstwy tekstu powinny być edytowane.

Bez względu na to, czy zarządzasz domyślną wartością właściwości tekstowej, czy używasz instancji, która ją zawiera, tekst można edytować z poziomu prawego paska bocznego lub w przestrzeni roboczej. Wartość jest aktualizowana w obie strony.

Warstwy, do których ta właściwość nie została zastosowana, nadal można aktualizować.

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.

Tworzenie i stosowanie właściwości komponentu

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.

Właściwości komponentów można tworzyć na dwóch poziomach: warstwie elementu nadrzędnego lub warstwie podrzędnej głównego komponentu lub zestawu komponentów. Poznaj relację między warstwami nadrzędną i podrzędną.

Możesz tworzyć właściwości zamiany instancji, tekstowe i logiczne z warstwy podrzędnej, które zostaną zastosowane do warstw podrzędnych bez dodatkowych kroków.

Możesz utworzyć dowolną właściwość komponentu z warstwy nadrzędnej, będzie jednak konieczne wykonanie dodatkowego kroku w celu zastosowania jej do warstw podrzędnych. Właściwości wariantu można tworzyć tylko z warstwy elementu nadrzędnego.

Właściwość	Warstwa podrzędna	Warstwa nadrzędna
Wartość logiczna	✓	✓
Tekst	✓	✓
Zamiana instancji	✓	✓
Wariant	✕	✓

Utwórz z warstwy podrzędnej

Utwórz właściwość komponentu z warstwy podrzędnej wariantu lub komponentu głównego. Spowoduje to utworzenie właściwości i zastosowanie jej do wszystkich wybranych warstw jednocześnie.

Ta metoda służy do tworzenia właściwości zamiany instancji, właściwości tekstu i właściwości logicznych.

Nie możesz tworzyć właściwości wariantów z warstwy podrzędnej.

1. Wybierz warstwę zagnieżdżoną w głównym komponencie lub wariancie.
2. (Opcjonalnie, tylko warianty) Kliknij , aby włączyć funkcję edycji wielu obiektów, co pozwala na edycję pasujących obiektów i przyspieszenie przepływu pracy. Dowiedz się, jak edytować wiele wariantów.
3. W prawym pasku bocznym odszukaj sekcję odpowiadającą właściwości komponentu, którą chcesz utworzyć, i kliknij .
   • Instance swap property (Właściwość zamiany instancji): obok menu rozwijanego zamiany instancji na prawym pasku bocznym.
   • Text property (Właściwość tekstu): w sekcji Content (Zawartość) na prawym pasku bocznym.
   • Boolean property (Właściwość logiczna): w sekcji Layer (Warstwa) na prawym pasku bocznym.
4. Jeśli pojawi się menu rozwijane, kliknij pozycję Create property (Utwórz właściwość).
5. W elemencie modalnym Create component property (Utwórz właściwość komponentu) użyj pól i menu rozwijanych, aby skonfigurować właściwość.
   • Zamiana instancji:
     • Nadaj swojej właściwości nazwę w polu tekstowym.
     • Ustaw domyślną wartość za pomocą menu rozwijanego, aby wybrać instancję z lokalnych komponentów w pliku lub w dowolnych włączonych bibliotekach.
     • Jeśli istnieją, skonfiguruj preferowane instancje, aby inni wiedzieli, na które instancje mogą się zamieniać podczas korzystania z komponentu.
   • Tekst:
     • Nadaj swojej właściwości nazwę w polu tekstowym.
     • Ustaw domyślne ciągi tekstowe za pomocą pola tekstowego value (wartość). Jeśli ustawisz wartość domyślną na inną niż bieżący ciąg, aplikacja Figma zaktualizuje ciąg tekstowy, dopasowując go do tej wartości. I odwrotnie, jeśli zaktualizujesz tekst w głównym komponencie, aplikacja Figma zaktualizuje także wartość domyślną.
   • Właściwość logiczna:
     • Nadaj swojej właściwości nazwę w polu tekstowym.
     • Ustaw domyślną wartość na true lub false.
6. Kliknij przycisk Create property (Utwórz właściwość). Po zastosowaniu zobaczysz fioletowy przycisk z nazwą właściwości w odpowiadającej sekcji właściwości na prawym pasku bocznym.

Tworzenie z elementu nadrzędnego warstwy

Ta metoda służy do tworzenia wszystkich typów właściwości, w tym właściwości wariantów.

Dodawanie właściwości komponentu z warstwy nadrzędnej to proces dwuetapowy:

1. Utwórz właściwość komponentu z warstwy nadrzędnej.
2. Ręcznie zastosuj ją do żądanych warstw.

Aby utworzyć właściwość komponentu z warstwy nadrzędnej:

1. Wybierz główny komponent lub zestaw komponentów i kliknij w sekcji Properties (Właściwości) na prawym pasku bocznym. Pojawi się menu rozwijane z opcjami właściwości komponentu.
2. Wybierz właściwość z komponentu.
   • Właściwość wariantu
   • Właściwość logiczna
   • Właściwość zamiany instancji
   • Właściwość tekstu
3. Użyj pól i menu rozwijanych w elemencie modalnym tworzenia właściwości komponentu, aby podać nazwę właściwości i wartość domyślną.
4. Kliknij przycisk Create property (Utwórz właściwość).
5. Na koniec zastosuj właściwość do dowolnej zagnieżdżonej warstwy.

Stosowanie istniejącej właściwości

Aby zastosować istniejącą właściwość komponentu do zagnieżdżonej warstwy:

1. Wybierz jedną lub więcej zagnieżdżonych warstw w głównym komponencie, zestawie komponentów lub wariancie.
2. (Opcjonalnie, tylko warianty) Kliknij , aby włączyć funkcję edycji wielu obiektów, co pozwala na edycję pasujących obiektów i przyspieszenie przepływu pracy. Dowiedz się, jak edytować wiele wariantów.

3. Na prawym pasku bocznym odszukaj sekcję dotyczącą właściwości, którą chcesz zastosować.

4. Kliknij , aby otworzyć menu rozwijane. Menu rozwijane zawiera istniejące właściwości typu w odpowiedniej sekcji.

   • Instance swap (Zamiana instancji): sekcja Instance swap (Zamiana instancji)
   • Text (Tekst): sekcja Content (Zawartość)
   • Boolean (Wartości logiczne): sekcja Layers (Warstwy)

   Jeśli zamiast menu rozwijanego pojawi się element modalny tworzenia właściwości komponentu, oznacza to, że właściwość danego typu nie istnieje w danym komponencie.  Dowiedz się, jak utworzyć właściwość komponentu.

5. W menu rozwijanym kliknij właściwość, aby zastosować ją do wybranych warstw. W panelu po prawej stronie pojawi się fioletowy przycisk z ikoną i nazwą właściwości.

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.

Wybierz preferowane wartości (tylko w przypadku właściwości zamiany instancji)

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.

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 na prawym pasku bocznym 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.

Po zaznaczeniu głównego komponentu lub zestawu komponentów kliknij w sekcji Properties (Właściwości) na prawym pasku bocznym 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.

Na prawym pasku bocznym pojawi się lista wybranych zagnieżdżonych instancji.

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 na prawym pasku bocznym. W wyskakującym oknie 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ściami

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 przestrzeni roboczej.
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 →