Figma: Drugi ekran linia przerywana

00:00.240Zaczynamy tę lekcję dokładnie w miejscu, gdzie skończyliśmy poprzednią. Usunę dwa niepotrzebne frame'y

00:05.010i zduplikuję cały frame "Home".

00:06.840W ten sposób będę miał wszystkie potrzebne elementy, a te niepotrzebne mogę zwyczajnie usunąć. czyli usuwam, tutaj z Cmd

00:13.390klikam podpis.

00:14.730Będę chciał zostawić zdjęcie, ponieważ będzie to widok z kamery, to wybiorę tutaj dla tego zdjęcia przezroczystość

00:21.640100% i zmienię jednocześnie tę ramkę tekstową, w taki sposób, aby tekst tej ramce był czarny albo

00:28.350prawie czarny.

00:29.670Zostawię sobie też tę dolną część, w której zrobimy taką linię czasu, która będzie nam umożliwiała zmianę

00:37.200godziny

00:38.010podglądania tego obrazu z kamery.

00:40.590Na razie zmieńmy tutaj również tekst, że to jest "Camera 1" i umożliwimy użytkownikowi zmianę tej kamery poprzez

00:49.020tapnięcie tutaj w to miejsce.

00:50.490Ale, żeby było to bardziej intuicyjne, stwórzmy jeszcze specyficzną ikonkę - czyli zrobimy linię z pomocą L.

00:56.930I teraz przybliżmy się do niej, zobaczmy jak to wygląda.

00:59.290Mamy 1px linię, której kolor chciałbym zmienić na kolor czarny. I teraz to, co warto zrobić,

01:05.310to zaznaczam sobie ten kształt, a następnie duplikuję go, Cmd+D.

01:09.600Klikam prawym przyciskiem myszy i wybieram polecenie "Flip Horizontal".

01:13.950To pozwoli mi zrobić dokładny klon tego elementu,

01:17.760tyle że w osi horyzontalnej. Teraz możemy już te dwie linie już połączyć np. w grupę, albo skorzystać - chyba nawet

01:24.330lepiej - z polecenia Union. I możemy umieścić to w odpowiednim miejscu. I już mamy taką sygnalizację wizualną

01:31.800dla użytkownika, że można w to tapnąć i zmienić kamerę.

01:34.980Oprócz tego chciałbym zrobić taki guzik powrotu do poprzedniego ekranu. Ponieważ musimy jakoś móc cofnąć

01:41.010się z tego widoku kamery, który możemy wybrać klikając na ten przycisk. I w związku z tym zróbmy go z

01:46.200pomocą "Oval'a". Narysujemy sobie kółeczko,

01:48.960w ten sposób. Zrobimy grubość linii 2px.

01:53.880I właśnie tego typu Stroke. Przybliżymy się teraz do niego i zrobimy strzałeczkę, która w Figmie jest dostępna.

02:02.340Jeżeli wybierzesz spod "Shape Tool'a" polecenie "Arrow Tool", będziesz mógł rozpocząć rysowanie i stworzyć taką oto właśnie np. strzałkę.

02:09.850Czyli zrobimy strzałkę.

02:11.310Grubość tej strzałki również ustawmy na 2px, i kolor także ustawimy na kolor czarny.

02:16.890Fajnie by było, gdyby tutaj była jakaś przerwa w tym kółeczku.

02:20.890Więc stwórzmy "Rectangle", prostokąt, w ten sposób, następnie usuniemy obramowanie, zrobimy wypełnienie,

02:29.100z Shiftem zaznaczymy dwie te warstwy, czyli prostokąt i elipsę.

02:32.710No i skorzystamy ze znanej Ci już opcji "Subtract", po to, żeby odjąć ten kwadracik od selekcji.

02:39.540Teraz mamy bardzo fajną ikonkę "Wstecz", mogę przejść do widoku zero aby oddalić się trochę.

02:46.410Wygląda to całkiem nieźle.

02:48.030Może wybierzmy jeszcze "Camera" i ten przycisk, czyli cały tytuł - i przesuńmy go optycznie delikatnie w

02:54.810prawo.

02:55.770OK, teraz, może jeszcze ikonę też w odpowiedni sposób zgrupujemy,

03:01.320Cmd+G, i też przesuniemy gdzieś, na przykład w to miejsce. Ok, fajnie, żeby było to w jednej linii. A następną

03:11.550rzeczą, którą tutaj dorobimy, będzie linia czasu, która znajdzie się na dole, i z pomocą kółeczka w naszym

03:18.180zegarku będziemy mogli scollować po tej linii czasu i przesuwać w taki sposób, że będziemy mogli zobaczyć

