Figma: Praca z kształtami

00:00.360W tej lekcji zaczynamy zabawę z kształtami, czyli to, co w Figmie jest naprawdę bardzo przyjemne. Chciałbym

00:05.040stworzyć tutaj trzy przyciski do najważniejszych akcji naszego pierwszego ekranu. Będzie to akcja otwarcia

00:10.350albo zamknięcia domu, akcja przejścia do kamer i akcja "Puls", o której jeszcze później trochę opowiem.

00:15.930Wybieram polecenie O na klawiaturze, czyli "Oval", i rozpoczynam tworzenie owala.

00:20.250Naturalnie muszę wcisnąć Shift, żeby zachować proporcje i zrobić idealne koło. I teraz powstaje pytanie,

00:26.460jaki powinien być optymalny rozmiar, żeby użytkownik mógł w niego wygodnie tapnąć? Dla ekranów dotykowych

00:31.540to jest 44x44px - to jest minimalna absolutnie, minimalny rozmiar. Natomiast my na zegarku potrzebujemy

00:38.430zdecydowanie większy komfort i zacznę od np. 100x100px.

00:42.300Jeśli jeszcze nie wyszedłem z edycji tego kształtu, mogę docisnąć Spację, i spróbować umieścić ten kształt

00:47.640mniej więcej optycznie na środku, żeby zobaczyć, czy rzeczywiście jest w miarę dobrej wielkości.

00:51.960Jeżeli zakończę już edycję, to mogę dopasować go lepiej do środka, ponieważ mogę złapać za ten kształt

00:57.630i przesunąć w okolice środka - w tym momencie pojawi się taka czerwona, pionowa linia, która pozwoli mi

01:02.010idealnie do środka wyrównać ten element.

01:04.830Dodatkowo, zauważ, że w momencie, gdy jestem w równej odległości od jakichś innych kształtów, pojawiają

01:10.470się wartości np. tutaj 59px odstępu od jednego i drugiego miejsca, od tekstu i od tej dolnej krawędzi.

01:16.890W związku z tym jest ten kształt mniej więcej wyśrodkowany,

01:19.500również jeśli chodzi o te przestrzenie tutaj i tutaj. Świetnie, teraz dostosujmy jego wypełnienie.

01:24.720Wybiorę sobie jeden z kolorów wypełnienia.

01:26.850Załóżmy, że domek będzie zamknięty, więc będzie to kolor czerwony. I po raz pierwszy skorzystam z linii

01:32.340obramowania, czyli ze "Stroke'a". dodaję nowego stroke'a.

01:35.290I teraz tak. Domyślnie jest to kolor czarny. Jeżeli kliknę na tym kolorze, mogę wybrać kolor biały.

01:39.900Następnie mogę przejść do sekcji "Weight", czyli grubość, i tutaj kursorem w górę, strzałką w górę na klawiaturze

01:45.780i dostosować ją, i wybrać np. grubość powiedzmy 5px czy 6px, natomiast

01:52.620zauważ, że ten stroke jest tworzony wewnątrz naszego kształtu, co właśnie sygnalizuje opcja "Inside". Teraz,

02:00.000jeżeli chciałbym, a chciałbym, zmienić krycie tego stroke'a, to mogę to zrobić przechodząc do tego pola,

02:06.270z Shiftem mogę zmniejszyć to krycie. I nie jest to do końca efekt pożądany przeze mnie, ponieważ chciałbym,

02:11.520żeby on był jakby bardziej wtopiony w tło, aniżeli w ten czerwony kształt. W związku z tym, zamiast opcji "Inside"

02:18.720mogę wybrać tutaj, zmienić pozycję na "Center", czyli na środku, albo na "Outside", czyli poza kształtem. I to jest

02:24.510dokładnie ta pozycja, którą chciałem mieć. Więc zmniejszę to może do 5px, czy 4px.

02:30.900Ten sposób jest ok.

