Figma: Import Sketch Ai

00:00.270Niekiedy wygodne staje się wyjście z trybu pełnoekranowego Chrome'a, czyli zamknięcie tego trybu i przejście

00:05.190do normalnych zakładek w przeglądarce. A dzieje się to zwłaszcza wtedy, kiedy chcemy na przykład do Figmy

00:10.260zaimportować coś z innej aplikacji, takiej jak Sketch, czy Illustrator.

00:14.490Jest to możliwe i w tej lekcji chciałbym pokazać, jak to działa.

00:17.280Zanim przejdziemy do tej aplikacji, chcę pokazać Ci jak proste jest umieszczanie w Figmie zdjęć, czyli

00:22.260np. *.jpg, czy plików *.png.

00:24.750Możemy wybrać z pomocą tej małej ikonki opcję "Place image" i po prostu wstawić zdjęcie, które mamy np.

00:30.990na dysku, ale możemy też zwyczajnie za pomocą Findera przeciągnąć sobie jakieś zdjęcie i upuścić je

00:38.670po prostu w przeglądarce. Zostanie ono wystawione jako nowa warstwa do Figmy.

00:43.740Jest to taka warstwa, która ma wypełnienie typu "image", czyli jest po prostu wypełniona naszym obrazem.

00:49.140Mogę to usunąć wciskając Backspace.

00:51.090Możemy także kopiować i wklejać obrazy ze schowka, na przykład ze strony Pexels, na której znajdziemy masę

00:57.540darmowych, bardzo dobrej jakości zdjęć.

00:59.550Możemy kliknąć prawym przyciskiem myszy i wybrać polecenie kopiuj obraz - "Copy image", a następnie w Figmie

01:05.490po prostu go wkleić z pomocą Cmd+V czy Ctrl+V.

01:09.090Możemy też przenosić pomiędzy różnymi plikami Figmy takie zasoby. To znaczy, że stworzone tutaj kształty,

01:16.110np. wybierzmy narzędzie "Star Tool", a tworząc tą gwiazdkę wciśnijmy i przytrzymajmy Shift, po to, żeby zachować

01:22.950jej proporcje,

01:24.690i jeśli mamy taki obiekt, możemy teraz z pomocą Cmd+C, czy Ctrl+C skopiować go, i gdybyśmy mieli nowy

01:30.570plik, który możemy sobie stworzyć z pomocą polecenia "File > New". Jak widzisz ten plik otwiera się w nowej zakładce.

01:36.990Nie ma on na razie żadnej nazwy, ale mamy plik skopiowany z zakładki poprzedniej.

01:41.610I tutaj możemy z pomocą Cmd+V czy Ctrl+V również taki plik wstawić. Więc pomiędzy zakładkami

01:47.820możemy w Figmie kopiować również te rzeczy, na zasadzie Cmd+C, Cmd+V.

01:52.320Ok.

01:52.630No i teraz przejdźmy jeszcze do plików, czyli wybierzmy opcję 'Back to Files", a następnie zwróć uwagę na to, że w plikach,

01:59.580które tutaj mamy na dole, jest informacja o tym, że możemy po prostu przeciągnąć i upuścić na to puste miejsce

02:05.130jakieś pliki, aby od nich rozpocząć i na ich podstawie stworzyć po prostu nowy plik Figmy.

02:10.650Jest to format plików *.jpg, *.png a także pliki Sketcha.

02:14.580I, co ciekawe, pliki Sketcha, w momencie gdy w natywnym formacie to zaimportujemy, przejdą do Figmy, również zostaną

02:21.690zaimportowane poprawnie warstwy, a nawet wiele efektów - w związku z tym możesz zacząć pracę w Sketchu,

02:27.060a później zaimportować to do Figmy, albo projekt, który ktoś przygotował w Sketchu zamportować i pracować

02:32.130z nim dalej w Figmie.

02:33.930Możesz to zrobić również z pomocą tej malutkiej ikonki importu, i właśnie w ten sposób otworzyć plik

02:38.370Sketcha, czy jakiś dowolny plik graficzny.

02:40.800Tak naprawdę Figma wspiera więcej formatów niż tylko *.jpg i *.png.

02:44.640Są to na przykład *.gif, nawet pliki *.tiff albo *.webp

02:47.940W związku z tym można mnóstwo rzeczy tutaj przeciągać, opuszczać, kopiować czy wklejać.

02:52.800A teraz chciałem pokazać jeszcze, jak działa to z najbardziej popularnymi aplikacjami do grafiki wektorowej

02:58.200czyli z Illustratorem i z Sketchem.

03:02.130Czyli tak mam tutaj otwartego Sketcha, i mam różne ikonki w Sketchu i ze Sketcha, jeżeli chcemy przenieść

03:07.770coś do Figmy, i owórzmy ten nasz projekt, okej, a następnie usuńmy z niego chwilowo tę gwiazdkę. Jeżeli chcemy

03:14.640przenieść swój ze Sketcha do Figmy, to nie robimy tego na zasadzie Ctrl+C, Ctrl+V czy Cmd+C, Cmd+V,

03:19.800a zaznaczamy obiekt w Sketchu, klikamy prawym przyciskiem myszy i wybieramy polecenie "Copy SVG Code"

03:27.030czyli kopiujemy kod SVG.

03:29.220Jest to sposób, który pozwoli nam teraz w Figmie po prostu z pomocą Cmd+V czy Ctrl+V wkleić to

