Figma: Maski, trzeci ekran

00:00.360Witaj w kolejnej lekcji.

00:01.440Mamy już zrobiony ekran kamery, do którego możemy przenieść się tutaj i wybrać jakąś kamerę, a także sterować

00:06.180czasem odtwarzania z kamery.

00:07.860Chciałbym też na zegarku mieć możliwość przejścia do funkcji, którą nazwałem "Pulse".

00:12.600"Pulse" to funkcja, która pozwoli nam podejrzeć, jacy domownicy są obecni w domu, lub zobaczyć akcje, które

00:19.080podejmowane są w domu w zależności właśnie od tego, czy np. ktoś się do niego zbliża.

00:23.040Jeżeli wybierzemy Cmd+D na tym frame'ie "Camera", aby publikować, to teraz możemy stąd wyrzucić niepotrzebne

00:30.300elementy. Czyli usuwamy m.in. te godziny i chciałbym zostawić tło, czyli tę sekcję "BG".

00:36.930Ale jednak chciałbym je znacząco zmniejszyć, i chciałbym też wstawić coś, co mam skopiowane w schowku.

00:42.780Jest to po prostu screen z mapą. Czyli umieścimy sobie mapę w odpowiednim miejscu.

00:48.270Ta mapa jest w grupie, ja ją nazwę od razu odpowiednio, czyli "Map" i umieszczę ją pod tłem,

00:53.610w ten sposób. A następnie jeszcze możemy dostosować jej położenie. I na tej mapie zrobimy sobie jeden owal,

01:01.890który będzie oznaczał miejsce, gdzie znajduje się nasz dom. Czyli zrobimy sobie jedno kółeczko, włączymy do

01:07.260niego Stroke. Włączymy wypełnienie, może tym kolorem ciemnym, a następnie wstawimy jeszcze do niego kawałek

01:13.320tekstu. Czyli wciskam T, jeden raz klikam, wpisuję "H" jak dom.

01:18.030Będzie to "Avenir Heavy", albo nawet "Black". Wybierzmy najgrubszy wariant tego fonta i wybierzmy kolor biały.

01:25.590To będzie ikonka oznaczająca nasz dom.

01:28.380Natomiast wokół będziemy mieli ikonki domowników. I żeby stworzyć te ikonki domowników, to ja przygotowałem

01:34.080sobie takiego avatara w Sketchu, którego chciałbym teraz tutaj przenieść do Figmy. Więc przypominam

01:40.870Ci, jak to robić. Wybieramy tam "Copy SVG Code", i teraz możemy po prostu go wkleić. Upewnię się, że przerzucam

01:47.520go do odpowiedniej grupy, Nie do grupy... Aha, tutaj mamy

01:50.900"Camera", to może też zmienię na "Home Pulse". I tutaj nazwę też zmienimy. Usunę tę ikonkę, która jest niepotrzebna,

02:00.180bo z poziomu tego elementu nie będziemy nic wybierać.

02:04.650Natomiast tutaj wpiszemy "Home Pluse", i zostawimy guzik "Wstecz", który pozwoli nam wrócić do poprzedniego

02:12.120ekranu. Super.

02:13.080To teraz mamy prawie gotowego avatara, i na przykładzie tego avatara chciałbym pokazać Ci funkcję Figmy,

02:18.510która polega na maskowaniu. Ponieważ chciałbym tego avatara wpisać też w oczko, podobne jak mamy tutaj.

02:24.600W związku z tym, to, co robię, to tworzę sobie owal, wybieram O, i robimy właśnie, mniej więcej takiego avatara

02:31.110chcemy zrobić. Wyłączę obramowanie, włączę wypełnienie, upewnię się, że ta elipsa, w zasadzie nie ma to w tym

02:37.890momencie aż takiego znaczenia, ale nazwijmy tę ikonkę "Avatar", elipsę umieśćmy pod spodem i nazwę ją "Maska",

02:46.200czyli wpiszę po prostu "Mask".

02:47.940Nie ma to znaczenia, tylko jest dla mnie bardziej intuicyjne, bo teraz mogę zaznaczyć te dwie warstwy

02:53.520i znajduje się tutaj taka mała ikonka "Use as Mask".

02:56.490W ten sposób, jeżeli wybierzemy teraz, mając zaznaczone te warstwy opcje "Use as Mask", będziemy mieli kształtem,

03:03.150który jest na dole wymaskowaną całą grupę, albo warstwę, która znajduje się powyżej.

03:07.500Zauważ, że znalazła się tutaj teraz tzw. maskowana grupa. Mamy "Mask group", i w ramach tej grupy mamy "Avatar"

03:14.610i "Mask".

03:15.100I ta mała linia sygnalizuje, że ten avatar jest właśnie wycinany poprzez tę maskę. To znaczy, że gdyby

03:21.420Avatar był większy, on dalej będzie zawsze i wyłącznie widoczny w obrębie tego kształtu. Kształt możemy

03:28.320również sobie modyfikować, możemy go przesuwać, dostosowywać jego wielkość i na tej zasadzie zrobić sobie

03:34.170avatara.

03:35.000No i właśnie na tej zasadzie, podobnie jak w innych narzędziach graficznych działają maski w Figmie.

03:38.850Gdybyśmy chcieli dodać do tego Avatara jeszcze ewentualnie jakieś tło, to możemy rozwinąć sobie zawsze