02:32.550Ten kształt jest odrobinę za duży, więc z Altem i z Shiftem go jednak zaskaluję do np. tej wartości około 90px

02:40.080czy 88px. I teraz, mając taki kształt bazowy, będę mógł go powielić.

02:44.220Jak to zrobić? Z Altem i z Shiftem

02:46.290powielam go i umieszczam jeden kształt tutaj.

02:48.990Drugi kształt umieszczam w tym miejscu. I teraz, jak widzisz, bardzo łatwo jest kształty umieścić w równej

02:54.090odległości obok siebie, ponieważ też przylegają one do tych wartości, 15px konkretnie, które mamy

03:00.660między nimi.

03:01.530A gdybyś chciał zobaczyć te odpowiednie odległości, wciśnij i przytrzymaj przycisk Alt na klawiaturze.

03:06.520W momencie, gdy masz zaznaczony kształt i wciśniesz i przytrzymasz Alt, możesz najechać na inny kształt,

03:12.210i zobaczysz jakie są odległości między tymi kształtami.

03:14.790Tu mamy 15px, tu między tymi mamy 62px, 37px, 68px itd.

03:19.680Możemy sobie sprawdzić te wszystkie odległości z przytrzymanym Altem na klawiaturze. Te dwa kształty

03:24.660chciałbym zaznaczyć, więc, żeby zaznaczyć dwie warstwy naraz, dociskam dodatkowo Shift.

03:29.130W ten sposób mam zaznaczone obie warstwy i spróbujmy je przeskalować. Czyli możemy je skalować znów na dwa

03:34.560sposoby.

03:35.010Jeżeli chcemy, żeby grubość stroke'a się skalowała proporcjonalnie, no to wtedy będziemy wybierali ten

03:41.610wariant.

03:42.240Narzędzie "Scale Tool".

03:43.110Ja natomiast chciałbym, żeby wybrać narzędzie "Move Tool".

03:46.650I wtedy zauważ, że to nie jest skalowane proporcjonalnie. No i taka właśnie jest różnica.

03:51.960Przechodzę do narzędzia "Scale Tool", i zobacz, że mamy skalowanie proporcjonalne. O to mi w zasadzie chodzi.

03:56.700I te pozostałe kształty umieszczę w ten sposób. Będą one trochę mniejsze, bo będą to mniej ważne akcje.

04:03.480Więc z Altem i z Shiftem je zmniejszyłem, a następnie z Shiftem, aby zachować jedną linię, umieszczę najpierw ten

04:09.990kształt tutaj i drugi kształt z Shiftem przesunę, tak, aby był on dokładnie o tę samą wartość oddalony

04:15.840od naszego środkowego kształtu.

04:18.150Teraz zmienię jeszcze wypełnienie,

04:19.740to zróbmy sobie kolor pomarańczowy, a ten kształt, zmieńmy jego wypełnienie na kolor niebieski.

04:25.290Pozostało nam przygotowanie ikon, które znajdą się w środku, w tych kształtach i ewentualnie chyba jeszcze

04:30.480zmiana trochę krycia tego, tej ramki. Wydaje mi się że 40% to może być za dużo.

04:34.570Z Shiftem zaznaczyłem wszystkie kształty,

04:36.450i, jak widzisz, teraz mogę na wszystkich kształtach jednocześnie zmienić tę wartość. I zmienię ją np.

04:41.850na około 14% czy 15% krycia dla obramowania.

04:45.440No i zajmijmy się rysowaniem ikon. Ikonki stworzymy sobie sami.

04:49.320Klikam na ten konkretny kształt i wybieram 2, po to, żeby przybliżyć do niego, zzoomować do niego maksymalnie,

04:55.680a następnie wybieram narzędzie "Pen Tool", po to, aby zacząć tworzyć tworzyć pierwszą ikonę.

05:02.090Tworzenie ikon zrobimy już w kolejnej lekcji, na którą serdecznie Cię zapraszam!