Figma: Layout grid

00:00.350Witaj w kolejnej lekcji. Teraz zajmiemy się ustawieniami samego artboardu. Więc znamy ustawienia tła, czyli

00:05.250tej sekcji background, którą zresztą możemy włączyć i wyłączyć, żeby uzyskać przezroczyste tło.

00:10.410Mamy możliwość teraz kliknięcia na danym framie, a następnie przechodzimy do jego ustawień. Te opcje

00:16.770dotyczące rozmiaru, już mówiłem, opcje background są dość intuicyjne, przypominam o sekcji "Clip content", o której

00:22.650już mówiliśmy.

00:23.910Natomiast poniżej mamy coś takiego jak "Layout Grid". "Layout Grid" umożliwia nam włączenie z pomocą +

00:30.180takiego podglądu różnych kolumn albo rzędów, w zależności od tego, co chcemy zrobić. Możemy ten

00:35.220podgląd włączyć i włączyć, i możemy przejść do jego właściwości.

00:38.670Klikamy na tej małej ikonce, a następnie wpisujem,y ile kolumn chcemy uzyskać.

00:43.730Na przykład, jeśli chcemy mieć trzy kolumny, to przechodząc do następnego pola tab-em, możemy uzyskać

00:49.890podgląd takich trzech kolumn.

00:51.300Możemy też ustawić jakiś inny kolor, np. możemy ustawić sobie kolor zielony i również zmienić krycie

00:58.800tego koloru, żeby te kolumny były bardziej czy mniej widoczne.

01:01.770W zasadzie w dowolnym polu, jeżeli jesteś w Figmie, możesz kliknąć i zaznaczyć - potwierdzić to pole

01:07.980na niebiesko, a następnie, zdecydowanie łatwiej, niż wpisywać z palca z klawiatury numerycznej,

01:13.700tutaj wartości, jest operować na kursorach na klawiaturze - na strzałkach na klawiaturze. Czyli teraz jeśli mamy

01:20.160zaznaczone to pole, możemy strzałką w górę zwiększać tę wartość.

01:24.570Jak widzisz zwiększa się przezroczystość, czyli krycie tego zielonego koloru.

01:29.010Ewentualnie możemy strzałką w dół oczywiście ją zmniejszać, a w momencie gdy dociśniemy Shift na klawiaturze

01:34.680będziemy zwiększali wartości o 10, zamiast o 1 - czyli będziemy mieli bardziej drastyczny przyrost.

01:39.740Możemy tutaj szybko przejść do 100% i z powrotem zejść do około 10%.

01:44.730Więc zostawmy sobie to na 10%, i pamiętaj, że ta zasada działa praktycznie we wszystkich polach.

01:49.620W Figmie najlepiej jest to robić strzałkami na klawiaturze.

01:52.920Mamy również możliwość ustawienia typu dla tego elementu.

01:55.860Ten typ to "Stretch", albo przyporządkowanie, czy to do środka, czy np. do lewej strony.

02:01.290W zasadzie w większości sytuacji będziesz chciał na potrzeby resonsywnych projektów zachować opcję

02:06.720"Stretch", to znaczy, że gdy będziemy zmieniali wielkość tego naszego artboardu, to kolumny zostaną rozciągnięte.

02:15.630cofnę tę operację za pomocą Cmd+Z czy Ctrl+Z.

02:18.540Natomiast są wyjątki od tego. Jeżeli np. będziesz tworzył stronę internetową, w której chcesz zostawić

02:23.880stały margines po bokach i chcesz, żeby te właśnie kolumny były kolumny, które stworzyłeś w "Layout grid" były

02:32.190zawsze na środku i wtedy będziesz mógł wybrać pozycję "Center".

02:35.630I w tym momencie brany jest pod uwagę pewien "Gather" - Jak widzisz mamy tutaj odstęp i mamy szerokość danej

02:41.700kolumny.

02:42.090Czyli tutaj już możemy wtedy ustawić szerokość, np. 30px, a następnie zostawić te kolumny na środku

02:49.020i w momencie gdy będziemy skalowali, będą zawsze na środku.

02:51.750Czyli będzie zwiększać tylko margines z lewej i z prawej strony, ewentualnie do naszej strony, a całość

02:56.670zostanie na środku.

02:57.500Po co w ogóle korzystać z tego "Layout Grid'a"?

03:00.600Korzystamy z "Layout Grid'a" wtedy, kiedy chcemy, aby nasz layout i poszczególne elementy, które się

03:06.690w nim znajdują, były wypozycjonowanie zgodnie z jakimiś liniami - np. taki Grid który miałby... zawierałby

