Figma: Efekty, ekrany otwarcia

00:00.450Witaj w kolejnej lekcji. W poprzednich lekcjach zrobiliśmy już ekran "Camera", a także ekran "Pulse".

00:05.790Teraz chciałbym zaprojektować całą interakcję, która będzie polegała na otwieraniu czy zamykaniu domu.

00:11.440Dlatego, po to, aby się komfortowo pracowało,

00:13.880powielimy sobie frame "Home", ale nie będziemy pracowali z prawej strony, tylko jakby zaczniemy od dołu,

00:20.250I stworzymy tutaj jak gdyby nowy punkt wyjścia dla naszej interakcji. I w ten sposób wszystko ładnie

00:24.630mieści mi się na monitorze, i będę mógł teraz zduplikować ten ekran "Home". Czyli znów, jeśli z tego ekranu

00:30.360użytkownik będzie chciał kliknąć sobie i otworzyć, odblokować dom, przejdzie do następnego ekranu, który

00:35.430teraz zaprojektujemy.

00:37.300I teraz uwaga. Jeśli chodzi o akcję odblokowywania domu, to może taki techniczny niuans, ale w kontekście

00:43.080korzystania z urządzeń mobilnych chciałbym, żeby użytkownik nie wykonał tej akcji przypadkowo.

00:48.030W związku z tym chciałbym stworzyć interakcję, która będzie bardziej świadoma niż zwykłe tapnięcie.

00:54.150W przypadku zegarka, akurat, jeśli mówimy o Apple Watchu, to mamy taką specjalną akcję która nazywa się "Force Touch",

01:01.600i polega ona na mocniejszym przyciśnieniu tarczy zegarka, po to, żeby wykonać jakąś konkretną akcję.

01:07.390I chciałbym, żeby ta kłódka rzeczywiście działała właśnie na "Force Touch".

01:10.890W momencie, gdy zwykłe tąpnięcie zostanie na niej wykonane, pojawi się tutaj jakiś komunikat, który zresztą

01:16.710możemy sobie od razu zaprojektować. I możemy zduplikować np. tę warstwę, i np. wpisać " Use Force Touch to unlock",

01:26.810czyli "użyj Force Touch, aby odblokować, aby otworzyć dom".

01:33.570Zmniejszymy ten font na 18px, zobaczymy czy się zmieści.

01:37.500Może zróbmy z tego 16px. Zróbmy to krojem "Heavy", a następnie zmieńmy kolor na kolor ostrzeżeń w naszej aplikacji.

01:47.440I w momencie, gdy użytkownik tapnie tylko raz na ten element, to wtedy wykonamy jakąś akcję np. wibrację

01:54.210zegarka, i dodatkowo uruchomimy to powiadomienie na dole, które będzie sygnalizowało, że powinien użyć właśnie

02:00.360innej metody interakcji, aby odblokować, żeby przez przypadek nie otworzył sobie domu.

02:05.070W związku z tym możemy to umieścić tutaj. Możemy tę warstwę ukryć i odkryć, w zależności od potrzeb, w momencie, gdy ktoś

02:11.040użyje "Force Touch", to wtedy wykonamy taką charakterystyczną akcję, która będzie polegała na przyciemnieniu całego

02:16.530tego ekranu i na wyświetleniu dodatkowych opcji dotyczących otwierania domu. I zrobię tutaj pewną sztuczkę,

02:22.610tzn. zaznaczę wszystkie warstwy.

02:24.850W zasadzie, jak widzisz, teraz wszystko to, co jest w obrębie tego frame'a "Home" zostało zaznaczone, a następnie wybiorę

02:31.230Cmd+G, czy Ctrl+G, aby zrobić z tego jedną grupę. I teraz na całą tę grupę wrzucę sobie

02:37.310Efekt.

02:37.830Możemy dodać w Figmie efekty, które polegają np. na rzuceniu cienia, mamy cień zewnętrzny, cień wewnętrzny

02:44.460mamy też "Layer Blur" i "Background Blur".

02:47.320Czyli mamy możliwość rozmycia całej warstwy czy grupy, albo rozmycia tła, które znajduje się na warstwie.

02:52.950Wybierzmy "Layer Blur".

02:54.170I to powinno zadziałać na całą naszą grupę, jak widzisz - a my możemy zmienić teraz natężenie tego efektu

02:59.370na przykład na 20px.

03:01.670No, może to jest za mocno.

03:02.760Może zróbmy 10px.