03:42.840grupę "Avatar", i tutaj możemy dodać np. jakiś kształt. Wybierzmy Rectangle.

03:49.050To już nie jest istotne, jak duży będzie ten kształt,

03:51.900tylko ważne, żeby miał wypełnienie. I zróbmy np. wypełnienie białym kolorem, a następnie umieśćmy to pod

03:57.300samą ikoną, ale dalej w obrębie tej grupy "Avatar", która jest maskowana.

04:01.330I w ten sposób mamy zrobione fajne tło. Teraz możemy całą tę "Mask group" np. zmniejszyć i umieścić ją

04:08.850w jakimś miejscu, np. tutaj. To teraz możemy jeszcze tego avatara podpisać, czyli zróbmy tutaj ramkę tekstową.

04:14.850Powiedzmy, że to jest na przykład "Alicja", zmniejszmy ten font do około 14px.

04:20.220Może być to wariant "Heavy", i myślę, że całkiem nieźle tutaj wygląda.

04:23.910Następnie zróbmy treść notyfikacji, czyli zróbmy ramkę tekstową, narzędziem tekstu - T, która będzie zawierała

04:30.120biały tekst. Rozmiar zrobimy np. 20px i wybierzmy font "Medium", a następnie wpiszmy, wyśrodkujmy tę ramkę,

04:39.570a następnie wpiszmy:

04:40.530"Alicja zbliża się do domu".

04:46.620I zróbmy jakąś akcję, którą wykona nasz dom, czyli np. "Opening"... Otwieramy garaż za np. 25 sekund. I takie,

05:00.670taką akcję na zasadzie tego inteligentnego naszego "pulsu" będzie można ewentualnie odwołać.

05:05.910Spróbujmy zrobić sobie jakiś przycisk, który... Zresztą tutaj przydałoby nam się pokazanie tego "Layout Grid'a",

05:12.450czyli włączmy tego "Layout Grid'a", OK, i zróbmy przycisk, który będzie wpisany w tego "Layout Grid'a", czyli wybieram

05:19.140R - Rectangle,

05:20.580następnie tworzę sobie przycisk, na przykład tej wielkości.

05:23.760Teraz wybieram dla niego wypełnienie.

05:26.190Na razie wypełnijmy go solidem, białym kolorem. Będę chciał zaokrąglić narożniki tego elementu.

05:31.470Wybierzmy np. 5px.

05:33.200To jest trochę za mało.

05:34.500To może wybierzmy takie całkowite zaokrąglenie, 35px jest akurat w porządku. I w zasadzie, zamiast wypełnienia

05:42.030może damy mu samego Stroke'a. Więc Stroke będzie biały i będzie miał np. 3pt. A my tutaj wpiszemy w środku,

05:51.110skopiowałem sobie, zduplikowałem ten tekst z Altem, i wpiszemy np. opcję "Cancel", którą będziemy mogli wykonać, czyli

05:57.840anulować tę akcję.

06:01.020W ten sposób. Zmniejszmy sobie tę ramkę tekstową, dopasujmy ją do tego grida, tak, żeby to zawsze znalazło się

06:07.530na środku, i możemy ten tekst zamiast "Medium" zrobić fontem "Heavy",

06:12.300a następnie zmienić jego kolor na kolor ostrzeżeń naszej aplikacji. I tak samo zrobimy Stroke, czyli obramowanie

06:19.170tego przycisku. OK.

06:21.030Wygląda to całkiem dobrze.

06:22.290Teraz jeszcze kliknijmy na tę kolumnę, ukryjmy sobie kolumny i trochę dostosujmy to optycznie, czyli powiększę może

06:28.950tę przestrzeń.

06:30.060Następnie przesunę... Jeżeli masz problem z trafieniem w różne elementy i przesuwaniem, np. cały czas

06:34.860przesuwasz tło, to pamiętaj o tym, że w Figmie możesz najechać nad jakąś warstwę i pojawią się tutaj dwie ikonki.

06:40.470Pierwsza to ikonka z oczkiem, czyli możliwość włączenia i wyłączenia widoczności. W ten sposób łatwo sprawdzić

06:45.720np. która to jest warstwa, i co na niej jest. A drugi to kłódka.

06:48.920Jeżeli zaznaczyć kłódkę, już nie będziesz,

06:51.510nie będzie tak łatwo się pomylić. Nie będziesz mógł trafić w to tło i go przesuwać, czyli łatwiej będzie

06:55.890zaznaczyć np. ten guzik, który tu mamy. Zresztą guzik -

06:58.950warto stworzyć z niego grupę, i napisać, że to jest "Cancel Button" na przykład.

07:06.810I kolejno "Cancel Button" też przesuniemy troszeczkę wyżej, aby było wygodniej w niego tapnąć.

07:11.580I kolejny ekran mamy gotowy.

07:13.530Mam nadzieję, że nauczyłeś się kilku pożytecznych rzeczy. M.in. zapamiętaj proszę, jak pracuje się z

07:19.050maskami. Możemy maskować różnymi kształtami, które stworzymy sobie w Figmie, rozmaite rzeczy, takie jak grupy,

07:26.490warstwy, obrazki itd.

07:27.960Więc zapamiętaj, jak działa schemat maskowania.

07:30.300A ja zapraszam Cię do następnej lekcji!