Figma: Ostatnie ekrany

00:00.300Zrobić kolejne, i w zasadzie ostatnie już ekrany naszej prostej aplikacji, ale jednocześnie aplikacji,

00:04.680która pozwoliła na cały przegląd narzędziowy, i pewnych fajnych technik pracy w Figmie. W związku z tym zrobiliśmy

00:10.440już naprawdę dużo.

00:11.640Teraz robimy te dwa ekrany. Mimo, że będą to czynności nieco powtarzalne,

00:15.930to jednak chcę zwrócić Twoją uwagę na pewien proces, który pozwoli ci pracować w Figmie wydajniej.

00:20.850Przede wszystkim, cały czas byliśmy w takim trybie projektowania. I to dobrze, że nie przejmowaliśmy się

00:26.190różnymi innymi rzeczami, ale na jakimś etapie, najlepiej po zrobieniu każdej kolejnej planszy, czy ekranu,

00:31.560warto zastanowić się na przykład, jak nazwać konkretne warstwy,

00:35.320jak nazwać konkretne frame'y, i zrobić tutaj porządek, dlatego, że później łatwiej zdecydowanie będzie nam

00:42.240się pracowało z taką strukturą plików.

00:45.000Następna rzecz, no to, jeśli już tworzymy kolejny ekran, duplikujemy na przykład jeden z poprzednich ekranów,

00:50.760i zaczynam usuwać z niego te niepotrzebne rzeczy.

00:53.550Tutaj w zasadzie usunę prawie wszystko poza nagłówkiem. Ale zwróć uwagę, że ten nagłówek jest na tyle dobrze zrobiony,

00:59.230a zrobiłem go w pierwszej planszy, że teraz w zasadzie dowolny napis, który tutaj się znajdzie, np. wpiszę

01:04.920sobie zamiast "Home" - "Open Actions", jest wyświetlany prawidłowo, dlatego, że jest on na całą szerokość i że

01:10.800jest wyśrodkowany. Więc taki jeden drobny kroczek pozwolił mi zrobić, uniknąć dziesiątek kliknięć na każdej

01:18.120kolejnej planszy.

01:19.470Teraz, ponieważ w tym ekranie Akcji - też od razu zmienię nazwę - będzie lista przycisków, z pomocą których będę mógł

01:26.550uruchamiać np. akcję oglądania telewizji, czy akcję słuchania radia, to będę chciał też mieć przycisk

01:33.120"Wstecz", ten z którego korzystaliśmy tutaj wcześniej.

01:35.740I kolejna wskazówka organizacyjna. Jeżeli widzisz, że na wielu planszach zaczyna się pojawiać ten sam

01:40.860element, np. ta sama ikona, to zdecydowanie lepiej jest zrobić z niej komponent - ponieważ w innym przypadku,

01:47.130jeżeli będziesz później, na końcu na przykład, chciał cokolwiek w niej zmienić, będziesz musiał zmienić to na każdej

01:52.110planszy.

01:52.770Jeżeli zrobisz komponent, i mogę usunąć tę drugą ikonkę i skoncentrować się tylko na pierwszej, i zrobić

01:57.930z niej komponent, wybierając tę małą ikonkę "Create Component", to na każdej kolejnej skopiowanej planszy już będziemy

02:03.270mieli instancję tego komponentu. Więc wybieramy Cmd+C w tym miejscu, i na ekran "Home Pulse" wklejamy

02:09.150z pomocą Cmd+V, jak również na ekran akcji wklejamy z pomocą Cmd+V. I teraz, jeżeli cokolwiek zmienisz

02:15.810w tej oryginalnej, w tym oryginalnym komponencie, czyli na przykład zmienisz obramowanie, obrys na kolor,

02:23.010powiedzmy, czerwony, to zauważysz, że zmieni się on w każdej instancji.

02:26.880Natomiast jeżeli chcesz zmienić tylko instancję, tak jak to robimy w tym przypadku to robimy tzw. override'a,

02:32.070czyli właśnie zaznaczamy tylko i wyłącznie instancję, i zmieniamy zarówno strzałkę, jak i obrys

02:39.210na kolor biały, i wtedy już te główne, pozostałe instancje, i ten główny komponent nie zostaje zmieniony.

02:46.200Teraz "Akcje" przesuńmy z Shift'em, żeby zachować linię, do góry.

