Figma: Podgląd na urządzeniu

00:00.480Witaj w kolejnej lekcji. Teraz chciałbym pokazać Ci, jak proste jest podglądanie i praca z twoim projektem

00:05.250na rzeczywistym urządzeniu, czyli np. na iPhonie czy iPadzie.

00:09.330Z pomocą aplikacji Figma Mirror, którą możesz za darmo pobrać z AppStore'a, dla Androida również jest aplikacja

00:15.720Figma Mirror.

00:16.540Też możesz ją pobrać za darmo dla tego systemu operacyjnego i również na urządzeniach z Androidem podglądać

00:22.590swoje projekty.

00:23.420Także to jest naprawdę świetny sposób na skonfrontowanie tego, co tworzysz, z tym, jak będzie wyglądało to

00:29.820na docelowym urządzeniu.

00:31.530I zdecydowanie polecam projektowanie w taki sposób. Po to aby podejrzeć coś w Figmie,

00:36.600wystarczy że jesteś połączony z tą samą siecią Wi-Fi na komputerze na którym tworzysz i na swoim telefonie,

00:43.260po to żeby ewentualnie działało to lepiej warto,

00:46.080i, lub gdybyś miał jakieś problemy, warto podłączyć telefon czy tablet po kabelku do tego komputera

00:51.270wtedy już na pewno wszystko będzie w porządku.

00:53.700Mamy tę aplikację Figma Mirror, którą teraz na telefonie mogę uruchomić i aplikacja Figma Mirror uruchamia się

00:59.700z informacją, żebym zaznaczył sobie jakąś ramkę, czy komponent, po to żeby móc podejrzeć go na telefonie.

01:07.320Więc przechodzimy do aplikacji Figma, wejdę sobie do pliku, który wcześniej tworzyliśmy, czyli tego naszego pliku

01:13.050dla iPhone'a 7 i teraz klikam po prostu na frame,

01:17.190czekam, aż zostanie on załadowany.

01:18.560Jak widzisz mam bezpośrednio teraz już podgląd na telefonie i co więcej wszystkie rzeczy, które będę

01:24.120tutaj robił będą na bieżąco widoczne na telefonie, czyli, jak widzisz, w czasie rzeczywistym jest to wszystko

01:31.110dopisywane.

01:31.800Mogę spróbować zmienić kolory - zmienimy kolory na poprzednie, zrobimy tutaj żółte tło i tutaj również

01:38.400np. zrobimy kolor różowy.

01:40.050Zauważ, że "instant" na telefonie mamy podgląd tych wszystkich zmian, które wykonaliśmy. W związku z tym

01:47.220jak widzisz możemy to bardzo szybko i łatwo weryfikować np. czy fonty są odpowiedniej wielkości, czy odpowiednio,

01:54.270odpowiedni white-space, czyli odległość między poszczególnymi elementami zachowaliśmy, tak, że wizualnie wygląda

01:59.570to spójnie.

02:00.450Tak jak wspomniałem Figma pozwala też na podglądanie komponentów.

02:04.080My tutaj nie mamy żadnego komponentu, ale jeżeli np. tę dolną grupę z zakładkami, zrobimy sobie z niej komponent,

02:09.930czyli wybieramy polecenie "Create Component", to będziemy mogli też podglądać osobno te komponenty.

02:16.050Możemy nawet wyrzucić taki komponent poza nasz frame i teraz kliknąć na nim,

02:20.490jak widzisz, mamy podgląd samego tego komponentu. Jednak zwykle, prawdopodobnie, będziesz korzystał z tej

02:26.850aplikacji w taki sposób, żeby podglądać sobie cały frame.

02:30.300Jeżeli będziesz miał więcej frame'ów, możesz też po nich sobie przechodzić.

02:33.840Jeśli na przykład zduplikowalibyśmy ten frame, czyli mamy teraz dwa frame'y, możemy przechodzić pomiędzy

02:40.710poszczególnymi frame'ami, po prostu klikając na ich nagłówki.

02:43.950Także to wszystko co chciałem pokazać Ci w kontekście podglądu projektu na telefonie czy tablecie.

02:50.490Zdecydowanie polecam to robić.

02:52.140Na razie jeszcze aplikacja Figma Mirror nie działa na Apple Watch'a.

02:55.500Szkoda, bo byśmy mogli sobie potestować nasz projekt, ale myślę, że w przyszłości się to zmieni, także polecam

03:00.480ściągnąć sobie tą appkę i potestować.

03:02.700Dziękuję za uwagę w tej lekcji i do usłyszenia już za chwilę!