Najprostszy sposób na spójne ikony w projekcie Expo i Figmie to korzystanie z tych samych zestawów, które obsługuje @expo/vector-icons. W Figmie użyj wtyczki takiej jak Iconify, wybierz bibliotekę Ionicons, MaterialIcons, FontAwesome lub Feather, a programiście przekaż oryginalną nazwę ikony zamiast eksportować każdy znak jako osobny plik SVG.
Dlaczego łączyć ikony z Figmy z Expo?
@expo/vector-icons udostępnia popularne fonty ikonowe w aplikacjach React Native tworzonych z użyciem Expo. Ikona w kodzie nie jest więc zwykle importowanym obrazem, lecz elementem wybranego zestawu renderowanym przez odpowiedni komponent, na przykład Ionicons albo MaterialIcons.
Figma nie ma natywnego połączenia z kodem Expo. Spójność uzyskuje się przez świadomy dobór wtyczki i biblioteki ikon. Dzięki temu designer może użyć znaku odpowiadającego temu, który developer później wywoła po nazwie w kodzie. Ogranicza to ręczne eksportowanie SVG, problemy z różnymi wariantami tego samego symbolu i błędy wynikające z niejasnego nazewnictwa.
Jakie wtyczki i biblioteki wybrać?
Najwygodniejszym punktem wyjścia jest Iconify, czyli wtyczka pozwalająca wyszukiwać i wstawiać do Figmy ikony z wielu popularnych zestawów. Przed użyciem konkretnego znaku sprawdź jednak, czy należy do biblioteki dostępnej w @expo/vector-icons oraz czy jego nazwa odpowiada dokumentacji Expo.
| Biblioteka w Expo | Wtyczka w Figmie | Zastosowanie |
|---|---|---|
| Ionicons | Iconify | Interfejsy mobilne, nawigacja, akcje i statusy |
| MaterialIcons | Iconify | Klasyczne elementy interfejsu i wzorce Material Design |
| FontAwesome | Iconify | Ikony funkcji, obiektów i kategorii |
| Feather | Iconify | Lekkie, liniowe ikony o prostym wyglądzie |
Nazwa wtyczki nie gwarantuje jeszcze zgodności każdego znaku z Expo. Liczy się konkretny zestaw oraz nazwa ikony. Ikona wybrana z innej biblioteki może wyglądać podobnie, ale nie będzie dostępna pod tą samą nazwą w kodzie.
Jak przenieść ikonę z Figmy do kodu Expo?
Proces może wyglądać tak:
- Znajdź wtyczkę – otwórz panel wtyczek Figmy i wyszukaj Iconify lub inne narzędzie zawierające wybrany zestaw.
- Wybierz bibliotekę – przed wyszukaniem ikony wskaż Ionicons, MaterialIcons, FontAwesome, Feather albo inny zestaw obsługiwany przez projekt Expo.
- Wstaw ikonę do projektu – dopasuj jej rozmiar, kolor i położenie, a następnie umieść ją w komponencie interfejsu lub bibliotece komponentów Figmy.
- Przekaż nazwę developerowi – zapisz nazwę zestawu i dokładną nazwę ikony, na przykład nazwę używaną przez komponent
Ionicons. Nie zmieniaj tej nazwy na własny opis typu „ikona menu górna”.
Po stronie React Native developer może odwzorować taki element za pomocą komponentu z odpowiedniej biblioteki, na przykład:
<Ionicons name="..." size={24} color="..." />
Warto przekazywać także rozmiar, kolor i informację o wariancie ikony. Sam plik z Figmy nie zawsze wystarcza do odtworzenia zachowania komponentu, szczególnie gdy znak ma wersję wypełnioną i obrysową.
Jak utrzymać porządek w bibliotece ikon?
Ikony powinny być traktowane jako część wspólnego systemu projektowego, a nie przypadkowe grafiki dodawane do kolejnych ekranów. Przydatne zasady obejmują:
- Ustal jeden zestaw ikon dla całego projektu, chyba że konkretna funkcja wymaga innej biblioteki.
- Zapisuj w bibliotece Figmy nazwę zestawu oraz nazwę używaną w Expo.
- Buduj komponenty ikon z jednolitymi właściwościami rozmiaru, koloru i wariantu.
- Sprawdzaj dostępność ikony w wersji biblioteki używanej przez projekt.
- Przekazuj developerowi nazwę techniczną, a nie tylko zrzut ekranu lub eksport SVG.
Designer i developer powinni korzystać z tej samej wersji zestawu ikon. Aktualizacja biblioteki po jednej stronie może zmienić nazwy lub dostępne warianty, co prowadzi do błędów typu „missing icon”.
Własne SVG nadal mają sens, gdy projekt wymaga niestandardowej ilustracji albo znaku firmowego. Dla standardowych elementów interfejsu wspólny zestaw w Figmie i @expo/vector-icons zwykle upraszcza pracę, ogranicza liczbę plików i ułatwia późniejsze zmiany.
Najważniejsza zasada jest prosta: najpierw wybierz bibliotekę dostępną w Expo, później znajdź ten sam zestaw w Figmie i zachowaj oryginalną nazwę ikony. Taki workflow pozwala płynnie przejść od projektu interfejsu do implementacji bez ręcznego odtwarzania każdego symbolu.