03:12.510pięć kolumn, nadaje się całkiem do stworzenia takiego projektu na Apple Watch'a, ponieważ będziemy mogli

03:20.280wtedy zachować spójność we wszystkich elementach interfejsu, przykładowo: zaznaczę sobie naszą grafikę

03:28.380i teraz stworzę jakiś prostokąt - wybieram R - jak prostokąt.

03:32.190Przykładowo, będziemy mogli zrobić wszystkie przyciski w taki sposób, aby były one oparte o szerokość

03:38.130tego Grida, czyli od tej drugiej do czwartej kolumny, i w ten sposób będą one stałe i spójne na przestrzeni

03:45.150całego layoutu.

03:46.170Podobnie gdybyśmy dodawali jakieś pola tekstowe np. ramkę tekstową z pomocą T

03:51.030na klawiaturze i wpisywali tutaj jakiś tekst, to ten tekst zawsze również będzie właśnie w obrębie

03:58.260jakichś linii. i dzięki temu będzie trochę bardziej spójny.

04:01.680To nie wszystko co potrafi "Layout Grid".

04:03.390Trochę też związany jest z nim projekt, który będziemy później skalować, np. na inne wielkości ekranów,

04:09.180ponieważ w momencie, gdy zaznaczę cały nasz frame i zacznę go skalować,

04:13.560zauważ, że mamy ten Grid zrobiony jako "Fluid", on się powiększa, powiększają się jego szerokości, ale ten

04:18.840tekst zawsze będzie wyrównany do tej właśnie krawędzi "Layout Gridu", który stworzyliśmy. Ja tę warstwę teraz

04:25.860zaznaczę i z pomocą Backspace usunę, to sobie umieszczę tutaj.

04:29.650I jeśli przejdziemy do menu widoku, żeby krótko podsumować ,czyli wybierzemy teraz opcję View mamy tutaj

04:36.000możliwość pokazywania różnych rzeczy, między innymi właśnie pokazywania i wyłączenia "Layout Gridu".

04:41.880To jest skrót na Macu Ctrl+G, a więc jeżeli wciśniesz go, to możesz pokazać i ukryć "Layout Grid".

04:48.060Mamy jeszcze oprócz "Layout Grida" coś takiego jak "Rulers", i jeśli wciśniemy Shift+R, to pokażą nam się linie podziałki,

04:55.650i one również są w tym menu widoku. I te linie podziałki, jak widzisz, są od jakiejś skali - tutaj mamy zero,

05:02.610Tutaj gdzieś też mamy zero.

05:03.870Najlepiej jest kliknąć na nasz artboard i wyrównać go na X i Y, czyli zaznaczamy sobie X i wpisujemy 0.

05:11.220Teraz Tab - przechodzimy do Y, i również wpisujemy 0.

05:15.070Czyli wyrównujemy go w taki sposób. Dlaczego ten ludek nie porusza się razem z artboardem? Bo nie należy

05:19.860do tego frame'a. Gdybyśmy wrzucili tę grupę na frame'a, to ona poruszałaby się razem z nim wcześniej. Więc ok,

05:26.550przesuńmy to teraz ręcznie.

05:28.470I. jak widzisz. teraz mamy... Możemy z pomocą przytrzymanej Spacji przesuwać to, ale teraz mamy nasz pierwszy

05:34.140artboard na współrzędnych 0/0 i to jest OK.

05:36.810Natomiast, do czego jeszcze nam służy ta podziałka? Jak widzisz, zaznacza nam, informuje o tym, gdzie jest,

05:42.900kończy się wielkość zaznaczonej warstwy.

05:44.510Dodatkowo, informuje nas o tym rozmiar, który jest na dole. Ale możemy też chwycić za tą podziałkę i np.

05:50.890zmierzyć sobie różne rzeczy, czyli przesunąć ją tutaj w dowolne miejsce.

05:54.870Zarówno tą podziałkę z lewej strony jak i podziałkę z prawej strony. Podziałka ma jeszcze jedną fajną

05:59.790funkcję.

06:00.180Można na niej kliknąć prawym przyciskiem myszy i wtedy wybrać jedną z dwóch opcji.

06:03.680To jest jedna z opcji, która osobom początkującym w Figmie często się myli i powoduje, że wpadają one

06:09.240w lekką panikę, ponieważ chcą się dostać do "Search menu", czyli do tego menu wyszukiwania, które znajduje się

06:15.390tutaj i pozwala znaleźć jakieś funkcje.