03:03.960Jak widzisz, teraz mamy mocno rozmyte wszystkie elementy w tle, a ja dodatkowo wybiorę 2, aby powiększyć

03:09.660sobie widok. I jeszcze stworzę tutaj z pomocą R - Rectangle prostokąt, który będzie dodatkowo przykrywał mi to

03:16.230całe tło, i który je odpowiednio przyciemni. Będę chciał użyć – zamiast obramowania – wypełnienia koloru granatowego

03:23.830i zmienić jego krycie na około 80% czy 70%. Więc mamy pod spodem rozmyte tło, wybieram 0, rozmyte

03:31.710tło i jeszcze dodatkowo fajnie przyciemnione

03:34.200po wykonaniu tej opcji "Force Touch". I to, co tutaj się znajdzie, to będą różne opcje do wykonania, do odblokowania

03:40.860naszego domu. Będziemy mieli kilka trybów.

03:43.260Na razie wyjdę z widoku "Full screen", po to, abym mógł równolegle z aplikacją Chrome otworzyć sobie IconJara, z

03:50.160którego skorzystam z ikonek. Nie będziemy tu już rysować swoich własnych ikonek, tylko pierwszą ikonkę

03:55.320którą zrobimy, to będzie ikonka "Unlock", i mogę skorzystać z którejś z ikonek kłódki, np. z tej.

04:01.590Wrzucam ją do Figmy i po prostu upuszczam. To działa.

04:05.700Drugą ikonkę którą weźmiemy, to będzie ikonka "Delivery", i będzie to możliwość odblokowania naszego domu dla

04:12.330kuriera, czyli np. otwarcia tylko bramy i możliwości zostawienia czegoś w jakiejś skrytce.

04:17.880Więc wybierzemy np. tego gościa na skuterku, który coś dostarcza.

04:21.540I jeszcze jedna akcja, którą będzie można podjąć.

04:24.720To jest otwarcie samego garażu. Więc wybiorę ikonkę z garażem, przeniosę ją tutaj, upuszczę, i tak właśnie,

04:31.380bardzo łatwo, z pomocą IconJara możemy przenosić tutaj różne ikony.

04:36.360Zauważ, że teraz te ikony znajdują się tutaj w konkretnych grupach, i mamy jakieś różne rzeczy tutaj w

04:41.400środku, również wektory.

04:42.900Tak naprawdę nie trzeba się w ogóle tym przejmować bo wystarczy zaznaczyć te wszystkie grupy i już bezpośrednio

04:48.270na tych grupach na wszystkich naraz możemy operować.

04:50.460Więc jak widzisz możemy zmienić ich kolor na kolor biały.

04:53.610Możemy także przejść do narzędzia które pozwoli nam skalować, czyli narzędzia "Scale Tool", a następnie powiększyć

05:01.540te ikonki. I chciałbym zrobić tutaj jakiś taki większy rozmiar.

05:05.590Myślę że referencyjnie

05:07.420spójrzmy na tę ikonę, i to będzie OK.

05:09.490Teraz musimy je oczywiście przenieść w odpowiednie miejsce, czyli zrobimy np. "Delivery" i "Garage" tutaj,

05:17.240a tę ikonkę z "otwieraniem" zrobimy na górze. W zasadzie potrzebowałbym jeszcze zrobić jedną ikonę, która

05:23.410pozwoli mi zamknąć ten widok "Force Touch", czyli wyjść i anulować tę akcję. Więc zrobię ją z pomocą owala -

05:31.170zrobimy sobie tutaj takie kółeczko i to kółeczko będzie wypełnione

05:36.400może takim właśnie jakimś szarym kolorem. Zrobimy dla niego też obramowanie,

05:40.900czemu nie, możemy nawet zrobić trochę grubsze obramowanie "Outside", i zmienić jego krycie,

05:46.520tak, jak to robiliśmy dla tych poprzednich elementów. Trochę zmniejszę całą tę kuleczkę, umieszczę ją na środku,

05:53.260a następnie zrobię z pomocą linii - wybieram L jak Line Tool - jedną linię,

05:58.450w ten sposób. Jeżeli wcisnę Shift, to zachowam kąt 45, czy, jak w tym przypadku, akurat -45 stopni.

06:05.830Upewnię się, że mam grubość, może wybierzmy 2px, a następnie wybiorę

06:10.750Cmd... może przybliżę się, żeby pokazać Ci dokładnie, jak to wygląda z pomocą 2 tutaj,

