Figma: Gotowe komponenty Sketch

00:00.260Witaj w kolejnej lekcji, w której chciałbym pokazać Ci, jaki jest potencjał gotowych szablonów, które mamy

00:04.500w Figmie, albo możemy je do niej importować.

00:06.810Przeszedłem do sekcji "Drafts", czyli szkice na moim koncie, ponieważ znajduje się tutaj na każdym koncie

00:13.300taki plik Google Material Design, który jest szablonem.

00:16.970Jeśli pracujesz z plikami Material Design, to będziesz mógł skorzystać z niego. Wszystkie elementy, które

00:23.070tutaj są zawarte - są elementy wektorowe, jak widzisz, są to gotowe formularze, gotowe elementy, takie jak

00:28.860listy checkboxy, radio buttony, kalendarze, które możesz wykorzystać i które są zgodne ze stylistyką

00:36.390Material Design, mamy też sekcje typografia, z pomocą której możemy podejrzeć, jakie fonty są tutaj dostępne, sekcje

00:41.960z ikonografią, nawet dobrze zrobionego grida.

00:44.430W związku z tym wszystko to możesz wykorzystać w swoich projektach Figmy.

00:47.880Przypominam, że pomiędzy różnymi zakładkami w przeglądarce działa w Figmie kopiowanie na zasadzie Ctrl+C,

00:52.890Ctrl+V, i możesz po prostu zaznaczyć sobie dowolny element,

00:56.430najlepiej zrobić to z Cmd albo z Ctrl - czyli z Cmd, czy z Ctrl

01:00.690klikamy na jakimś konkretnym elemencie np. na tym kafelku i teraz orientujemy się na warstwach,

01:06.420jeżeli chcemy np. cały ten element, "Road trips", to możemy kliknąć na całą tę grupę,

01:11.820następnie Cmd+C, Ctrl+C, skopiować ją i wkleić do naszego dokumentu.

01:16.770Jeśli chodzi o Material Design, jest on tutaj dobrze opracowany, natomiast w Figmie nie ma ważnego pliku.

01:23.130Przy projektowaniu dla iOS, i często mamy do czynienia z takimi projektami.

01:27.060I tutaj przychodzi nam z pomocą właśnie Sketch, ponieważ Sketch jest aplikacją, która ma taki tryb tworzenia

01:35.850nowych dokumentów z szablonów, i możemy tutaj zrobić sobie szablon w oparciu o iOS UI Design.

01:42.990W związku z czym dostaniemy szablon, który jest właśnie przygotowany specjalnie pod te natywne funkcje, kontrolki,

01:50.760modale i różne inne rzeczy, które znamy z systemu iOS. Jeżeli chcemy projektować np. aplikację na iPhone'a,

01:56.910jest to naprawdę dobry pomysł.

01:58.830Teraz w Sketchu zapiszę sobie ten plik, wybieram "iOS" jako nazwę tego pliku.

02:04.290Teraz mogę już przejść do Figmy, i w Figmie znajduje się mały przycisk importu, który jest w lewym górnym

02:08.820rogu, wybieram polecenie "import pliku". a następnie przechodzę do odpowiedniego katalogu i wybieram plik,

02:14.730który zapisałem, czyli plik "iOS". W tym momencie zobaczysz, jak wygląda importowane plików ze Sketcha

02:20.700do Figmy.

02:21.780I co ciekawe, te pliki są importowane w konkretnej strukturze, ale też są kopiowane z zachowaniem takich

02:28.830elementów, jak symbole. Powiem Ci o nich jeszcze trochę więcej.

02:32.520Natomiast, jeżeli pracowałeś w Sketchu z symbolami, to one przechodzą tu jako komponenty i będą także działać.

02:38.650I teraz, jeśli wybiorę ten plik iOS Components, a następnie otworzę go, dwukrotnie klikając - ten plik

02:44.490dość szybko się otwiera, jak widzisz. Możemy tutaj zzoomować się na którymś elemencie, wybierając 2.

02:49.350Mamy warstwy i są to elementy wektorowe, w związku z tym możemy z powodzeniem używać ich w swoich projektach

02:55.200w Figmie.

02:55.920Dodatkowo, nawet wszystkie te warstwy tekstowe, są to warstwy z tekstem - warstwy które przeszły tutaj

03:01.530jako edycyjne.

03:02.760W związku z tym możemy spokojnie tych warstw używać na potrzeby naszych kolejnych projektów.

03:07.630I to jest w skrócie to, jak możemy do Figmy dodawać nowe szablony. Bardzo często przy projektowaniu będziemy

03:13.140starali się oszczędzić czas i zacząć już od czegoś gotowego, czyli nie zaczynać od pustego frame'a, a jednak

03:18.420wykorzystać jakieś, czy to elementy interfejsowe,

03:21.030czy to jakiś specjalny tzw. " UI Kit", czyli zestaw już gotowych guzików, gotowych jakichś kafelków itd.,

03:28.820żeby złożyć z tego w całość naszą aplikację i, o ile do Figmy tych zasobów nie ma zbyt dużo, np. na stronie

03:35.480Freebies, do Figmy są tylko dwa zasoby, mamy tutaj jakiś prosty UI Kit, czyli właśnie, jak widzisz, różne fonty,

03:43.530akapity, zrobione przyciski, dropdowny i tak dalej - od tego możemy zacząć, to będziemy mogli sobie zaimportować

03:49.110i na tym budować naszą aplikację, ale tych zasobów właśnie nie ma zbyt dużo. Natomiast do Sketcha jest już ich tutaj zdecydowanie

03:55.290więcej, np. 90, z czego mamy sporo jakichś fajnych UI Kitów, czy mockupów, które na ogół są darmowe i od

04:02.220których możemy zacząć pracę.

04:04.290W związku z tym, dlaczego by nie skorzystać z tych rzeczy

04:07.420do Sketcha? Ponieważ możesz spokojnie te pliki Sketcha, nawet nie posiadając Sketcha, możesz je stąd pobrać w formacie

04:13.080*.sketch, i po prostu zaimportować do Figmy i pracować z nimi w Figmie.

04:17.220Ja polecam Ci bardzo fajną stronę, która nazywa się "Sketch Apps Sources". Wszystkie linki znajdziesz w

04:22.830katalogu z plikami źródłowymi do kursu.

04:24.870Natomiast tutaj, "Sketch App Sources", jest naprawdę masa zasobów, około trzech tysięcy różnych zasobów, z czego

04:30.480mamy około 180 "UI Kit'ów", które są dla nas dostępne, gotowe, i możemy po prostu z nich skorzystać, zaimportować

04:38.760do Figmy ten plik, który sobie ściągniemy dla Sketch'a, i pracować z nim w tej aplikacji. Także polecam Ci sprawdzenie

04:46.110strony "Sketch App Sources", i ewentualnie jakichś innych stron z zasobami, przygotowanie sobie tych zasobów, wciągnięcie

04:52.170najważniejszych plików czy elementów interfejsu, czy to iOS'a, czy jakiegoś innego systemu do Figmy, a następnie pracę

05:00.200z tymi gotowymi komponentami. To wszystko w tej lekcji.

05:02.880Do usłyszenia!