Figma: Eksport grafik

00:00.610Witaj w kolejnej, niestety już praktycznie ostatniej lekcji, w której chciałbym pokazać Ci, jak eksportować

00:05.440z Figmy grafiki, obrazy. I kliknijmy sobie z Cmd czy Ctrl na tej miniaturce, na avatarze. Zmieniłem nazwę

00:13.180tego kółeczka na "Avatar". I teraz, mam w prawym górnym rogu taką małą ikonkę "Eksportuj".

00:18.250Jeżeli na nią kliknę, mogę opublikować to w bibliotece, którą pokazywałem Ci wcześniej, mogę też wybrać

00:23.680opcję eksportu obrazów.

00:25.030Zauważ, że jest tu wiele obrazów, ale na razie niestety nie możemy eksportować żadnego, mamy tutaj "0 obrazów

00:30.520do wyeksportowania".

00:31.630Po to, aby sprawić, że dany obraz da się eksportować, musimy przejść do jego właściwości po zaznaczeniu

00:37.030tej warstwy, i mamy na dole sekcję

00:39.090"Export". W tej sekcji "Export" możemy kliknąć na małą ikonkę z +, i mamy już możliwość eksportowania naszego

00:44.890obrazu. To, co możemy wybrać w pierwszej kolumnie, to tak zwana skala. O skali trochę wspominałem, mówiąc

00:50.650o tym, że mamy obecnie różne ekrany, które mogą skalować twoją zawartość, np. wysokiej jakości ekrany

00:57.760telefonów skalują zawartość do 2x, albo nawet 3x.

01:02.920Możesz sprawdzić, jak dany telefon skaluje, i, jeżeli będziesz wypuszczał grafiki właśnie na urządzenia mobilne,

01:09.370telefony, tablety czy ekrany wysokiej jakości, takie jak ekrany 4K czy 5K,

01:13.570prawdopodobnie dobrym pomysłem będzie wyeksportowanie tego w skali 2x albo 3x, lub też w jakiejś innej. Telefony

01:20.860z Androidem z dużą gęstością pikseli np. też już eksportują... Też już przyjmują skalę 4x, w związku z tym

01:28.180musisz tutaj uzależnić to od konkretnego urządzenia, na które będziesz eksportował.

01:33.310Możemy dodać jakiś suffix, na przykład, jeżeli publikujemy w skali 2x, możemy dodać suffix "@2x",

01:40.910i to jest taki klasyczny suffix np. iOS-owy, który symbolizuje, że te pliki są wyeksportowane w skali 2x, czyli

01:47.440zostanie to dodane na końcu każdego pliku, który eksportujesz.

01:50.770Następnie wybieramy rozszerzenie. I mamy tutaj do wyboru trzy typy plików. PNG będziesz wybierał wtedy, kiedy

01:56.920masz jakąś przezroczystość, którą chcesz zachować w danej warstwie, czy w danej grupie.

02:02.290Jeśli nie masz przezroczystości, na ogół będziesz wybierał pliki JPG. I te dwa formaty są właściwe dla bitmap,

02:08.600czyli dla pikseli.

02:10.360Jeśli natomiast masz wektory, to zawsze będziesz wybierał format SVG.

02:15.250I, co ciekawe, w formacie SVG możesz oczywiście opublikować go w jakiejś zainicjowanej skali, ale tak naprawdę

02:22.180skala dla formatu SVG nie jest aż tak istotna, ponieważ nie ważne w jakiej skali go wyeksportujesz,

02:27.850później, przy tworzeniu gotowej aplikacji czy strony internetowej ten plik będzie mógł bezstratnie

02:33.670zostać przeskalowany do dowolnego rozmiaru. Więc te pliki SVG będą najlepsze do sieci i na ekrany,

02:39.260no ale w naszym przypadku sam avatar jest wypełniony obrazkiem,

02:42.670nie jest to plik wektorowy, w związku z tym nie ma absolutnie sensu zapisywać go jako SVG, tylko jako

02:48.250jeden z tych dwóch formatów.

02:49.450Ponieważ nie mamy przezroczystości, zapisujemy go jako pliki JPG,

02:53.410i to jest najbardziej popularny format. Następnie mamy możliwość wyeksportowania tylko contentu, tej

02:59.320konkretnej grupy, albo ewentualnie, jak widzisz, mamy tutaj całą ramkę.

03:03.970Jeśli odznaczymy tę opcję, będzie eksportowane też to granatowe tło, które znajduje się za avatarem.

03:10.560No i możemy w tym momencie wybrać polecenie "Preview", żeby zobaczyć, jak zostanie to wyeksportowane.

