Z Figmy wyeksportujesz grafikę przez panel „Export” w prawym dolnym rogu zakładki „Design”. Wybierz obiekt, format oraz skalę, a następnie kliknij „Export”. Do przekazywania projektu programiście służy „Dev Mode”, który pokazuje wymiary, kolory, style i fragmenty kodu.
Gdzie znajduje się funkcja eksportu w Figmie?
Otwórz plik w Figma i zaznacz element, który chcesz zapisać. Może to być pojedyncza warstwa, grupa, komponent albo cała ramka typu Frame. Następnie przejdź do zakładki „Design” w prawym panelu właściwości i przewiń na sam dół do sekcji „Export”.
Jeśli sekcja nie jest jeszcze aktywna, kliknij ikonę „+”. Figma doda ustawienia eksportu do zaznaczonego elementu.
Jak wyeksportować grafikę krok po kroku?
Podstawowa procedura wygląda tak:
- Zaznacz warstwę, grupę, komponent lub Frame na obszarze roboczym.
- W panelu „Design” znajdź sekcję „Export” i kliknij przycisk „+”.
- Wybierz format pliku oraz skalę eksportu, na przykład 1x, 2x albo 3x.
- Kliknij przycisk „Export” i wskaż miejsce zapisania pliku na komputerze.
Skala określa rozdzielczość eksportowanego zasobu. Ustawienie 1x zachowuje rozmiar projektu, 2x tworzy plik dwukrotnie większy w każdym wymiarze, a 3x przygotowuje jeszcze większy wariant. Większa skala może poprawić jakość na ekranach o wysokiej gęstości pikseli, ale zwiększa też wagę pliku.
Przed eksportem grupuj elementy, które mają zostać zapisane jako jeden plik. Jeśli zaznaczysz kilka niepogrupowanych warstw, Figma może potraktować je jako osobne obiekty. W przypadku całego ekranu zaznacz Frame, a nie pojedyncze elementy znajdujące się w jego wnętrzu.
Jaki format pliku wybrać?
Format powinien zależeć od rodzaju grafiki i jej dalszego zastosowania:
| Format | Zastosowanie | Zalety |
|---|---|---|
| SVG | Ikony, logotypy i grafika wektorowa | Skalowanie bez utraty jakości, mały rozmiar dla prostych grafik |
| PNG | Interfejsy, grafiki z przezroczystością, zrzuty ekranów | Obsługa przezroczystego tła i bezstratna jakość |
| JPG | Zdjęcia i grafiki bez przezroczystości | Zwykle mniejszy plik przy dobrej jakości zdjęć |
| Dokumenty, prezentacje i materiały do druku | Wygodne udostępnianie stron oraz zachowanie układu |
Jak przekazać projekt programiście?
Eksport grafiki nie jest tym samym co eksport kodu. Do współpracy z programistą służy Dev Mode. Ten tryb pozwala sprawdzić właściwości projektu bez ręcznego odczytywania ich z warstw.
- Otwórz projekt Figma i przełącz się na „Dev Mode”.
- Wybierz element, komponent albo Frame, który ma zostać zaimplementowany.
- Sprawdź wymiary, odstępy, kolory, typografię, właściwości Auto Layout oraz użyte zasoby.
- Skopiuj potrzebne wartości lub dostępny fragment CSS i przekaż go programiście razem z kontekstem projektu.
Dev Mode pomaga odtworzyć wygląd interfejsu, ale nie zamienia automatycznie całego projektu w gotową aplikację. Pokazuje informacje potrzebne do implementacji, między innymi wartości CSS, kolory, rozmiary i pliki graficzne. Kod aplikacji, logika biznesowa, routing oraz zachowanie komponentów nadal wymagają pracy programistycznej.
Jeśli potrzebujesz wygenerować HTML, CSS albo React, możesz skorzystać z zewnętrznej wtyczki, takiej jak Anima. To alternatywa dla natywnego Dev Mode, a nie jego zamiennik. Wynik eksportu zależy od struktury projektu, dlatego wygenerowany kod zwykle wymaga sprawdzenia i dostosowania przed użyciem produkcyjnym.
Jak przygotować plik do eksportu?
Przed zapisaniem zasobów lub przekazaniem projektu sprawdź kilka elementów:
- Nazewnictwo warstw – używaj nazw opisujących funkcję elementu, na przykład „Button”, „Icon” albo „Card”.
- Auto Layout – stosuj go w kontenerach, które mają zachowywać się responsywnie po przekazaniu do implementacji.
- Struktura Frame – umieszczaj elementy ekranu w odpowiednich ramkach i grupach.
- Porządek w projekcie – usuń niepotrzebne obiekty, ukryte kopie i warstwy znajdujące się poza właściwym Frame.
Do szybkiego znalezienia polecenia możesz użyć wyszukiwarki komend Ctrl + / w systemie Windows lub Cmd + / na macOS, a następnie wpisać „Export”.
W skrócie: panel „Export” służy do zapisywania grafiki w formatach PNG, SVG, JPG lub PDF, natomiast „Dev Mode” ułatwia przekazanie projektu do implementacji. Wybór skali i formatu dopasuj do tego, czy tworzysz ikonę, obraz, dokument czy zasób dla aplikacji.