02:50.400W ten sposób zmieści nam się tutaj więcej przycisków, i spróbujmy zrobić przycisk na wzór tego kształtu,

02:55.920który tutaj mamy. Wybiorę z "Cancel Button" ten "Rectangle 8", a następnie skopiuję go i wkleję go tutaj. Będę chciał zrobić

03:04.170większy, czy dłuższy kształt, w ten sposób, czyli z Alt'em, po to, żeby skalować od razu w lewo i w prawo.

03:11.270Z Alt'em, przytrzymując, przeskakuję go, mniej więcej tak. Wydaje mi się, że mógłby być nawet troszeczkę większy,

03:18.120a następnie usunięty dla niego Stroke, i zrobimy jakieś wypełnienie, np. naszym kolorem akcentu, niebieskim.

03:25.620I teraz w środku wstawimy jakiś tekst.

03:28.050Będzie to przykładowa nazwa akcji, czyli "Watch TV", "Oglądaj telewizję", no i umieśćmy to na środku.

03:35.480Jak to umieścić na środku?

03:36.690Można zrobić to w ten sposób, że powiększamy znów do całej szerokości i wysokości, i ustawiamy to na środku

03:44.850poziomo oraz na środku pionowo.

03:46.560W ten sposób możesz dowolnie długą nazwę tutaj dać, i ona zawsze będzie się jakoś w miarę ładnie mieścić.

03:52.590I myślę, że możemy zmniejszyć trochę font, np. na 22, a następnie będziemy chcieli powielić ten element

03:58.950wielokrotnie. I znów, jeżeli masz taki sam element, który chcesz wielokrotnie powielić, to najlepiej

04:04.110jest zrobić z niego najpierw grupę, czyli robimy Cmd+G na tych dwóch warstwach i będzie to "Action – Button"

04:12.660(przez dwa "t"), a następnie robimy z niego komponent. Tworzymy komponent, i teraz możemy z Alt'em duplikować,

04:23.180z Alt'em i z Shift'em duplikować ten element, i w tym momencie duplikujemy sam komponent, który stworzyliśmy,

04:29.950z resztą, jeżeli zduplikujemy go raz czy dwa, teraz z pomocą Ctrl+D albo Cmd+D możemy powtarzać

04:35.910tę akcję i duplikować go jeszcze kilka razy. Powiększmy cały ten Artboard, czyli kliknijmy na "Akcję", i przedłużmy go,

04:42.960jak również

04:45.330kliknijmy na tło i przedłużmy samo tło.

04:48.620I teraz, ponieważ zrobiliśmy tutaj komponent, jak widzisz, będziemy mogli też w intuicyjny sposób np. zmienić

04:56.430kolor wszystkich tych guzików naraz.

04:58.320Więc to jest bardzo fajna rzecz. Ja teraz cofnę tę operację. I mamy w zasadzie zrobiony kolejny ekran "Akcji".

05:04.400Jedyna rzecz, którą trzeba by było zrobić, to podmienić poszczególne teksty. No i teraz, ponieważ są to wszystko

05:10.910instancje tego symbolu,

05:12.950gdybyśmy zmienili to w tym oryginalnym symbolu, np. wpisali tu coś innego, jak widzisz, zmienia się we wszystkich

05:18.020instancjach. Ale, jako że my będziemy robić override'y do instancji na samych tekstach, to możemy wpisać

05:23.630tutaj np. "Play Video Game",

05:27.560poniżej możemy wpisać "Słuchaj radia" itd.

05:33.170I zawsze będziemy robić override'y, więc nie będziemy modyfikować tego głównego komponentu. Więc w ten

05:38.870sposób warto zorganizować sobie pracę. A ostatni ekran który stworzymy, będzie to ekran konkretnej akcji.

05:44.590Możemy w zasadzie zduplikować sobie ten widok z akcjami,

05:50.030natomiast chciałbym zresetować go do wysokości Apple Watch'a, czyli przejść do właściwości tego Frame'a,

05:57.740a następnie wybrać opcję "Apple Watch 42 mm", i również wyrzucić te wszystkie niepotrzebne "Action Buttony",

06:04.430w zasadzie żaden z nich nie będzie nam teraz przydatny.