03:36.480jako właśnie taki obiekt ,jako kształt SVG. I w ten sposób możemy wymieniać informacje pomiędzy Figmą

03:44.040a Sketchem.

03:45.150W drugą stronę też to działa. Jeżeli chcemy w drugą stronę z Figmy kopiować coś, czy to do Sketcha, czy Adobe XD,

03:51.450czy Affinity Designera, czy Adobe Illustratora, wystarczy, że klikamy prawym przyciskiem myszy i wybierzemy polecenie

03:57.900"Copy as SVG", i wtedy to, jako ten skopiowany plik SVG, wkleimy z pomocą Ctrl+V czy Cmd+V po prostu

04:05.190do np. Adobe Experience Design. Będzie działać. W związku z tym, w ten sposób możemy tę grafikę przenieść

04:11.980sobie ze Sketcha,

04:13.170I zauważ, że to jest grafika, która posiada wszystkie te warstwy. Jest to oczywiście wektor i mamy wszystkie

04:19.710warstwy przeniesione w poprawny sposób ze Sketcha. Przypominam: prawy przycisk myszy, a następnie polecenie,

04:25.310polecenie "Copy SVG Code", i tutaj Cmd+V, zamiast po prostu Cmd+C, Cmd+V.

04:30.750Natomiast z Illustratora będzie działać po prostu Cmd+C, Cmd+V, czyli jeśli zaznaczymy sobie jakiś obiekt,

04:36.930i wybierzemy Cmd+C, czy Ctrl+C na PC, a następnie w Figmie po prostu wkleimy go z pomocą Cmd+V, czy Ctrl+V,

04:44.820zostanie to wklejone poprawnie.

04:47.230I zauważ, że ten element jest obiektem, który również zawiera... Jest grupą, która również zawiera wektory.

04:55.320W związku z tym z Illustratora do Figmy w taki sposób, Cmd+C, Cmd+V, przenoszone są rzeczy, które w pełni wspierają,

05:01.720w pełni są wektorowe, w związku z tym nie tracimy na jakości tej grafiki.

05:05.710Aha, chciałem pokazać Ci jeszcze jedną rzecz, czyli kopiowanie tekstów z Illustratora. Spróbuję stworzyć warstwę,

05:11.140nową warstwę tekstową w Illustratorze, jakiś zwykły tekst "Lorem Ipsum", jeszcze raz ją zaznaczę.

05:17.950Upewnię się, że tylko ta warstwa jest zaznaczona, Cmd+C i teraz spróbujemy w Figmie Cmd+V, i jak widzisz

05:26.680z Illustratora

05:27.910zostało to skopiowane jako warstwa tekstowa.

05:31.660Jeżeli wejdziemy do środka, mamy tutaj tekst. Możemy edytować go w Figmie. Jak najbardziej to wszystko

05:37.090działa, w związku z tym możemy też teksty przenosić w ten sposób, na zasadzie Cmd+C, Cmd+V.

05:41.980Będą one w pełni edytowalne. Więc w ten sposób możesz importować różne zdjęcia, importować grafiki

05:49.090ze Sketcha, a także grafiki z Illustratora, jak również z innych aplikacji. Pamiętaj, że w drugą stronę też to

05:54.910działa, ale wtedy najczęściej działa polecenie prawy przycisk myszy w Figmie i wybranie polecenia

06:00.220"Copy as SVG".

06:00.670Chciałbym pokazać Ci jeszcze jedną aplikację, z której bardzo często korzystam.

06:05.770Jest to aplikacja IconJar.

06:07.530I ta aplikacja pozwala pracować z ikonami, których zasoby mamy na dysku. Ja w IconJar mam

06:13.090Około 100.000 ikon. Mam 97.000 ikon, które są tutaj w różnych setach, w różny sposób umieszczone i

06:20.680pokatalogowane, i z pomocą IconJara bardzo często pracuje w Illustratorze czy w Sketchu, ponieważ można zwyczajnie

06:27.730złapać za jakąś ikonę IconJar i przenieść ją do Illustratora czy Sketcha.

06:32.620To samo można zrobić w przypadku Figmy z IconJara.

06:36.550Możemy po prostu przeciągnąć i upuścić taką ikonkę.

06:39.880I jak widzisz jest to ikonka w 100% wektorowa, więc mamy tutaj różne wektorowe grupy.

06:44.890To wszystko możemy sobie bezstratnie skalować. Będzie zawsze idealnie ostre, ponieważ jest wektorem

06:50.180czyli jest zaimportowane w odpowiedni sposób.

06:52.360Zatem Figma w bardzo łatwy sposób integruje się z różnymi innymi aplikacjami, jak również z Figmy

06:59.020można zapisywać natywne pliki,

07:00.910co na koniec chciałem Ci pokazać. To znaczy można przejść do opcji File i można eksportować grafiki, o czym

07:07.330sobie później pomówimy, ale można też zapisać plik jako plik.fig

07:12.550po to, abyś mógł taki plik Figmy natywny, z wszystkimi warstwami, wektorami wysłać komuś, albo np. zachować

07:19.660sobie jego kopię na dysku, gdzieś w bezpiecznym miejscu, tak aby miał backup tego pliku. W tej lekcji, dotyczącej

07:25.360importowania i komunikacji z popularnymi aplikacjami, jak Sketch czy Illustrator to wszystko. Jak widzisz

07:31.120możemy bezpiecznie przenosić wektory, a nawet warstwy tekstowe.

07:34.210Na razie żegnam się z Tobą i do usłyszenia w kolejnej lekcji!