06:15.400Kliknę sobie na tym, Cmd+D, duplikuję, i znów robię to, co poprzednio. Prawy przycisk myszy i wybieram

06:20.980polecenie "Flip Horizontal", czyli obracam to w poziomie. Mogę dwa te elementy zaznaczyć. Zobaczę, czy mi się

06:27.880tu uda zrobić zaokrąglone narożniki...

06:29.970Akurat w tym przypadku nie, ale to nic nie szkodzi. Tak naprawdę wygląda to całkiem nieźle w tym momencie

06:35.320już. I może przejdźmy do 0, aby zobaczyć, jak prezentuje się to powiększenie.

06:40.770Połączymy te dwa "X".

06:43.300Myślę, że można by było zostawić to dokładnie w takiej formie,

06:47.050natomiast te pozostałe ikonki wymagałyby dorobienia do nich jakichś opisów.

06:52.180W związku z tym przysuńmy tutaj kłódkę na górę i wpiszmy "Unlock". Może skorzystam z tych gotowych pól tekstowych, które

07:00.790mam tutaj. Z Cmd zaznaczam, kopiuję - Cmd+C, Cmd+V czy Ctrl+C, Ctrl+V, wklejam - i robimy tutaj

07:08.000"Unlock", czyli możliwość odblokowania domu.

07:11.350Może umieśćmy to na środku.

07:14.210Następnie z Altem kopiujemy w to miejsce i zrobimy tutaj opcję otwarcia dla dostawcy.

07:22.890I z Altem znów kopiujemy pod tą kolejną ikonkę i - możliwość otwarcia garażu.

07:29.830Teraz wystarczyłoby jeszcze optycznie dobrze dostosować położenie tych elementów, czyli np. umieścić

07:37.150te elementy tutaj i kłódeczkę "Unlock" może delikatnie niżej.

07:41.120A sam podpis będę musiał umieścić trochę wyżej, podobnie jak przy innych ikonach i tę ikonkę wyjścia

07:47.640trochę niżej na dole.

07:48.820Myślę że jest w porządku. Więc to jest akcja "Force Touch", która pozwoli nam otworzyć dom.

07:53.470Natomiast, gdy już dom będzie otwarty i wybierzemy opcję "Unlock", to możemy znów zduplikować sobie "Home" i przystąpić

07:59.800do stworzenia jeszcze jednego ekranu.

08:01.840Chciałbym teraz usunąć znów niepotrzebne elementy. W zasadzie chyba tę część też usunę, zaraz wstawię zamiast

08:08.770niej jakiś inny komunikat.

08:10.930To, co napiszemy tutaj, to będzie że "dom jest otwarty" na przykład, zostawimy może adres, jest w porządku.

08:19.540A następnie usuniemy te ikony...

08:22.180Może zrobimy tak: Chciałbym zrobić z tego teraz cztery ikonki. Może zostawię tę ikonę, ikonkę zamknięcia

08:28.600zostawimy, ponieważ jest nam potrzebna,

08:30.770tylko chciałbym ją zeskalować, i zrobię to z pomocą skalowania ze "Scale Tool-em",

08:35.000ponieważ w ten sam sposób przeskalowałem tamte ikony, więc warto tutaj się trzymać już jednego schematu. I zobaczmy.

08:43.49057x57, te mają 63x62 - nie są idealnym kwadratem. W związku z tym

08:50.080może zróbmy to z pomocą pól, które tutaj są - width i height.

08:53.440Zróbmy 60x60

08:55.240na razie. I to samo zrobimy z tą ikonką, 60x60.

09:02.380Chcemy, żeby wszystkie były idealnie tego samego rozmiaru - 60x60

09:06.400również tutaj. Super, i to jest, powiedzmy, jakiś punkt wyjścia. Będziemy mogli później je modyfikować, zmniejszać,

09:11.770powiększać,

09:12.260ale ważne, żeby wyjściowo wszystkie były równe. Teraz zduplikuję dowolną z ikon, czyli Cmd+D np. na ikonce

09:18.990"Pulse", i będę chciał stworzyć tutaj inną ikonę, która będzie miała, weźmy to, różowe tło akcentu. Usuniemy tu

09:26.530ze środka

09:27.410ten kształt wektorowy, i wstawimy tutaj z IconJara jeszcze jedną ikonkę. Wpiszę "Flash", ponieważ jest to ikonka

