Ikony w Figmie najlepiej przygotowywać jako wektory i eksportować głównie do SVG. Możesz zrobić to ręcznie przez panel Export albo przekazać zasób programiście w Dev Mode. O jakości pliku decydują wcześniejsze porządki w warstwach, poprawne nazwy i zamiana obrysów na ścieżki.

Gdzie szukać ikon do projektów w Figmie?

Najwygodniej zacząć od gotowych bibliotek, a dopiero później importować pojedyncze pliki. Przed użyciem sprawdź licencję zestawu, spójność grubości linii oraz dostępność wariantów potrzebnych w projekcie.

Najczęściej wykorzystywane źródła to:

  • Figma Community – wyszukasz tam kompletne biblioteki ikon, komponenty i zestawy przygotowane bezpośrednio do użycia w Figmie.
  • Wtyczka Iconify – pozwala przeszukiwać wiele popularnych kolekcji i wstawiać wybrane ikony do pliku bez ręcznego pobierania każdej z nich.
  • Phosphor – zestaw z różnymi grubościami linii i stylami, przydatny przy budowaniu spójnego interfejsu.
  • Heroicons – biblioteka ikon przeznaczona między innymi do interfejsów internetowych, dostępna w wariantach outline i solid.
  • Własne pliki SVG – dobre rozwiązanie, gdy projekt korzysta z autorskiego systemu ikon albo wymaga dokładnej kontroli nad geometrią.

Wtyczka przyspiesza wyszukiwanie, ale import własnego SVG daje większą kontrolę nad nazwami warstw i strukturą komponentu. Po dodaniu ikony sprawdź, czy jej rozmiar, optyczne wyrównanie i grubość linii pasują do pozostałych elementów.

Jak przygotować ikony do eksportu?

Przed przekazaniem ikony do kodu uporządkuj jej strukturę. Programista powinien otrzymać przewidywalny zasób, a nie grupę przypadkowych warstw z nazwami typu „Group 24”.

Przeczytaj też: Jak eksportować pliki z Figma? Poradnik krok po kroku

Przejdź przez poniższą listę przed eksportem:

  • Zamień obrysy na ścieżki – zaznacz element z obrysem i użyj polecenia Outline Stroke, dostępnego także pod skrótem Ctrl/Cmd + Shift + O.
  • Usuń zbędne warstwy i grupy – pozostaw tylko elementy, które rzeczywiście budują ikonę.
  • Sprawdź nazwy – stosuj krótkie, opisowe nazwy, na przykład „search”, „arrow-left” lub „close”, zamiast domyślnych nazw Figmy.
  • Zweryfikuj ścieżki wektorowe – upewnij się, że kształty są zamknięte tam, gdzie powinny, a ikona nie zawiera przypadkowych punktów.
  • Sprawdź skalę i wyrównanie – ikony z jednego zestawu powinny mieć podobne pole robocze i optycznie zbliżony ciężar.

Uwaga: PNG i JPG są formatami rastrowymi. Po powiększeniu tracą ostrość, dlatego nie powinny zastępować SVG w przypadku ikon interfejsu. PNG może być przydatny jako podgląd albo zasób wymagany przez konkretną platformę, ale nie zachowuje elastyczności grafiki wektorowej.

Jak wyeksportować ikony z Figmy?

Eksport ręczny przez panel Export

Eksport ręczny daje największą kontrolę nad formatem, skalą i nazwą pliku. Sprawdza się przy pojedynczej ikonie lub małym zestawie.

Przeczytaj też: Najlepsze alternatywy dla Figma – zestawienie narzędzi

  1. Zaznacz ikonę, komponent albo grupę ikon na kanwie lub w panelu warstw.
  2. W prawej części interfejsu znajdź sekcję Export i kliknij przycisk dodawania ustawień eksportu.
  3. Wybierz format SVG, PNG albo PDF oraz ustaw skalę, jeśli jest potrzebna.
  4. Kliknij Export i zapisz plik w miejscu wskazanym przez system.

Przy większej liczbie ikon zaznaczaj elementy z wciśniętym Shift. Jeśli wszystkie mają takie same ustawienia, możesz zastosować je zbiorczo. Dla ikon internetowych i aplikacyjnych zwykle zacznij od SVG.

Format Zastosowanie Zalety Wady
SVG Ikony i ilustracje wektorowe w internecie oraz aplikacjach Skalowalność, mały rozmiar przy prostych kształtach, możliwość zachowania przezroczystości Niektóre efekty i złożone gradienty mogą wymagać sprawdzenia po eksporcie
PNG Podglądy, grafiki rastrowe i sytuacje wymagające konkretnego rozmiaru pikselowego Przezroczystość, przewidywalny wygląd w ustalonej rozdzielczości Brak skalowalności, większe ryzyko utraty jakości po powiększeniu
PDF Druk i przekazywanie grafiki w formie dokumentu Zachowanie informacji wektorowych w wielu przypadkach Mniej wygodny w codziennym użyciu jako zasób interfejsu

Eksport przez Dev Mode

Dev Mode jest interfejsem Figmy przeznaczonym do przeglądania projektu i przekazywania go do implementacji. W odróżnieniu od ręcznego eksportu pozwala programiście szybciej znaleźć zasoby oznaczone jako gotowe oraz sprawdzić ich specyfikację.

Sprawdź także: Figma Dev Mode – czym jest i jak z niego korzystać?

  1. Otwórz plik Figma Design i przełącz się do Dev Mode przełącznikiem w interfejsie albo skrótem Shift + D.
  2. Wybierz ramkę, komponent, instancję lub sekcję, którą chcesz przekazać, a następnie oznacz ją jako Ready for dev.
  3. W panelu warstw przejdź do elementów gotowych do programowania i wybierz ikonę.
  4. W panelu sprawdzania odczytaj ustawienia eksportu albo pobierz wykryty zasób, jeśli Dev Mode rozpoznał ikonę automatycznie.

Dev Mode może automatycznie wykrywać ikony i prezentować je programiście jako zasoby do pobrania. To nie jest jednak dokładnie ten sam proces co ręczne kliknięcie Export. Automatyczne wykrywanie pomaga znaleźć zasób, natomiast ustawienia eksportu nadal zależą od przygotowania warstwy i konfiguracji pliku.

Jeśli chcesz analizować pojedynczą warstwę wektorową znajdującą się wewnątrz ikony, wyłącz opcję automatycznego wykrywania ikon w menu widoku. Funkcje Dev Mode mogą zmieniać się wraz z aktualizacjami Figmy, dlatego nazwy niektórych poleceń mogą się nieznacznie różnić.

Jak usprawnić zarządzanie ikonami?

Gdy ikona występuje w kilku stanach, utwórz z niej komponent i połącz warianty w Component Set. Przykładowe właściwości to stan default, hover, active i disabled. Dzięki temu projektant może przełączać wersje bez duplikowania warstw, a programista widzi relację między stanami.

Bibliotekę utrzymuj według jednej konwencji nazw i rozmiarów. W większych zespołach przydatne są także statusy Ready for dev, adnotacje oraz informacje o zmianach w Dev Mode. Pozwalają przekazać nie tylko sam plik SVG, lecz także kontekst potrzebny do jego użycia.

W małym projekcie wystarczy eksport ręczny i uporządkowany panel warstw. Przy regularnej współpracy designera z programistą lepszy przepływ zapewnia Dev Mode, ponieważ łączy inspekcję, status gotowości i pobieranie zasobów w jednym miejscu.