Figma pozwala eksportować pojedyncze warstwy, całe ramki oraz zestawy assetów bezpośrednio z panelu Export. Najważniejsze decyzje dotyczą wyboru formatu, skali, nazwy pliku i kompresji. Wektory najlepiej zapisywać jako SVG, zdjęcia jako JPG, a grafiki z przezroczystością jako PNG.

Jak wyeksportować grafikę z Figma?

Najpierw zdecyduj, czy potrzebujesz pojedynczego elementu, czy całego widoku. Zaznaczenie warstwy wyeksportuje tylko ten obiekt, natomiast zaznaczenie ramki obejmie jej zawartość jako jeden asset. Ma to znaczenie przy przygotowywaniu ikon, ilustracji, ekranów aplikacji i materiałów dla programistów.

Eksport wykonuje się w panelu Export, znajdującym się w prawej części interfejsu. Możesz określić format, skalę oraz dodatkowy przyrostek nazwy pliku.

Aby wyeksportować pojedynczą warstwę:

  1. Zaznacz warstwę, grupę lub ramkę na płótnie albo w panelu Layers.
  2. Przewiń prawy panel do sekcji Export i kliknij przycisk dodawania ustawień eksportu.
  3. Wybierz format pliku, na przykład PNG, JPG, SVG lub PDF.
  4. Ustaw skalę, taką jak 1x, 2x albo 3x, i w razie potrzeby dodaj suffix, na przykład @2x.
  5. Kliknij przycisk eksportu i wybierz miejsce zapisania pliku.

Skala 1x odpowiada wymiarom projektu. Ustawienie 2x tworzy plik dwukrotnie większy w obu wymiarach, a 3x trzykrotnie większy. Przy ekranach Retina często przygotowuje się wersję 2x, ale nie należy stosować jej bez potrzeby, ponieważ większa rozdzielczość zwiększa wagę pliku.

Przy eksporcie wielu assetów ustawienia można dodać do kilku zaznaczonych warstw lub ramek. Zadbaj o to, aby każda warstwa miała własną nazwę. Figma wykorzysta te nazwy przy tworzeniu plików, co ułatwia późniejsze przekazanie zasobów do kodu.

Sprawdź także: Figma fonts – jak dodać własne czcionki do projektu?

W przypadku eksportu zbiorczego wykonaj następujące czynności:

  1. Zaznacz kilka warstw lub ramek, które mają trafić do paczki assetów.
  2. Dodaj ustawienie eksportu dla zaznaczenia i wybierz wspólny format oraz skalę.
  3. Sprawdź nazwy warstw, aby uniknąć nieczytelnych nazw plików.
  4. Uruchom eksport i zweryfikuj, czy wszystkie pliki mają właściwe wymiary oraz rozszerzenia.

PNG, JPG, SVG czy PDF – który format wybrać?

Format powinien wynikać z rodzaju grafiki i miejsca jej użycia. PNG i JPG są formatami rastrowymi, więc zapisują obraz w postaci pikseli. SVG opisuje kształty wektorowe, dlatego lepiej nadaje się do ikon i prostych ilustracji. PDF służy głównie do dokumentów oraz materiałów przeznaczonych do udostępniania lub druku.

Format Przezroczystość Skalowalność Zastosowanie
PNG Tak Bezstratna, ale rastrowa Ikony, interfejsy, grafiki z przezroczystym tłem
JPG Nie Rastrowa Zdjęcia i duże obrazy bez przezroczystości
SVG Tak, jeśli grafika ją zawiera Tak, wektorowa Ikony, logotypy i proste ilustracje
PDF Zależnie od zawartości Dobra dla elementów wektorowych Dokumenty, prezentacje i materiały do druku

Nie każda grafika nadaje się do SVG. Zdjęcie lub złożona tekstura zostanie zrasteryzowana albo wygeneruje ciężki, skomplikowany plik. Z kolei JPG nie zachowa przezroczystości, dlatego nie sprawdzi się jako format ikony umieszczanej na różnych tłach.

Sprawdź także: Jak eksportować pliki z Figma? Poradnik krok po kroku

Jak zoptymalizować grafiki po eksporcie?

Optymalizacja polega na znalezieniu równowagi między jakością a wagą pliku. Zacznij od eksportowania tylko tych warstw, które rzeczywiście będą używane. Nie twórz kilku dużych wersji obrazu, jeśli aplikacja lub strona potrzebuje tylko jednego rozmiaru.

Podczas przygotowywania assetów stosuj następujące zasady:

  • Dobierz skalę do zastosowania – 2x może być potrzebne dla ekranów Retina, ale zwiększa rozmiar pliku.
  • Wybierz format według zawartości – PNG dla przezroczystości, JPG dla zdjęć, SVG dla wektorów.
  • Nazywaj warstwy opisowo – nazwa icon-search jest użyteczniejsza niż Group 124.
  • Kompresuj pliki rastrowe po eksporcie – narzędzia takie jak TinyPNG mogą zmniejszyć wagę PNG i JPG.
  • Sprawdź złożone SVG – wiele masek, filtrów i niepotrzebnych punktów może utrudnić użycie pliku w kodzie.

Expert note: natywny eksport z Figma nie zawsze daje tak mocną kompresję jak narzędzia wyspecjalizowane w optymalizacji obrazów. Po eksporcie PNG lub JPG warto sprawdzić plik w kompresorze, ale trzeba porównać jakość przed zastąpieniem oryginału.

Jak przygotować assety dla programisty?

Dobry handoff obejmuje nie tylko same pliki, lecz także uporządkowany plik Figma. Programista powinien szybko rozpoznać, który asset jest przeznaczony do użycia, w jakim formacie go pobrać i do którego widoku należy.

Przed przekazaniem projektu sprawdź:

  • Nazwy warstw są opisowe, spójne i zapisane według jednej konwencji.
  • Powiązane elementy są zgrupowane albo umieszczone w czytelnych ramkach i sekcjach.
  • Ustawienia eksportu mają właściwy format, skalę i ewentualny suffix, taki jak @2x.
  • Wymiary i odstępy odpowiadają projektowi, a nie są przypadkowym wynikiem przycięcia.
  • Ramki, komponenty lub sekcje są oznaczone w Dev Mode jako Ready for dev, gdy projekt jest gotowy do implementacji.

W Dev Mode programista może sprawdzić właściwości warstw oraz pobrać zasoby z ustawieniami eksportu. Dzięki temu projektant nie musi wysyłać osobnych plików bez kontekstu, a zespół pracuje na jednym źródle informacji.

Najprostszy workflow wygląda więc tak: przygotuj warstwę lub ramkę, ustaw format i skalę w panelu Export, skompresuj grafiki rastrowe, a następnie uporządkuj nazwy i oznacz gotowe elementy w Dev Mode. Taki proces ogranicza pomyłki i pozwala przekazać assety bez dodatkowego porządkowania.