03:15.610No właśnie. Jeżeli nie mamy tego tła, to mamy tutaj przezroczysty fragment, więc wtedy warto wybrać PNG.

03:21.340Jeśli wybieramy "Contents only", to wtedy będziemy mogli wybrać JPG, ponieważ mamy to wypełnione ciemnym tłem.

03:27.020To już, oczywiście, zależy od Twoich preferencji.

03:29.680Możemy wybrać ten plik PNG i wybrać sekcję "Contents only", tak, żeby ten obrazek nie miał dodatkowej,

03:36.460ciemnej ramki, a następnie wybieramy albo polecenie "Export",

03:39.730z pomocą tego guzika, i, jak widzisz, plik PNG jest już zapisany na moim komputerze albo możemy zrobić to w ten

03:47.950sposób, że przygotować do eksportu wiele takich elementów, np. wszystkie te ikony, damy im naraz eksport

03:55.960do pliku SVG, i teraz możemy naraz wyeksportować sobie trzy warstwy, zobaczyć też pod spodem ich podgląd,

04:02.500ale możemy też pracować dalej z takim plikiem, przygotować sobie rzeczy do eksportu, i na koniec kliknąć

04:07.420na tę małą ikonkę eksportu, wybieramy "Export Images",

04:10.410i, jak widzisz, wszystkie te obrazy są tu zaznaczone.

04:14.410Dodatkowo mamy jeszcze informację od Figmy, że akurat ten obrazek nie jest przypisany, nie jest dobrze

04:22.450osadzony na "Pixel Gridzie". Możesz go wyeksportować w takiej formie, ale możesz też, mając podgląd "Pixel Grid'a",

04:28.780zbliżyć się, przyciągnąć go do siatki pikseli, i wtedy zostanie wyeksportowany jak najbardziej poprawnie.

04:34.420Więc wybieramy polecenie teraz "Export", i, jak widzisz, w pliku ZIP wszystkie cztery pliki zostały zapisane.

04:41.050Jeżeli rozpakuję sobie teraz ten plik, to będę miał w tym ZIP-ie wszystkie pliki w odpowiednich formatach, tak

04:48.480jak je sobie tutaj zaznaczyłem.

04:49.670I to jest pierwszy sposób na publikowanie grafik z poziomu Figmy.

04:54.010Drugi sposób, to korzystanie z narzędzia "Slice Tool", które się tutaj znajduje.

04:58.430I jeżeli nie chcesz eksportować poszczególnych warstw, tak jak to zrobiliśmy teraz, a np. cały fragment

05:05.310czegoś, to możesz zaznaczyć go z pomocą "Slice Tool'a".

05:08.250Przykładowo, możesz sobie zaznaczyć, o, taki fragment, i będzie to odcięcie, które również ma tę sekcję "Export".

05:15.710Możemy kliknąć, chcemy to wyeksportować np. jako PNG, podgląd robimy sobie, i, jak widzisz, to już w tym momencie nie

05:22.220zależy od warstwy, tylko ten "Slice" zawiera jakąś konkretną selekcję.

05:26.670Zauważ że "Slice" jest też widoczny w panelu warstw, więc możemy go ukryć, możemy go zablokować i możemy

05:32.970go też, tak samo jak warstwę, usunąć. Więc możemy to robić również z pomocą właśnie tzw. odcięć, czy "Slice'ów".

05:40.470Same Frame'y, jeżeli klikniemy na Frame, też mają oczywiście opcję eksportu. Więc, jeżeli chcesz wyeksportować

05:46.590cały ekran, to wtedy po prostu wybierasz tu opcję eksport, i możemy zobaczyć, jak to będzie wyglądało. Jak

05:52.740widzisz cały Frame zostanie wyeksportowany jako osobna grafika. Możemy szybko wybrać tę opcję "Export iPhone",

05:58.230i wysłać komuś podgląd całego projektu, który stworzyliśmy. W ten prosty sposób eksportujemy pliki graficzne

06:04.980z Figmy.

06:05.760Myślę, że to wyczerpuje wszystkie te najważniejsze narzędzia, najważniejsze opcje i cały proces pracy

06:13.710w aplikacji Figma.

06:14.970Dlatego dziękuję Ci za uwagę, a w kolejnej lekcji podpowiem Ci jeszcze, co możesz zrobić dalej, aby ten

06:20.880projekt, który stworzyliśmy, zamienić w fantastyczny, interaktywny, klikalny prototyp, np. na zegarku.

06:27.510To wszystko na teraz.

06:28.620Do usłyszenia!