SVG to podstawowy format ikon w projektach webowych, ponieważ skaluje się bez utraty jakości, zachowuje mały rozmiar i obsługuje przezroczystość. W Figma możesz przygotować ikonę jako czysty wektor, a następnie wyeksportować ją ręcznie lub przekazać programiście przez Dev Mode.
Jak przygotować ikonę SVG w Figma?
Figma generuje kod SVG automatycznie, ale jakość pliku zależy od struktury projektu. Przed eksportem usuń zbędne warstwy, uporządkuj kształty i sprawdź, czy ikona zachowuje właściwe proporcje.
Przygotuj ikonę w następującej kolejności:
- Utwórz ramkę lub komponent – nadaj ikonie określony rozmiar, na przykład 24 × 24 px, i umieść wszystkie elementy wewnątrz tego obszaru.
- Wyrównaj kształty do siatki pikseli – sprawdź położenie punktów, szerokość linii i odstępy. Nieprecyzyjne wartości mogą powodować rozmycie ikony przy wyświetlaniu w małym rozmiarze.
- Zamień obrysy na kształty – zaznacz warstwy z obrysem i wybierz Outline Stroke. W skrócie klawiaturowym Figma używa do tego kombinacji Shift + Command + O na macOS.
- Połącz złożone elementy – przy kilku nakładających się kształtach użyj funkcji Flatten, aby uprościć strukturę wektora.
- Usuń zbędne grupy i warstwy – pozostaw tylko elementy potrzebne do wyświetlenia ikony. Uporządkowane nazwy ułatwią późniejszą inspekcję w Dev Mode.
Nie zostawiaj obrysów jako edytowalnych strokes, jeśli ikona ma trafić do produkcyjnego SVG. Ich wygląd może zależeć od sposobu interpretacji obrysu przez przeglądarkę lub narzędzie używane przez programistę. Po zastosowaniu Outline Stroke obrys staje się zwykłym kształtem wektorowym.
Funkcja Flatten jest przydatna przy złożonych ikonach, ale nie stosuj jej bez sprawdzenia rezultatu. Nadmierne spłaszczanie może utrudnić dalszą edycję komponentu. Najpierw zachowaj kopię roboczą, a do eksportu przygotuj uporządkowany wariant ikony.
Jak eksportować ikony z Figmy?
Do ręcznego eksportu zaznacz ikonę, znajdź sekcję Export w prawym panelu, wybierz SVG i kliknij przycisk eksportu. Ustawienia możesz przypisać do ramki, komponentu albo innej warstwy, która ma być pobierana jako zasób.
SVG nie jest jednak jedynym formatem obsługiwanym przez Figmę. Wybór zależy od zastosowania ikony:
| Format | Zastosowanie | Zalety | Wady |
|---|---|---|---|
| SVG | Ikony, logotypy i elementy interfejsu | Skalowanie bez utraty jakości, mały rozmiar, możliwość użycia jako wektora | Wymaga uporządkowanych kształtów i poprawnej struktury |
| PNG | Podglądy i grafiki rastrowe | Obsługa przezroczystości, przewidywalny wygląd | Brak skalowania bez utraty jakości |
| JPG | Zdjęcia i grafiki z dużą liczbą kolorów | Dobre zmniejszanie rozmiaru zdjęć | Brak przezroczystości i kompresja stratna |
Ręczny eksport sprawdza się przy pojedynczej ikonie lub szybkim przekazaniu pliku. Gdy projektant współpracuje z programistą przy większym zestawie zasobów, wygodniejszy jest Dev Mode. Programista może wtedy otworzyć plik, wybrać ikonę i pobrać ją z poziomu panelu sprawdzania.
Jak użyć Dev Mode do przekazania SVG?
Dev Mode to interfejs Figmy przeznaczony do przeglądania projektu, sprawdzania jego parametrów i pobierania zasobów. Możesz przełączyć się do niego z poziomu pliku Figma Design albo użyć skrótu Shift + D.
Proces eksportu przez Dev Mode wygląda następująco:
- Otwórz plik w Dev Mode – przełącz widok z Design Mode na Dev Mode.
- Znajdź ikonę lub sekcję z ikonami – uporządkowane sekcje ułatwiają nawigację po warstwach i zasobach.
- Oznacz element jako Ready for dev – wybierz ramkę, komponent, instancję albo sekcję i kliknij Mark as ready for dev.
- Wybierz ikonę w panelu – Dev Mode może automatycznie wykryć ikony i zaprezentować je jako zasoby do pobrania.
- Ustaw SVG jako format eksportu – jeśli dla warstwy zapisano ustawienia eksportu, programista może pobrać plik w określonym formacie.
Dev Mode pokazuje także automatycznie generowany fragment kodu oraz informacje o wybranej warstwie. Dzięki temu programista może sprawdzić rozmiar, typ obiektu, zastosowane style i ustawienia eksportu bez edytowania projektu.
Jak przygotować zestaw ikon dla programisty?
Oznaczenie pojedynczej ikony jako Ready for dev sygnalizuje, że można rozpocząć implementację. Przy większym zestawie lepiej umieścić powiązane ikony w jednej sekcji i nadać warstwom opisowe nazwy, na przykład icon/arrow-left albo icon/search.
Dev Mode nadaje priorytet zawartości sekcji oznaczonej jako gotowa do programowania. Programista może przechodzić między ramkami, rozwijać warstwy i sprawdzać zasoby bez przeszukiwania całego pliku.
Przed przekazaniem zestawu sprawdź następujące elementy:
- Obrysy zostały zamienione na kształty za pomocą Outline Stroke.
- Ikony są wyrównane do siatki pikseli i mają spójny rozmiar.
- Zbędne grupy, ukryte warstwy i elementy robocze zostały usunięte.
- Każda ikona lub sekcja ma status Ready for dev.
- Ustawienia eksportu wskazują SVG, jeśli taki format jest wymagany.
- Adnotacje zawierają informacje o wyjątkach, odstępach lub zachowaniu ikony.
Adnotacje w Dev Mode mogą wyjaśnić, czy ikona ma być używana jako komponent, czy jako samodzielny zasób, a także wskazać wymagane warianty, rozmiary lub kolory. Przy zmianach w projekcie programista może korzystać z porównania wersji, dlatego status gotowości nie powinien zastępować krótkiej informacji o tym, co się zmieniło.
W prostym projekcie wystarczy ręczny eksport z panelu Export. Przy stałej współpracy zespołu lepiej oznaczać zasoby jako Ready for dev i korzystać z Dev Mode. Taki workflow łączy czysty plik SVG z jasnym przekazaniem odpowiedzialności za implementację.