06:17.520Tymczasem, zamiast tego, czyli zamiast skrótu Cmd+/ czy Ctrl+/ wciskają Cmd+\ czy Ctrl+\

06:23.700i wtedy dzieje się coś takiego.

06:26.130Znika nam cały interfejs Figmy. Jest to bardzo fajny tryb do tworzenia, pokazywania czegoś komuś - czyli

06:32.250do prezentacji.

06:33.020Oczywiście tutaj możemy dalej pracować.

06:35.610Figma jest w pełni funkcjonalna, jeśli pamiętamy skróty, to możemy pracować z bardzo dużą przestrzenią ekranu

06:40.950natomiast często zapominamy jak wrócić - zwłaszcza osoby początkujące nie wiedzą, jak wyjść z tego widoku.

06:46.320I, jeśli nie pamiętasz tego skrótu Cmd+\ czy Ctrl+\ na PC, to, jeśli wejdziesz do tego trybu,

06:53.940nie panikuj, tylko przejdź po prostu do zakładki z Figmą, wybierz Return, czyli po prostu odśwież

06:58.830sobie ten widok.

07:00.030Nie martw się, ponieważ wszystkie zmiany, które tworzysz w pliku zostają na bieżąco zapisywane. W związku

07:05.100z tym trafisz do niego dokładnie w takiej formie, w jakiej był przed chwilą,

07:08.880ale będziesz miał dostępny cały UI.

07:10.710Oczywiście warto zapamiętać też skrót.

07:12.840Ostatnia rzecz, o której chciałem powiedzieć w tej lekcji, to jeśli przeniesiemy się do menu,

07:16.230Przypominam, że w menu "View" mamy możliwość pokazywania "Pixel gridu", który omawialiśmy wcześniej,

07:21.390"Layout Gridu" albo "Rulers".

07:22.770Mamy też możliwość pokazania / schowania UI.

07:25.210I mamy również możliwość zwinięcia wyłącznie tego panelu warstw, który jest z lewej strony, jeżeliby

07:31.310nam przeszkadzał, a w panelu "Preferencji" znajdują się tzw. opcje przylegania, czyli cała górna sekcja

07:38.010opcji "Snap".

07:39.270O co chodzi w opcjach "Snap".

07:40.490W momencie, gdy tworzymy cokolwiek w Figmie, i zaczniemy rysowanie blisko na przykład "Layout Gridu", zauważ,

07:48.150że zostanie to przyciągnięte do krawędzi "Layout Grida". W momencie, gdy jesteśmy przy którejś z krawędzi "Layout Gridu",

07:54.360również pojawia się, zapala taka czerwona linia i też, jak gdyby delikatnie jesteśmy przesuwani kursorem,

08:01.560po to, żeby trafić dokładnie w to miejsce, w którym zaczyna się, czy kończy, ten "Layout Grid".

08:06.090I to jest właśnie opcja "Snap", czyli opcja przylegania.

08:07.600I ta opcja "Snap" będzie dotyczyła nie tylko "Layout Grida", ale zauważ, również np. innych obiektów,

08:13.830które tworzymy, czyli jeśli stworzymy sobie tutaj jeden prostokąt, a następnie go powielimy np. z Alt-em możemy

08:20.760kliknąć i go wyciągnąć.

08:22.380To wtedy opcje przylegania

08:23.700będą też działać, i, jak widzisz, działać między dwoma obiektami.

08:27.830Ta linia czerwona, pionowa się nam pojawia i w związku z tym to jest właśnie przyleganie.

08:32.940Jeśli w Preferencjach chcesz wyłączyć przyleganie, bo z jakichś powodów ci przeszkadza,

08:37.230możesz to zrobić dla różnych rzeczy.

08:38.730Możesz to wyłączyć dla obiektów, dla geometrii, możesz to wyłączyć dla "Pixel Grid'a", czyli właśnie

08:44.940dla tej siatki pikseli.

08:46.590To czasem się przydaje przy tworzeniu wektorów, przy tworzeniu jakiejś wektorowych ikon.

08:50.940No i właśnie wtedy będziesz pracował w taki sposób, że nie będą te obiekty, nie będą te linie ci przeszkadzały

08:58.350w pracy.

08:58.800Ale na ogół, zwykle to pomaga, zwłaszcza, jeżeli pracujemy z "Layout Gridem".

09:02.940Zapamiętaj skrót Ctrl+G, czyli właśnie możliwość tego pokazywania i ukrywania "Grida", a także Shift+R, czyli

09:09.180możliwość pokazywania i ukrywania linii podziałki. W tej lekcji to już wszystko,

09:13.140Do usłyszenia!