03:24.780widok z kamery, np. przez ostatnie kilka godzin. I do stworzenia tej linii czasu posłuży nam narzędzie

03:31.350L - linia, i zrobimy tutaj taką oto linię. Mamy Stroke'a 1px, kolor biały, i zobacz, jak to wygląda.

03:39.860Chciałbym zrobić tutaj linię przerywaną, Linię przerywaną

03:42.270możemy zrobić w Figmie w taki sposób, że wchodzimy do opcji "Stroke'a", czyli do tych trzech kropeczek, a następnie

03:50.100mamy to jest coś takiego jak "Dashes". I możemy wpisać "Dash" i "Gap". "Dash", to będzie grubość jednej kropki, czy

03:57.430kreski, a następnie będzie "Gap", czyli przerwa, odstęp pomiędzy kropkami czy kreskami. I to robimy po przecinku,

04:04.020czyli jeśli piszemy np. "5,5", to będziemy mieli kreskę długości 5px i przerwę 5px. Później

04:09.690znowu kreskę i przerwę, itd.

04:11.640Wejdźmy jeszcze raz do tych właściwości, i ustawmy następujące wartości. Ustawimy sobie 1 "Dash", i może

04:19.0803 czy 4 odstęp. Zobaczmy. Myślę że jest za gęsto.

04:22.950Więc zróbmy odstęp nawet rzadszy, czyli 10, a następnie zróbmy następującą rzecz. Przejdźmy do "Weight", czyli do

04:29.610grubości kreski, i z pomocą kursora w górę

04:32.850spróbujmy ją zwiększyć.

04:33.990Jak widzisz, teraz możemy uzyskać bardzo fajną taką linię.

04:37.120I dokładnie to, o co nam chodzi, ponieważ ma to być taka nasza oś, skala czasu, którą będzie można przesuwać.

04:42.960Na końcu zrobimy jeszcze jedną grubszą linię,

04:46.440w ten sposób, która będzie symbolizowała, oznaczała dokładnie to miejsce, w którym aktualnie znajdujemy

04:51.930się w czasie. Zrobimy ją w związku z tym 2px. Zmienimy kolor na jeden z naszych kolorów akcentu,

04:58.950w ten sposób, i trochę zwiększymy, a następnie przydałoby się zrobić do tego jeszcze labele, i trochę wtopić

05:06.380tę linię w tło, czyli zamiast 100% przezroczystości

05:10.150może zróbmy dla tej linii około 30% czy 40%, a następnie wciskam T na klawiaturze, po to, żeby

05:18.440wpisać tutaj tekst zrobimy tekst, który będzie mniejszym fontem. Spróbujmy.

05:22.46013, to może być na zegarek zdecydowanie za mało, więc spróbujmy 14. I piszemy godzinę np. 5:30.

05:29.540Zaznaczam i zmieniam wypełnienie na taki kolor szary, albo zróbmy białe, ale też zrobimy mu przezroczystość

05:35.58040%. Ok.

05:38.330I, w związku z tym, tutaj będziemy mieli godzinę 5:30, z Altem i z Shiftem przesuwam, tutaj będziemy mieli np.

05:45.03010:30, i to samo zrobimy w kolejnym kroku, czyli 15:30.

05:52.130A tutaj będzie obecny czas, czyli jeszcze raz możemy skopiować sobie to pole tekstowe i możemy wpisać...

05:59.930Moment, jeszcze raz to zrobię. Z Altem muszę przesunąć, o właśnie. Puszczam myszkę i dopiero wtedy puszczam

06:05.140Alt - i wpiszemy tutaj "Camera" albo "Now", albo coś, co zasygnalizuje, że to właśnie jest ten bieżący moment, który

06:11.810przeglądamy. umieszczam go tutaj, zmieniam na 100% krycie i ustawiam kolor dla tego elementu na ten

06:20.750sam kolor akcentu. I wydaje mi się, że to wygląda całkiem fajnie. Jest to ciekawy podgląd z kamer, które

06:26.390będziemy mogli jednocześnie zmieniać, więc jedną, kolejną sekcję mamy gotową - a w następnej lekcji zajmiemy

06:32.090się może sekcją "Pulse", do której możemy przejść.

06:34.240Zanim to zrobię, jeszcze przejdę z naszego footera, i, ponieważ wcześniej pozmieniałem w nim kolory, teraz

06:39.260wrócę do tego mojego oryginalnego koloru, który chciałbym tutaj zostawić. To wszystko na teraz,

06:44.630do usłyszenia w kolejnej lekcji!