People icons w Figmie najlepiej wdrażać jako spójny zestaw komponentów, a nie pojedyncze obrazki wklejane do ekranów. Wybierz ikony wektorowe SVG, uporządkuj ich warstwy, utwórz komponenty i wykorzystaj Component Properties, aby szybko podmieniać warianty osób w profilach, czatach czy listach użytkowników.
Skąd brać people icons do Figmy?
Źródło ikon zależy od tego, czy ważniejsza jest szybkość pracy, zgodność z istniejącym systemem czy unikalny styl marki. Gotowe zestawy zwykle przyspieszają projektowanie, ale przed użyciem sprawdź licencję oraz sposób dystrybucji plików.
Najczęściej przydatne miejsca to:
- Figma Community – wyszukuj zestawy frazami „people icons”, „user avatar icons” albo „profile icons”. Część plików można skopiować bezpośrednio do projektu.
- Biblioteki ikon – Phosphor, Lucide i Heroicons oferują uporządkowane zestawy o określonej stylistyce, często dostępne także jako pliki SVG.
- Własne ikony – sprawdzają się, gdy marka potrzebuje charakterystycznych sylwetek, nietypowych stanów lub pełnej kontroli nad wyglądem.
| Źródło | Zalety | Wady | Zastosowanie |
|---|---|---|---|
| Figma Community | Szybki dostęp, pliki gotowe do edycji, wiele stylów | Nierówna jakość, różne licencje i nazewnictwo | Prototypy i szybkie projekty |
| Zewnętrzne biblioteki | Spójne zasady, przewidywalna stylistyka, szeroki zakres ikon | Mniejsza unikalność, konieczność sprawdzenia licencji | Systemy interfejsów i produkty cyfrowe |
| Własne ikony | Pełna kontrola nad formą, marką i stanami komponentów | Więcej czasu na projektowanie i utrzymanie zestawu | Produkty z indywidualnym językiem wizualnym |
Jak przygotować people icons w Figmie?
Najważniejszy jest format. SVG przechowuje ikony jako wektory, dzięki czemu można je skalować bez utraty jakości, zmieniać kolor i edytować ścieżki. Raster, na przykład PNG, może być wystarczający jako ilustracja, ale utrudnia zmianę rozmiaru i kontrolę nad elementami ikony.
Pracuj według następującego procesu:
- Importuj pliki SVG do projektu lub skopiuj je z biblioteki Figma Community. Sprawdź, czy po powiększeniu krawędzie pozostają ostre.
- Oczyść strukturę warstw – usuń zbędne grupy, maski i ukryte elementy. Nadaj warstwom opisowe nazwy, na przykład „Head”, „Body” i „Outline”, jeśli taka struktura będzie potrzebna w dalszej edycji.
- Ustal ramkę ikony – wszystkie people icons powinny korzystać z porównywalnego obszaru roboczego, na przykład kwadratu o tej samej wielkości. Dzięki temu sylwetki nie będą optycznie skakać między ekranami.
- Utwórz komponent główny z przygotowanej ikony. Nie kopiuj zwykłych grup do kolejnych widoków, ponieważ zmiany trzeba byłoby wprowadzać ręcznie.
- Dodaj komponent do biblioteki projektu, jeśli zestaw będzie używany przez więcej niż jedną osobę lub na wielu ekranach. Ustal nazwy i strukturę, zanim biblioteka zacznie rosnąć.
Jak zarządzać ikonami osób w sposób profesjonalny?
Komponenty zapewniają jedno źródło dla powtarzalnych ikon, a warianty pozwalają grupować różne stany w jednym zestawie. Możesz rozdzielić je na przykład według stylu „Outline” i „Filled”, rozmiaru albo stanu aktywności.
Nie twórz wariantów tylko po to, aby przechowywać przypadkowe pliki. Każdy wariant powinien mieć jasno określoną właściwość, na przykład Style = Outline lub State = Active. Ułatwia to wyszukiwanie i ogranicza liczbę błędnych podmian.
Component Properties pozwalają przygotować komponent, w którym ikona jest wymieniana z poziomu instancji. Zamiast odłączać komponent albo szukać nowego pliku, projektant wybiera inną people icon w polu właściwości.
Instance Swap w profilach i listach użytkowników
Przykładowo komponent karty profilu może zawierać właściwość typu Instance Swap dla elementu „Avatar icon”. W instancji karty wybierasz ikonę osoby z przygotowanej listy, zachowując układ, odstępy i pozostałe elementy karty. To szczególnie wygodne przy projektowaniu katalogów użytkowników, ekranów czatu i paneli administracyjnych.
Właściwość działa najlepiej wtedy, gdy wszystkie ikony mają podobną ramkę, skalę optyczną i strukturę. Sama podmiana nie naprawi zestawu, w którym jedna sylwetka jest znacznie większa albo ma grubszą linię od pozostałych.
Przed dodaniem zestawu do biblioteki sprawdź następujące elementy:
- Każda ikona ma spójną wagę linii, czyli podobny stroke weight.
- Ikony są wyrównane do wspólnej siatki i mają porównywalny obszar roboczy.
- Pliki nie zawierają zbędnych warstw, ukrytych obiektów ani przypadkowych masek.
- Nazwy komponentów i warstw są krótkie, opisowe oraz zapisane według jednego schematu.
- Warianty mają jasno określone właściwości, takie jak styl, rozmiar lub stan.
- Licencja pozwala na użycie ikon w konkretnym projekcie i przez cały zespół.
Jeżeli ikony mają różne wagi linii, nie rozwiązuj problemu samym zmniejszeniem jednej z nich. Najpierw sprawdź geometrię ścieżek, obszar roboczy i sposób skalowania. W interfejsie użytkownika nawet niewielkie różnice są widoczne przy sąsiadujących elementach.
Dlaczego warto zbudować własną bibliotekę?
Uporządkowana biblioteka people icons skraca pracę przy kolejnych ekranach, ogranicza ręczne poprawki i pomaga utrzymać spójność UI Design. Największą wartość daje połączenie SVG, komponentów, wariantów oraz Component Properties. Taki system jest łatwiejszy do rozwijania niż kolekcja przypadkowych plików i pozwala szybciej tworzyć kolejne projekty w Figmie.