09:34.840z takim właśnie zygzakiem, i przeniosę ją w to miejsce.

09:38.770Teraz mogę upuścić,

09:40.150następnie zmieniam jej kolor na kolor biały, zmieniam grubość obramowania na 2px, a następnie skaluję za

09:46.780pomocą narzędzia K, i skaluję właśnie mniej więcej do tego rozmiaru. Chrome'a mogę już powiększyć na całe

09:52.720okno, będę miał więcej przestrzeni ekranu.

09:55.180Mam nadzieję, że te akcje które wykonuję, one nie są dla Ciebie za szybko.

09:59.080Myślę, że możesz zawsze przewinąć, zobaczyć to jeszcze raz,

10:02.890a też nie chciałem, żeby ten kurs był prowadzony w zbyt wolnym tempie. Więc jeżeli coś chcesz zobaczyć

10:07.990jeszcze raz, to masz na dole wyświetlane skróty klawiaturowe, możesz cofnąć, a wydaje mi się, że ciągle to są

10:13.690już operacje w jakimś stopniu powtarzalne, więc warto, żebyś po prostu sam przećwiczył i potrenował te skróty,

10:19.690których Cię uczę.

10:20.530Teraz jeszcze zauważyłem, że przy tym skalowaniu ikonka z kłódką została zeskalowana,

10:26.590jeśli chodzi o grubość obramowania, na 1,3px. Ja chciałbym powrócić do 2px, i teraz wszystkie

10:32.620te ikony wyglądają spójnie.

10:34.630Teraz chciałbym zaznaczyć sobie... A, teraz tą ikonkę "Flash'a"

10:37.990może jeszcze wrzucimy do tej grupy, która znajduje się w "Pulse", "Pulse" zmienimy "Flash", i wrzucę tutaj tę ikonę,

10:47.330tak, żeby to było bardziej intuicyjne i żebym mógł złapać za jedną rzecz i na przykład przesunąć te ikonki

10:53.500w to miejsce.

10:54.690I ostatnia rzecz, którą zrobię, będzie to zrobienie tutaj małego okienka notyfikacji - po otwarciu domu

11:00.310będziemy mogli mieć jakieś powiadomienia, informacje np. o spadku energii, albo o jakichś problemach z

11:05.200alarmem itd.

11:06.010I to wszystko będzie się pojawiać tutaj z odpowiednim kolorem notyfikacji. Mogę zaznaczyć jakiś kawałek

11:12.580tekstu z powiadomienia, które mamy na ekranie powyżej, a następnie wybrać R czyli "Rectangle Tool", i zrobić następną

11:19.360przestrzeń na powiadomienia. Wyłączę obramowanie i włączę zielone wypełnienie - zielone

11:24.850dlatego, że ta informacja akurat będzie informowała, że wszystko jest OK, że wszystkie systemy działają

11:30.430sprawnie.

11:31.300Wybieram teraz Cmd+V, chciałbym wkleić kawałek tego tekstu. i wpiszmy tutaj po prostu, że wszystko

11:40.090jest w jak najlepszym porządku.

11:42.010Żeby to wyśrodkować dobrze w kontekście ramki tekstowej, możemy zrobić ramkę tekstową identyczną w rozmiarach

11:48.280jak sam prostokąt, który jest pod spodem, a następnie wyrównać ją zarówno w poziomie jak i w pionie.

11:56.040To teraz zostały nam jeszcze do zmiany te ikonki, które możemy wyrównać względem siebie, a następnie

12:02.200możemy wszystkie je zaznaczyć, zamknąć w jedną grupę i wyrównać względem całego Frame'a, wybierając tę

12:08.590opcję, ale chciałbym je powiększyć. Więc wybieram K na klawiaturze, żeby skalować proporcjonalnie skaluję

12:14.200z Altem i z Shiftem, żeby te proporcje zachować,

12:16.910i dodatkowo mogę docisnąć Spację, aby przesunąć to jeszcze do góry, żeby zobaczyć jaka skala mi się

12:22.720tutaj ładnie mieści i jest wygodna do tapnięcia.

12:25.210Myślę, że w ten sposób jest OK, i na tym możemy zakończyć tę lekcję.

12:29.920Udało nam się przerobić parę fajnych skrótów. Wiemy już, jak działają efekty.

12:33.970Pokazałem Ci także kilka opcji duplikowania i wyrównania elementów, a także stworzyliśmy dwa dodatkowe ekrany.

12:40.390Do usłyszenia już za chwilę!