06:08.090Zmienimy to na nazwę już konkretnej akcji, czyli np. "Watch TV". I w tej akcji "Oglądanie telewizji" będziemy

06:15.140chcieli umieścić obrazek, a także guzik, który pozwoli zatrzymywać i uruchamiać tę akcję. Czyli przejdźmy

06:21.350może do Pexels.

06:22.640Wpisz w wyszukiwarce "TV", żeby wyszukać zdjęcia z telewizorem, skopiujmy je, wybieram polecenie "Copy Image".

06:29.420Następnie przechodzę do Figmy, i tutaj wklejam z pomocą Ctrl+V.

06:33.980Mógłbym, co prawda, zapisać je na dysku i zrobić jako wypełnienie do jakiegoś gotowego już kształtu, ale

06:39.440mogę to zrobić dokładnie w ten sam sposób, po prostu wklejając, tyle, że będę musiał to zmniejszyć. I zmniejszamy

06:46.110to z Alt'em i z Shift'em. Teraz przesuńmy odpowiednio, tak, aby dopasować to do rozmiaru. Możemy oczywiście zrobić

06:53.630zawsze to troszeczkę większe niż nasza ramka. Ponieważ mamy zrobioną dla Frame'a opcję "Clip", to, tak czy

06:59.840inaczej, będzie ten obrazek przycinany.

07:02.370No i powinniśmy jeszcze skorzystać z przycisku. I znów, jeżeli wiemy, że ten przycisk jest "reużywalny", to

07:09.110zdecydowanie lepiej z tego "Cancel Button" zrobić sobie teraz komponent, i ten komponent możemy skopiować

07:15.440i wkleić tutaj, w to samo miejsce.

07:17.930Jak widzisz, też będziemy trzymać odpowiednie odległości od właściwych fragmentów, a jeżeli będziemy chcieli

07:23.510zmienić, to np. na "Start", to możemy zrobić to override'm, bo to jest właśnie dodatkowy symbol.

07:28.910Czyli teraz możemy też zmienić np. kolory - kolor obramowania, jak również kolor tekstu, na kolor zielony.

07:35.170I to pozwoli nam uruchamiać akcję. Więc chciałbym, żebyś zapamiętał, że w momencie, gdy widzimy wiele elementów,

07:41.840które się powtarzają, warto zatrzymać się na chwilę i zrobić z nich komponenty, Warto odpowiednio nazwać

07:46.790i posegregować warstwy.

07:48.290To samo moglibyśmy zrobić z ikonami.

07:50.270Przecież wszystkie te ikony, które mamy tutaj, moglibyśmy podmienić na komponenty, czyli np. z ikonki z kamerką

07:56.540zrobić komponent na tym ekranie - i już jest gotowe.

07:59.660Teraz go kopiujemy i wklejamy tutaj, na ekran "Home", a następnie wklejamy również na ekran "Main".

08:07.200Najpierw opozbądźmy się tego jego klonu. Wybieram Cmd+V, i teraz jedynie chciałbym dostosować jego

08:14.780wielkość, przecież wielkość instalacji spokojnie możemy też zmienić.

08:17.990Tu mamy 81x81px.

08:21.190Powiedzmy, zostawmy takie rozmiary, 81x81px. Widzisz, zmieniliśmy wyłącznie rozmiar tej instancji, którą umieściliśmy,

08:31.850natomiast to rozwiązanie jest o tyle kuloodporne, że gdybyśmy zmienili zdanie i stwierdzili, że w zasadzie

08:37.580fajnie by było, gdyby tło dla tego elementu było różowe, to możemy zaznaczyć ten główny element, zaznaczyć

08:43.880elipsę, następnie przejść do wypełnienia i zrobić sobie dowolne inne tło, jak widzisz, zmieniło się we

08:49.400wszystkich instancjach tego komponentu.

08:52.610Także takie podejście na pewno pozwoli Ci projektować wydajniej, zwłaszcza jeżeli masz do zaprojektowania

08:57.080wiele ekranów.

08:58.220Tymczasem my skończyliśmy już ten nasz główny projekt, ale to nie wszystko, co chciałabym pokazać Ci z

09:02.930zakresu Figmy - bo jest jeszcze kilka fajnych narzędzi, których na pewno warto użyć, i pokażę Ci je w kolejnych

09:08.330lekcjach.

09:08.900Do usłyszenia!